بهترین سطح فشرده سازی تصاویر برای سایت

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

تصاویر اغلب بیشترین حجم دانلود شده در یک صفحه وب و مقدار قابل‌توجهی از فضای بصری را اشغال می‌کنند. در نتیجه، بهینه‌سازی و فشرده سازی تصاویر می‌تواند بیشترین صرفه‌جویی در حجم و بهبود سرعت را برای وب‌سایت شما به ارمغان بیاورد، هر چه مرورگر بایت‌های کمتری برای دانلود داشته باشد، رقابت کمتری برای پهنای باند مشتری وجود دارد و مرورگر سریع‌تر می‌تواند دانلود کند و محتوای مفید را رندر کند.

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

بهینه سازی تصاویر برداری (Vector)

همه مرورگرهای مدرن از SVG (Scalable Vector Graphics) که یک فرمت تصویر مبتنی بر XML برای گرافیک‌های دوبعدی وکتور است، پشتیبانی می‌کنند. شما می‌توانید کدهای XML یک تصویر SVG را مستقیماً در صفحه وب خود وارد کرده و یا به‌عنوان یک منبع خارجی به صفحه الحاق کنید. اکثر نرم‌افزارهای طراحی مبتنی بر وکتور می‌توانند فایل‌های SVG را ایجاد کنند. البته شما می‌توانید آنها را مستقیماً در ویرایشگر متن موردعلاقه خود بنویسید.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
  <g>
    <circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/>
  </g>
</g>
</svg>

مثال بالا شکل دایره‌ای ساده زیر را با حاشیه سیاه و رنگ داخلی قرمز ارائه می‌دهد برای تولید این فایل یا به عبارتی این کد xml از Adobe Illustrator استفاده شده است.

بهینه سازی svg با حذف متاداده‌های اضافی

همان‌طور که می‌دانید، این کد حاوی متادیتاهای (metadata) زیادی است، مانند اطلاعات لایه، comment  ها، و فضاهای نام XML که اغلب برای نمایش تصویر در مرورگر غیرضروری هستند. برای فشرده سازی تصاویر svg می توانید از ابزار SVGO استفاده کنید. این ابزار با حذف داده‌های غیر ضروری کدهای xml در فایل‌های svg به کوچک شدن حجم آنها کمک می‌کند.

به‌عنوان‌مثال، اندازه فایل SVG بالا را می‌توان با استفاده از ابزار SVGO تا ۵۸ درصد کاهش داد، و حجم آن را از ۴۷۰ به ۱۹۹ بایت رساند. کد xml زیر تصویر خروجی فشرده شده توسط این ابزار است.

<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 792"><circle fill="red" stroke="#000" stroke-width="2" stroke-miterlimit="10" cx="50" cy="50" r="40"/></svg>

کاهش حجم svg با فعال سازی GZIP

ازآنجایی‌که SVG یک فرمت مبتنی بر XML است، می‌توانید فشرده‌سازی GZIP را نیز برای کاهش اندازه انتقال آن اعمال کنید – مطمئن شوید که سرور شما برای فشرده سازی تصاویر SVG پیکربندی شده است!

فشرده سازی تصاویر پیکسلی (Raster)

یک تصویر پیکسلی (raster) یک شبکه دوبعدی از «پیکسل‌های» منفرد است – برای مثال، یک تصویر ۱۰۰*۱۰۰ پیکسلی دنباله‌ای از ۱۰۰۰۰ پیکسل است که هر پیکسل مقادیر “RGBA” را ذخیره می‌کند: (R) کانال قرمز، (G) کانال سبز، (B) کانال آبی، و (A) کانال آلفا (شفافیت).

مرورگر ۲۵۶ مقدار مجزا را برای هر کانال اختصاص می‌دهد (۸ بیت در هر کانال (۲ ^ ۸ = ۲۵۶)) که یعنی ۴ بایت برای هر پیکسل در تصاویر پیکسلی فضا نیاز داریم. برای مثال:

• تصویر ۱۰۰*۱۰۰ پیکسل از ۱۰۰۰۰ پیکسل تشکیل شده است
• ۱۰۰۰۰ پیکسل در ۴ بایت = ۴۰۰۰۰ بایت
• ۴۰۰۰۰ بایت / ۱۰۲۴ = ۳۹ کیلوبایت

صرف‌نظر از فرمت تصویر مورداستفاده برای انتقال داده‌ها از سرور به سیستم کاربر، زمانی که تصویر توسط مرورگر رمزگشایی می‌شود، هر پیکسل همیشه ۴ بایت حافظه را اشغال می‌کند. این مساله می‌تواند یک محدودیت مهم برای تصاویر بزرگ و دستگاه‌هایی باشد که حافظه زیادی در دسترس ندارند – به‌عنوان‌مثال، دستگاه‌های تلفن همراه ارزان‌قیمت.

