بهینه‌سازی تصاویر برای وب

یکی از بهترین روش‌ها برای ساخت یک وب‌سایت سریع، بهینه‌سازی تصاویر آن است و تأثیر دیگر اجزای یک وب‌سایت مانند فایل‌های سی‌اس‌اس، اچ‌تی‌ام‌ال، جاوااسکریپت و ... در برابر تأثیر حجم تصاویر در سرعت یک سایت، خیلی به حساب نمی‌آیند! بیشتر حجم یک صفحهٔ وب را تصاویر تشکیل می‌دهند؛ بنابراین با بهینه‌سازی آن‌ها می‌توان سرعت انتقال داده‌ها از سرور به مرورگر کاربران را افزایش داد و این همان چیزی است که در این مقاله مورد بررسی قرار خواهیم داد.

مزایای استفاده از فرمت SVG
گرافیک برداری مقیاس‌پذیر (SVG) یک زبان نشانه‌گذاری XML برای ذخیره‌سازی تصاویر وکتور است. برخلاف بسیاری از فرمت‌های معروف که از داده‌های پیکسلی برای نمایش تصاویر استفاده می‌کنند، SVG از نقاطی به نام بردار (وکتور) تشکیل شده است که در یک شبکهٔ هماهنگ دوبُعدی ترسیم شده‌اند (اکثر طراحان حرفه‌ای از نرم‌افزارهای مخصوص طراحی تصاویر وکتور مانند Adobe Illustrator استفاده می‌کنند اما برای طراحی‌های ساده‌تر می‌توان از ابزارهای رایگان و تحت وب مانند Method Draw و Mondrian استفاده کرد).

فرمت SVG برای وب بسیار مناسب است زیرا علاوه بر رزولوشن نامحدود، دارای حجم بسیار کمی نیز می‌باشد. به عبارت دیگر، می‌توان تصاویر وکتور را بدون اُفت کیفیت بزرگ کرد و این قابلیت به خاطر آن است که تصاویر وکتور به‌جای استفاده از پیکسل‌ برای نمایش تصاویر، از یکسری مختصات استفاده می‌کنند که در نهایت این مختصات به‌صورت یک فایل تصویری پیکسلی، بدون در نظر گرفتن رزولوشن درمی‌آیند.

این فرمت تنها برای استفاده در تصاویر سادهٔ گرافیکی مناسب است و در همه‌جا کارآمد نیست! به عنوان مثال، نمی‌توان در تصاویر با جزئیات بالا از این فرمت استفاده کرد و هنوز برای استفاده از این تصاویر از فرمت‌های پیکسلی مانند PNG استفاده می‌شود (لازم به ذکر است که از این فرمت در مرورگرهای مدرن و مرورگر IE9 به بعد نیز پشتیبانی می‌شود).

Rescale کردن تصاویر پیکسلی 
تصاویر با فرمت SVG مستقل از رزولوشن هستند اما تصاویر پیکسلی دارای رزولوشن مطلق ارائه شده در پیکسل‌ها هستند. در صورتی که همهٔ عوامل دیگر برابر باشند، تصاویر دارای پیکسل بیشتر، صفحه را کُندتر می‌کنند.

گاهی‌اوقات بهتر است به مرورگر این اجازه را بدهید که تصویر را اصطلاحاً Rescale کند؛ بنابراین در هر صفحه نمایشی به طور واکنش‌گرا عمل خواهد کرد. به عبارت دیگر، اگر تعداد پیکسلی که برای یک دستگاه ارسال می‌شود بیشتر از تعداد پیکسل نمایشی خود دستگاه باشد، خود مرورگر آن را تغییر اندازه می‌دهد.

در کل بهتر است که شما تصاویر را بهینه‌سازی کنید به طوری که برای هر دستگاه تصویری بالاتر از رزولوشن مورد نیاز ارسال نشود. مخاطب سایت شما همیشه در حال تغییر است و در اینجا فرمت‌های SVG برتری خود را نشان می‌دهند. با این حال هنوز هم امکان ارتقاء و بهبود هست. 

درآمدی بر فرمت PNG
فرمت SVG برای استفاده در شکل‌های هندسی بسیار مناسب است در حالی که JPG برای تصاویر هنری مناسب‌تر است. با این حال، بعضی اوقات برای یک شکل هنری نمی‌توان فرمت SVG پیدا کرد و تأثیرات فشرده‌سازی JPG باعث بی‌کیفیت شدن تصویر در بخش‌های دارای رنگ‌های فِلَت یا خطوط هندسی است. به علاوه، ممکن است که تصویر شما دارای پس‌زمینهٔ شفاف باشد که در این مواقع بهترین گزینه فرمت PNG است که در دو حالت PNG-8 و PNG-24 وجود دارد.

