فشرده‌سازی تصویر در هر فرمتی امکان‌پذیر است. هرچند، تفاوت بین فرمت‌های GIF، PNG و JPEG در چگونگی فشرده شدن اطلاعات و نمایش در صفحه است. نکات بسیاری برای قرار دادن بهترین محتوای تصویری به روی وب وجود دارد، با این حال هنوز هم بسیاری از طراحان برخی از اصول آن را نمی‌دانند.
در این راهنما ما ایده‌هایی را برای بهینه‌سازی مناسب فایل‌های JPEG ارائه می‌دهیم. بهینه‌سازی تصاویر برای کاهش مدت‌زمان لود وب‌سایت انجام می‌گیرد اما این کار باید در عین داشتن عکس‌های باکیفیت روی وب رخ دهد. همه‌چیز به تعادل بین سایر فایل و نمایش در صفحه بستگی دارد. هیچ راه حل کلی و عالی برای تمامی طراحان وجود ندارد. این کار نیاز به تمرین و آزمون و خطا دارد، اما زمانی که فشرده‌سازی مناسب JPEG را متوجه شدید برایتان ساخت وب‌سایت در آینده ساده‌تر خواهد شد.
از ذخیره ۱۰۰% فایل خودداری کنید
هیچ‌وقت نباید تصاویر JPEG را با کیفیت ۱۰۰% ذخیره کنید. ؛ چراکه این کار موجب می‌شود سایز فایل شما افزایش یابد. حتی در قیاس با کیفیت ۹۰% یا ۹۵% هم متوجه کاهش قابل‌توجه سایز فایل می‌شوید.
در اغلب مواقع توصیه می‌شود تصاویر را حتی از ۹۰% هم پایین‌تر ذخیره کنید. اگر در فتوشاپ گزینه Save for Web را انتخاب کنید، متوجه خواهید شد که چند گزینه از پیش مشخص شده وجود دارد که می‌توانید از آن‌ها استفاده کنید. در ادامه این گزینه‌ها را بررسی خواهیم کرد:
- Low: ١٠%
- Medium: ٣٠%
- High: ٦٠%
- Very High: ٨٠%
- Maximum: ١٠٠%
حتی با توجه به پیش‌فرض‌های فتوشاپ هم، تصویر با کیفیت ۶۰% همچنان در رده کیفیت «بالا» قرار می‌گیرد. بسیاری از دولوپرهای وب معتقدند حد فاصل ۵۰% تا ۷۰% برای فایل‌های وب مناسب است.
چقدر کم خیلی کم است؟
مقداری که برای بهینه‌سازی عکس انتخاب می‌کنید کاملاً به پروژه‌ای که در دست دارید بستگی دارد. باید در نظر بگیرید کدام نوع فایل‌های گرافیکی خروجی با بالاترین سایز خواهند داشت= این نوع فایل‌ها واقعاً نیاز به فشرده‌سازی دارند.
اما اگر بخواهیم به شما یک عدد بدهیم باید بگوییم معمولاً کیفیت زیر ۳۰% برای تصاویر وب مناسب نیست. هرچند سایر طراحان حتی محدوده‌ی ۵۰% را برای کاهش حجم فایل مناسب می‌دانند.
در نهایت، پیشنهاد ما این است که تنظیمات مختلف را امتحان کنید تا ببینید کدام بهترین نتیجه را خواهد داشت. با چند تست بهینه‌سازی فایل‌های JPEG به یک نتیجه‌گیری کلی بهتر خواهید رسید.
گزینه‌های فشرده‌سازی
ما ابتدا باید دو اصطلاح «فشرده‌سازی» و «کیفیت» را شفاف‌سازی کنیم چرا که این دو معکوس یکدیگرند. بدین معنا که اگر شما یک فایل JPEG را ۴۰% فشرده کنید ۶۰% کیفیت خواهید داشت. (در مقایسه با حداکثر کیفیت ۱۰۰% بدون هیچ فشرده‌سازی)
این‌ها اولیه‌ترین گزینه‌ها برای به کار گرفتن هستند که برای ذخیره فایل برای وب کافی هستند. کاربران عمومی خیلی در این سفارشی‌سازی عمیق نمی‌شوند.
این کار زمانی پیچیده‌تر می‌شود که شما تصاویر RGB را به YCbCr تبدیل می‌کنید (درخشندگی (Luminance، آبی کروما (Chroma Blue، قرمز کروما (Chroma Red).
تنظیمات luminance یا روشنایی تصویر در فشرده‌سازی فایل‌های JPEG همیشه در بالاترین حد ممکن خود قرار دارد. با این مقدار روشنایی در یک کانال جداگانه بهینه‌سازی ارزش‌های رنگی قرمز و آبی ساده‌تر می‌شود. این مسئله با نام نمونه‌برداری کروما (Chroma subsampling) شناخته می‌شود.
نکته‌ای که باید بدانید این است که فتوشاپ همیشه برای فشرده‌سازی از subsampling استفاده نمی‌کند. تصاویری که از طریق Save for Web ذخیره می‌شوند از نمونه‌برداری کروما با کیفیت زیر ۵۰% استفاده می‌کنند.
رسانه‌های وب متفاوت
وب مملو از انواع مختلف رسانه‌های تصویری است. شما در وب‌سایتتان ممکن است عکس، آیکون، دکمه، نماد و ده‌ها گرافیک دیگر داشته باشید. اما چیزی که باید بدانید این است که مقایسه بین کیفیت یک دکمه و یک عکس منطقی نیست. وقتی از عکس یا تصاویر با جزییات بالا استفاده می‌کنید بهتر است آن تصویر را به یک تصویر کوچک‌تر و فشرده شده لینک کنید. در این صورت می‌توانید یک عکس کوچک به‌عنوان Thumbnail در سایت خود داشته باشید که درصد فشرده‌سازی بالاتر و سایز کوچک‌تری دارد و عکس اصلی با سایز اصلی در صفحه‌ای مجزا باز شود.
تنها نکته منفی این کار این است که باید تصاویرتان را در دو سایز مختلف آماده کنید. به سایر گرافیک‌هایی که در وب‌سایتتان استفاده کرده‌اید هم دقت کنید و از تکنیک‌های بهینه‌سازی برای هر یک از آن‌ها استفاده کنید.
استفاده از ابزار فشرده‌سازی
شما می‌خواهید فایل‌های تصویری روی وب‌سایتتان به‌سادگی باز شوند. برای این کار می‌توانید از ابزار بهینه‌سازی برای کاهش سایز تصاویر استفاده کنید. هر یک بایت اضافه که شما از سایز فایلتان کم می‌کنید بسیار اهمیت دارد. در ادامه به چند ابزار که می‌توانید برای این کار از آن‌ها استفاده کنید اشاره می‌شود:
TinyJPG
TinyJPG یک وب اپ تحت مرورگر است که از طریق آن می‌توانید یک عکس آپلود کنید و با کم کردن بایت‌های اضافه و غیرضروری آن، سایز فایل را کاهش دهید. این ابزار ۱۰۰% بی‌ضرر است، بدین معنا که کیفیت تصویر تحت هیچ شرایطی کاهش نمی‌یابد. می‌توانید هر بار ۲۰ عکس که جمعاً نهایت ۵ مگابایت شوند را از این طریق فشرده کنید.
اگر از وردپرس استفاده می‌کنید، می‌توانید از پلاگین رسمی آن، Compress JPEG & PNG images، استفاده کنید. این پلاگین نیز به سایت TinyPG متصل می‌شود که به شما این امکان را می‌دهد تصاویر با فرمت PNG را نیز بهینه‌سازی کنید.
IrfanView
Irfanview رایگان تحت ویندوز به شما این امکان را می‌دهد هر تصویری که سایز بزرگی دارد را مشاهده کرده و بهینه‌سازی کنید. این نرم‌افزار بسیار پرطرفدار است چرا که امکان تبدیل گروهی نیز در آن وجود دارد. می‌توانید یک عملکرد و تنظیمات را به طور اتوماتیک به روی صدها تصویر JPEG اعمال کنید.
چیزی که این نرم‌افزار را محبوب‌تر می‌کند پلاگین آن برای دولوپرهای سوم شخص است. می‌توان به پلاگین RIOT (Radical Image Optimization Tool) اشاره کرد. این پلاگین برای سایر ویرایشگرهای عکس اوپن سورس نظیر GIMP کار می‌کند.
این نرم‌افزار به شما دو حالت نمایش نشان می‌دهد که می‌توانید به‌صورت دستی پارامترهای هر یک از تصاویر را تغییر داده و عمل بهینه‌سازی را روی فایل انجام دهید.
پشتیبانی نرم‌افزار بسیار خارق‌العاده است و استفاده از ویژگی‌های RIOT نیز بسیار ساده است. در کنار فشرده‌سازی تصویر شما همچنین دسترسی به حذف متا دیتاهای اضافی نظیر EXIF و Adobe XMP دارید. این بایت‌های اضافه اطلاعات می‌تواند به روی سایز نهایی فایل شما تأثیرگذار باشند و عموماً غیرضروری هستند.
ImageOptim for Mac
اگر از سیستم‌عامل OS X استفاده می‌کنید و به یک اپلیکیشن قدرتمند برای فشرده‌سازی تصاویر نیاز دارید این برنامه مناسب شماست. ImageOptim یک ابزار قدرتمند برای فشرده‌سازی تصاویر برای وب است که حتی بهتر از فتوشاپ نیز عمل می‌کند.
این اپلیکیشن به‌سادگی با کشیدن و انداختن تصاویر می‌تواند مجموعه‌ای از تصاویر را فشرده‌سازی کند.
نتیجه‌گیری
اگرچه امروزه سرعت اتصال به اینترنت نسبت به قبل افزایش یافته و حتی تا ۴G و ۵G نیز می‌رسد، با این حال ما نیاز داریم تا سایز صفحات وب را کاهش دهیم. هر بیت به روی وب‌سایت ما اهمیت دارد و می‌تواند کاربران بیشتری را به روی وب سایتمان نگه دارد. در این مقاله، ما به چگونگی فشرده‌سازی و کاهش سایز تصاویر برای وب اشاره کردیم. فشرده‌سازی تصاویر ممکن است کمی گیج کننده به نظر برسد چرا که باید تعادل مناسب بین کیفیت و سایز تصویر را حفظ کنیم. این کار حتی در گذشته، که ابزار بسیاری برای این کار وجود نداشت، سخت‌تر هم می‌شد. اما امروزه گزینه‌های بیشتر و پیشرفته‌تری برای این کار وجود دارد که می‌توانیم از آن‌ها استفاده کنیم.
اگر شما نیز روش‌ها و ترفندهایی برای فشرده‌سازی فایل‌های JPEG دارید حتماً با ما در میان بگذارید.
