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

Ilya Grigorik

Jeremy Wagner

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

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

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

همه مرورگرهای مدرن از Scalable Vector Graphics (SVG) پشتیبانی می کنند که یک فرمت تصویر مبتنی بر 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>

مثال بالا شکل دایره ای ساده زیر را با طرح کلی سیاه و پس زمینه قرمز ارائه می کند و از Adobe Illustrator صادر شده است.

<?xml version="1.0" encoding="utf-8"?>

همانطور که می توانید بگویید، حاوی متادیتاهای زیادی است، مانند اطلاعات لایه، نظرات و فضاهای نام XML که اغلب برای ارائه دارایی در مرورگر غیر ضروری هستند. در نتیجه، همیشه ایده خوبی است که فایل های SVG خود را با اجرای ابزاری مانند SVGO کوچک کنید.

به عنوان مثال، SVGO اندازه فایل SVG بالا تولید شده توسط Illustrator را تا 58 درصد کاهش می دهد، آن را از 470 به 199 بایت می رساند.

<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 یک فرمت مبتنی بر XML است، می‌توانید فشرده‌سازی GZIP را برای کاهش اندازه انتقال آن اعمال کنید—مطمئن شوید که سرور شما برای فشرده‌سازی دارایی‌های SVG پیکربندی شده است!

یک تصویر شطرنجی به سادگی یک شبکه دوبعدی از "پیکسل"های منفرد است - برای مثال، یک تصویر 100x100 پیکسلی دنباله ای از 10000 پیکسل است. به نوبه خود، هر پیکسل مقادیر " RGBA " را ذخیره می کند: (R) کانال قرمز، (G) کانال سبز، (B) کانال آبی، و (A) کانال آلفا (شفافیت).

در داخل، مرورگر 256 مقدار (شاید) را برای هر کانال اختصاص می دهد که به 8 بیت در هر کانال (2 ^ 8 = 256) و 4 بایت در هر پیکسل (4 کانال x 8 بیت = 32 بیت = 4 بایت) ترجمه می شود. در نتیجه، اگر ابعاد شبکه را بدانیم، به راحتی می‌توانیم اندازه فایل را محاسبه کنیم:

• تصویر 100x100 پیکسل از 10000 پیکسل تشکیل شده است
• 10000 پیکسل در 4 بایت = 40000 بایت
• 40000 بایت / 1024 = 39 کیلوبایت

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

یک استراتژی ساده این است که "عمق بیت" تصویر را از 8 بیت در هر کانال به یک پالت رنگ کوچکتر کاهش دهید: 8 بیت در هر کانال، 256 مقدار در هر کانال و 16777216 (256 ^ 3) رنگ را در کل به ما می دهد. اگر پالت را به 256 رنگ کاهش دهید چه؟ سپس در مجموع تنها به 8 بیت برای کانال‌های RGB نیاز دارید و بلافاصله دو بایت در هر پیکسل ذخیره می‌کنید - این 50 درصد صرفه‌جویی در فشرده‌سازی نسبت به فرمت اصلی 4 بایت در هر پیکسل است!

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

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

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

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

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

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

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

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

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

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

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

به عنوان یک مثال عملی، هنگام استفاده از یک فرمت با اتلاف مانند JPEG، کمپرسور معمولاً یک تنظیم "کیفیت" قابل تنظیم را نشان می دهد (به عنوان مثال، نوار لغزنده کیفیت ارائه شده توسط عملکرد "Save for Web" در Adobe Photoshop) که معمولاً عددی بین 1 تا 100 است که عملکرد درونی مجموعه خاصی از الگوریتم‌های با اتلاف و بدون تلفات را کنترل می‌کند. برای بهترین نتایج، تنظیمات کیفیت مختلف را برای تصاویر خود آزمایش کنید و از کاهش کیفیت نترسید - نتایج بصری اغلب بسیار خوب هستند و صرفه جویی در اندازه فایل می تواند بسیار زیاد باشد.

اثرات فشرده سازی تصویر بر Core Web Vitals

از آنجایی که تصاویر اغلب کاندیدای بزرگترین رنگ محتوایی هستند، کاهش مدت زمان بارگذاری منبع یک تصویر می تواند به LCP بهتری هم در آزمایشگاه و هم در میدان تبدیل شود.

هنگام بازی با تنظیمات فشرده‌سازی در قالب‌های تصویر شطرنجی، مطمئن شوید که فرمت‌های WebP و AVIF را آزمایش کنید تا ببینید آیا می‌توانید همان تصویر را در مقایسه با فرمت‌های قدیمی‌تر با حجم کمی ارائه دهید.

با این حال، باید مراقب باشید که تصاویر شطرنجی را بیش از حد فشرده نکنید. یک راه حل خوب این است که از CDN بهینه سازی تصویر برای یافتن بهترین تنظیمات فشرده سازی برای خود استفاده کنید، اما یک گزینه جایگزین ممکن است استفاده از ابزارهایی مانند Butteraugli برای تخمین تفاوت های بصری باشد تا تصاویر را به شدت کدگذاری نکنید و کیفیت زیادی را از دست ندهید.

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

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

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