PNG-8 از یک پالت تطبیقی که تا 256 رنگ را پشتیبانی می‌کند استفاده کرده که یکی از این رنگ‌ها، رنگ شفاف (Transparent) است؛ اما این شفافیت باینری است (یعنی یا بخشی از شکل کاملاً شفاف است یا کاملاً مات و هیچ درجه‌بندی جزئی برای آن وجود ندارد). اگر یک تصویر PNG-8 دارای پیکسل‌های روشنی باشد که روی یک پس‌زمینهٔ تیره قرار داشته باشد، لبه‌های ناهمواری ایجاد شده که به وضوح نشان داده می‌شوند اما قابلیت خوب این فرمت حجم نسبتاً مناسب آن است.

PNG-24 از پالت رنگی کامل و شفافیت دارای درجه‌بندی بهره می‌برد و در نتیجه تصاویر با وضوح و شفافیت در این فرمت خود را نشان می‌دهند و تنها فرمتی است که برای نشان دادن شفافیت به طور کامل به کار می‌رود. اما نکتهٔ منفی این فرمت، حجم بالای آن است.

اگر واقعاً مجبور هستید تا از فرمت PNG استفاده کنید، بهتر است از PNG-8 استفاده کرده و سعی کنید که تا حد امکان پالت رنگی خود را محدودتر کنید و فقط در مواقعی از PNG-24 استفاده کنید که تصویر مورد نظر دارای شفافیت درصدی است (همچنین اگر شفافیت در تمام عکس یکسان است، می‌توانید از فرمت کم‌حجم‌تر و کمی کدنویسی CSS استفاده کنید).

از فرمت انیمیشنی GIF خیلی کم استفاده کنید 
فرمت GIF در دههٔ 1990 خیلی استفاده می‌شد و تازه ساخته شده بود. امروزه دلیل استفاده نکردن از این فرمت خیلی واضح است و آن هم چیزی نیست جز اینکه فرمت GIF باعث افزایش حجم تصویر حتی بیشتر از یک ویدئوی HTML5 می‌شود! اگر هم واقعاً مجبورید که از تصاویر GIF استفاده کنید، حتماً به حجم صفحه توجه داشته باشید.

فشرده‌سازی زیاد در تصاویر با سایز دو برابر 
هنگامی که تصاویر پیکسلی را در نمایشگرهایی با تراکم پیکسل بالا مانند صفحات رتینای اپل باز کنیم، برای نمایش درست این تصاویر باید آن‌ها را در این نمایشگرها با سایز دو یا سه برابر اندازهٔ عادی ارائه بدهیم. این دستگاه‌ها تعداد پیکسل‌های بیشتری را روی نمایشگر خود نمایش می‌دهند که به آن‌ها پیکسل‌های مجازی می‌گویند. با اینکه تصاویر با سایز 2 برابر دارای پیکسل‌های بیشتری هستند، اما جالب است بدانید که اثر فشرده‌سازی در این سایز، برای تصاویر بیشتر است! برای روشن‌تر شدن این موضوع، به دو تصویر زیر دقت کنید:

در تصویر سمت چپ اثر فشرده‌سازی تصویر با وجود رزولوشن پایین‌تر کمتر است اما در تصویر سمت راست که اثر فشرده‌سازی بیشتر بوده، عکس در رزولوشن ۲ برابر عکس قبلی گرفته شده است که مرورگر اندازهٔ آن تصویر را به 512 کاهش داده است. نتیجهٔ ظاهری تصویر نیز در هر دو تقریباً برابر است اما اثر فشرده‌سازی در تصویر با رزولوشن بالاتر، بیشتر بوده است.

بارگذاری تصاویر JPG به صورت تدریجی 
روش بارگذاری تصاویر JPG اصولاً بدین صورت است که هر بخش از تصویر از بالا به پایین دانلود می‌شود و به صورت بخش به بخش روی صفحه به نمایش درمی‌آید اما می‌توان آن‌ها را به صورت تدریجی بارگذاری کرد به این صورت که ابتدا تصویر تار بارگذاری می‌شود و پس از چند ثانیه تصویر واضح و نهایی نشان داده می‌شود.

این روش هیچ تأثیری روی سرعت بارگذاری تصویر ندارد اما به خاطر تأثیر ادراکی روی بیننده، به نظر می‌رسد که سرعت بارگذاری سایت بیشتر است. چشم انسان در یک زمان تنها می‌تواند روی یک بخش بسیار کوچک متمرکز شود بنابراین از دید کاربران، بارگذاری تدریجی تصاویر از تار به کاملاً شفاف، سریع‌تر از حالت بارگذاری از بالا به پایین به نظر می‌رسد.