۳۹ کیلوبایت برای یک تصویر ۱۰۰ در ۱۰۰ پیکسل ممکن است زیاد به نظر نرسد، اما اندازه فایل برای تصاویر بزرگ‌تر به‌سرعت بحرانی می‌شود و دانلود دارایی‌های تصویر را هم کند و پرهزینه می‌کند.

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

کاهش عمق بیت برای بهینه سازی تصاویر پیکسلی

یک استراتژی ساده این است که “عمق بیت” تصویر را از ۸ بیت در هر کانال به یک پالت رنگ کوچک‌تر کاهش دهید: ۸ بیت در هر کانال، ۲۵۶ مقدار در هر کانال و ۱۶۷۷۷۲۱۶ (۲۵۶ ^ ۳) رنگ را در کل به ما می‌دهد. اگر پالت را به ۲۵۶ رنگ کاهش دهید چه؟ سپس در مجموع تنها به ۸ بیت برای کانال‌های RGB نیاز خواهید داشت و دو بایت در هر پیکسل ذخیره می‌کنید – این ۵۰ درصد صرفه‌جویی در فشرده سازی تصویر نسبت به فرمت اصلی ۴ بایت در هر پیکسل است!

تصاویر پیچیده با تغییر رنگ تدریجی (مانند گرادیانت یا رنگ آبی آسمان) به پالت‌های رنگی بزرگ‌تری نیاز دارند تا کیفیت آنها از دست نرود از طرف دیگر، اگر تصویر فقط از چند رنگ استفاده می‌کند انتخاب یک پالت بزرگ به‌سادگی بیت‌های ارزشمند را هدر می‌دهد!

انتخاب فرمت مناسب برای تصاویر یکی از مهمترین نکات برای بهبود سرعت سایت و همچنین حفظ ظاهر بصری و تجربه کاربری است.

رمزگذاری دلتا

در مرحله بعد، هنگامی که داده‌های ذخیره شده در پیکسل‌ها جداگانه را بهینه‌سازی کردید، می‌توانید به پیکسل‌های مجاور نیز توجه کنید، به نظر می‌رسد، بسیاری از تصاویر، و به‌ویژه عکس‌ها، پیکسل‌های نزدیکی زیادی با رنگ‌های مشابه دارند – به‌عنوان‌مثال، آسمان، تکرار بافت‌ها و غیره. با استفاده از این اطلاعات می‌تواند رمزگذاری دلتا (delta encoding) را اعمال کرد که در آن به‌جای ذخیره مقادیر جداگانه برای هر پیکسل، تفاوت بین پیکسل‌های مجاور را ذخیره کرد به این صورت که: اگر پیکسل‌های مجاور یکسان هستند، دلتا “صفر” است و فقط شما نیاز به ذخیره یک بیت واحد دارید.

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

همان‌طور که تا الان حدس زدید، بهینه‌سازی تصاویر به‌سرعت پیچیده‌تر می‌شود (یا بسته به دیدگاه شما سرگرم‌کننده‌تر)، بهینه‌سازی تصاویر یک حوزه فعال تحقیقات دانشگاهی و تجاری است. تصاویر بایت‌های زیادی را اشغال می‌کنند و توسعه تکنیک‌های فشرده سازی بهتر تصویر ارزش زیادی دارد! اگر کنجکاو هستید که در این باره بیشتر بدانید، صفحه مقاله ویکی‌پدیا یا وایت پیپر تکنیک‌های فشرده‌سازی WebP را بررسی کنید.

فشرده سازی تصاویر بدون اتلاف در مقابل با اتلاف

برای انواع خاصی از داده‌ها، مانند کدهای یک صفحه یا یک فایل اجرایی، بسیار مهم است که در فرایند فشرده سازی هیچ یک از اطلاعات اصلی تغییر نکند و یا از دست نرود: یک بیت داده ازدست‌رفته یا اشتباه می‌تواند کد را دچار خطا و یا فایل اجرایی را خراب کند. اما برای برخی دیگر از انواع داده‌ها، مانند تصاویر، صدا و ویدئو، ارائه یک نمایش «تقریبی» از داده‌های اصلی (ازدست‌رفتن و یا تغییر قسمتی از داده) ممکن است کاملاً قابل‌قبول باشد.

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

• تصویر با یک فیلتر با اتلاف پردازش می‌شود که برخی از داده‌های پیکسل را حذف می‌کند.
• تصویر با یک فیلتر بدون تلفات پردازش می‌شود که داده‌های پیکسل را فشرده می‌کند.

