انتخاب بهترین فرمت برای تصاویر سایت
بهترین فرمت برای تصاویر سایت کدام است؟
فرمت تصاویر سایت : ابتدا باید یکسری معیار و مشخصه تعریف کنیم که فرمت‌های مختلف را بر اساس این معیارها باهم مقایسه کنیم و ببینیم کدام‌یکی بهتر است و کدام‌یکی را تحت چه شرایطی استفاده کنیم.
هر تصویری که برای استفاده در وب‌سایت، بخواهیم استفاده کنیم باید دارای سه مشخصه‌ی اصلی باشد.
- مشخصه‌ی اول این است که عکس باید کیفیت خوب و بالایی داشته باشد تا خیلی خوب و عالی در وب‌سایت ما نمایش داده شود.
- مشخصه‌ی دوم که هر تصویر باید داشته باشد این است که دارای حجم و سایز مناسب باشد. این ویژگی بسیار مهم است زیرا باید سایت ما خیلی سریع لود شود. پس‌تصویر ما باید بالاترین کیفیت و درعین‌حال کمترین حجم را داشته باشد. بنابراین باید فرمتی را انتخاب کنیم که درعین‌حال که کیفیت خروجی مطلوبی را به ما می‌دهد حجم بسیار پایینی هم داشته باشد و دیگر نیاز نباشد برای لود شدن یک وب‌سایت چند مگابایت از حجم اینترنت کاربر صرف شود و چند ده ثانیه کاربر منتظر باشد تا عکس لود شود.
- مشخصه‌ی سوم مقیاس‌پذیری تصویر است. این به این معناست که بتوانیم تصویر را بزرگ‌تر کنیم بدون اینکه کیفیت تصویر افت پیدا کند.
فرمت JPG
اولین فرمتی که به گوشمان خورده است فرمت JPG است. که یک فرمت تصویر است که اکثر موبایل‌ها و دوربین‌ها با این فرمت عکس را دانلود می‌کنند و در اختیار ما قرار می‌دهند.
برای درک بهتر این موضوع در گوگل آدرس سایت unsphash.com سرچ می‌کنیم و وارد آن می‌شویم که جزو وب‌سایت‌هایی است که تصاویر باکیفیتی را می‌شود از آن دانلود کرد. اکثرا تصاویری که در این سایت می‌بینیم به‌صورت طبیعی و واقعی از مناظر و تصویر انسان و … هستند. یکی از تصاویر را باز می کنیم.
سپس این تصویری را که دانلود کردم در برنامه فتوشاپ می‌گذارم تا مقایسه انجام دهیم.
به این نکته توجه کنید برای ذخیره عکس برای وب‌سایت در فتوشاپ باید از منوی file روی گزینه‌ی Export کلیک کنیم و آنگاه کلید save for web را بزنیم اینجا می‌توانیم تصاویر را در حجم مناسب و کیفیت مناسب برای استفاده در وب‌سایت خود ذخیره کنیم.
طبق تصاویر پایین فرمت را روی JPG قرار داده و مثلا گزینه‌ی very High را میزنیم و می‌بینیم که اگر سایز آن را مثلا 1000 پیکسل در 1500 پیکسل بگذاریم. کیفیت 253.9 کیلوبایت را نشان می‌دهد.
حالا در همین عکس JPG را میزارم روی MAXimum و ماکزیمم کیفیتی که فرمت JPG روی این عکس به ما می‌دهد اندازه‌ی یک 1000 کیلو بایت است که نزدیک به یک مگابایت است و برای استفاده در وب‌سایت حجم بالایی است.
فرمت PNG24
حال همین عکس را می‌بریم در فرمت PNG24 می‌گذاریم و مشاهده می‌کنیم که تصویر حجم زیادی مثل 1.5 مگابایت حجم دارد یعنی دو برابر JPG حجم دارد PNG .
به تصویر زیر توجه کنید تا مفهوم توضیحات بالا را درک کنید.
بنابراین تا اینجا متوجه شدیم که عکس‌هایی که واقعی هستند مانند عکس‌هایی که از مناظر گرفته می‌شود و یا اینکه خودتان در مکان یا محیط خاصی گرفته‌‌شده با دوربین بهتر است از JPG استفاده کنیم.
فرمت PNG
فرمت بعدی PNG است که بیشتر برای تصاویر وکتور مناسب است مثلا وارد سایت freepik می‌شویم و یک تصویر را انتخاب می‌کنیم. و دوباره آن را داخل فتوشاپ می‌بریم و سپس مقایسه می‌کنیم.
و می‌خواهیم این تصویر را خروجی بگیریم با حجم کم و کیفیت مناسب. در این تصویر کاملا عکس فرمت قبلی عمل می‌کند یعنی PNG حجم کمتری نسبت به JPG دارد.
به تصاویر زیر دقت کنید تا مطالب گفته شده را درک کنید.
همان‌طور که در تصویر بالا می‌بینید این عکس با فرمت png دارای حجم 66 کیلوبایت است. اما در تصویر پایین این عکس با فرمت JPG دارای 140 کیلو بایت است.
دلیل این این اتفاق چیست
دلیل این اتفاق این است که تصویر با فرمت JPG، باوجود تفاوت رنگ در پیکسل‌های مختلف حجم تصویر زیاد نمی‌شود ولی در فرمت png متأسفانه هرچقدر که تعداد پیکسل‌هایی که رنگ آن‌ها باهم دیگر متفاوت است بیشتر شود، تصویر ما هم، حجم بسیار بالاتری می‌گیرد هرچند کیفیت آن ممکن است زیاد بالا نباشد به نسبت JPG .
بنابراین اگر تصویری دارید که حالت وکتور است ( منظور از تصویر وکتور این است که، تصویر تفاوت رنگ زیادی ندارد و بیشتر به‌صورت انیمیشن است و بیشتر با نرم‌افزاری مثل ایلاستریتور تولیدشده‌اند) بهتر است از فرمت png استفاده کنید.
اما اگر تصویری دارید که تصویر شما یک تصویر واقعی است مانند تصویر یک منظره که تفاوت رنگ بین پیکسل‌های مختلف این تصویر به خاطر وجود نورهای مختلف و سایه‌های مختلف بیشتر است. بهتر است از فرمت JPG استفاده کنید.
JPG و PNG دو فرمت رایج استفاده‌ی تصاویر در وب‌سایت است. معمولا 99 درصد سایت‌هایی که می‌بینیم دارند از این دو فرمت استفاده می‌کنند.
این را هم با ما بخوانید :
ابزارهای آنلاین فشرده سازی تصاویر
آموزش بهینه سازی تصاویر با فتوشاپ
خطای HTTP هنگام آپلود تصاویر وردپرس
آموزش تصویری افزودن سایه به تصاویر در فتوشاپ
دیدگاهتان را بنویسید