مرحله اول اختیاری است و دقت الگوریتم به فرمت تصویر بستگی دارد، اما درک این نکته مهم است که هر تصویری باید تحت یک مرحله فشرده‌سازی با اتلاف قرار گیرد تا اندازه آن کاهش یابد. در واقع، تفاوت بین فرمت‌های مختلف تصویر مانند WEBP، PNG، JPEG و غیره در ترکیب الگوریتم‌های خاصی است که هنگام اعمال مراحل با اتلاف و بدون تلفات استفاده می‌کنند.

تا چه حدی از اتلاف در فشرده سازی تصاویر قابل قبول است؟

جواب این سؤال بستگی به محتویات تصویر و معیارهای خود شما مانند تعادل بین اندازه فایل و کیفیت خروجی فشرده سازی با اتلاف بستگی دارد: در برخی موارد، ممکن است بخواهید از بهینه سازی با تلفات صرف‌نظر کنید تا جزئیات بیشتری را به اشتراک بگذارید. در موارد دیگر، ممکن است بتوانید از بهینه سازی با اتلاف زیاد برای کاهش اندازه فایل استفاده کنید. اینجاست که باید نیاز خود و مخاطبانتان را در نظر بگیرید.

به‌عنوان یک مثال عملی، هنگام استفاده از یک فرمت با اتلاف مانند JPEG، الگوریتم فشرده سازی معمولاً یک «کیفیت» قابل تنظیم (مانند نوار لغزنده کیفیت ارائه شده در «ذخیره برای وب» در Adobe Photoshop) را ارائه می‌دهد. معمولاً عددی بین ۱ تا ۱۰۰ است که عملکرد الگوریتم‌های با اتلاف و بدون اتلاف را کنترل می‌کند. برای نتیجه بهتر، تنظیمات مختلف را برای تصاویر خودآزمایش کنید، و از کاهش کیفیت نترسید – نتایج بصری اغلب بسیار خوب هستند و صرفه‌جویی در اندازه فایل می‌تواند بسیار زیاد باشد.

توجه داشته باشید که سطوح کیفیت برای فرمت‌های مختلف تصویر به دلیل تفاوت در الگوریتم‌های مورداستفاده برای رمزگذاری تصویر مستقیماً قابل‌مقایسه نیستند: کیفیت ۹۰ JPEG نتایج بسیار متفاوتی نسبت به WebP باکیفیت ۹۰ ایجاد می‌کند. در واقع، حتی سطوح کیفیت برای فرمت تصویر یکسان ممکن است خروجی کاملاً متفاوتی تولید کند!

چک لیست بهینه سازی تصویر

برخی از نکات و تکنیک‌هایی که باید هنگام کار بر روی بهینه سازی تصاویر خود در نظر داشته باشید:

• فرمت برداری (vector) را ترجیح دهید: تصاویر برداری دارای وضوح و مقیاس مستقل هستند که آنها را برای دنیای تصاویر واکنش‌گرا و با وضوح بالا مناسب می‌کند.
• کوچک کردن و فشرده سازی تصاویر SVG: نشانه‌گذاری XML تولید شده توسط اکثر برنامه‌های طراحی اغلب حاوی ابرداده‌های غیرضروری است که می‌توان آنها را حذف کرد. اطمینان حاصل کنید که سرورهای شما برای اعمال فشرده سازی GZIP برای فایل‌های SVG پیکربندی شده‌اند.
• WebP را به فرمت‌های پیکسلی یا raster قدیمی ترجیح دهید: تصاویر WebP معمولاً بسیار کوچک‌تر از تصاویر قدیمی هستند.
• بهترین قالب تصویر پیکسلی را انتخاب کنید: الزامات عملکردی خود را تعیین کنید و قالبی را انتخاب کنید که مناسب است.
• تنظیمات کیفیت بهینه را برای فرمت‌های پیکسلی آزمایش کنید: از تغییر تنظیمات “کیفیت” نترسید، نتایج اغلب بسیار خوب هستند و صرفه‌جویی در حجم فایل قابل‌توجه است.
• حذف فراداده‌های غیرضروری تصویر: بسیاری از تصاویر Raster حاوی ابرداده‌های غیر‌ضروری هستند: اطلاعات جغرافیایی، اطلاعات دوربین، کپی‌رایت و غیره. از ابزارهای مناسب برای حذف این داده‌ها استفاده کنید.
• نمایش تصاویر مقیاس‌بندی شده: اندازه تصاویر را تغییر دهید و اطمینان حاصل کنید که اندازه «نمایش» تاحدامکان به اندازه «طبیعی» تصویر نزدیک است. به طور خاص به تصاویر بزرگ توجه کنید، زیرا آنها در هنگام تغییر اندازه بیشترین هزینه را به خود اختصاص می‌دهند!
• خودکارسازی، خودکارسازی، خودکارسازی: روی ابزارها و زیرساخت‌های خودکار سرمایه‌گذاری کنید تا اطمینان حاصل شود که تمام دارایی‌های تصویر شما همیشه بهینه می‌شوند.

سوالات متداول