این قانون زمانی فعال می‌شود که PageSpeed Insights تشخیص دهد که تصاویر موجود در صفحه را می‌توان برای کاهش حجم فایل‌ها بدون تأثیر قابل‌توجهی بر کیفیت بصری آنها، بهینه کرد.
بررسی اجمالی
تصاویر اغلب بیشترین بایت های دانلود شده در یک صفحه را تشکیل می دهند. در نتیجه، بهینه سازی تصاویر اغلب می تواند برخی از بزرگترین صرفه جویی در بایت و بهبود عملکرد را به همراه داشته باشد: هر چه مرورگر بایت های کمتری برای دانلود داشته باشد، رقابت کمتری برای پهنای باند مشتری وجود دارد و مرورگر سریعتر می تواند محتوا را روی صفحه بارگیری و ارائه کند. .
توصیه ها
یافتن فرمت بهینه و استراتژی بهینه‌سازی برای دارایی‌های تصویر شما نیازمند تجزیه و تحلیل دقیق در ابعاد مختلف است: نوع داده‌های در حال کدگذاری، قابلیت‌های قالب تصویر، تنظیمات کیفیت، وضوح و موارد دیگر. علاوه بر این، باید در نظر داشته باشید که آیا برخی از تصاویر به بهترین وجه در فرمت برداری ارائه می شوند، آیا می توان جلوه های مورد نظر را از طریق CSS به دست آورد یا خیر، و چگونه می توان دارایی های مقیاس بندی شده مناسب را برای هر نوع دستگاه ارائه کرد.
بهینه سازی برای انواع تصاویر
- بهترین روش‌ها را برای ارائه تصاویر واکنش‌گرا دنبال کنید
- چک لیست بهینه سازی تصویر را برای تصاویر جداگانه دنبال کنید
بهینه سازی برای تصاویر GIF، PNG و JPEG
فرمت‌های GIF ، PNG و JPEG 96 درصد از کل ترافیک تصویر اینترنت را تشکیل می‌دهند. به دلیل محبوبیت آنها، PageSpeed Insights توصیه های بهینه سازی خاصی را ارائه می دهد. برای راحتی شما، می توانید تصاویر بهینه شده را مستقیماً از PageSpeed Insights (که از کتابخانه بهینه سازی تصویر از modpagespeed.com استفاده می کند) دانلود کنید.
شما همچنین می توانید از ابزارهایی مانند تبدیل باینری ساخته شده توسط ImageMagick استفاده کنید که می تواند بهینه سازی های مشابه را اعمال کند - دستورالعمل های مثال زیر را ببینید.
اگر از ابزارهای شخص ثالث استفاده می کنید، لطفاً توجه داشته باشید که این تغییر شکل ممکن است تصاویر شما را بزرگتر کند، اگر تصاویر شما قبلاً به خوبی بهینه شده بودند. اگر این اتفاق افتاد، لطفا از نسخه اصلی خود استفاده کنید.
GIF و PNG فرمت های بدون اتلاف هستند، زیرا فرآیند فشرده سازی هیچ تغییر بصری در تصاویر ایجاد نمی کند. برای تصاویر ثابت، PNG به نسبت فشرده سازی بهتر با کیفیت بصری بهتر دست می یابد. برای تصاویر متحرک، برای دستیابی به فشرده سازی بهتر، به جای GIF از عنصر video استفاده کنید.
- همیشه GIF را به PNG تبدیل کنید مگر اینکه نسخه اصلی متحرک یا کوچک باشد (کمتر از چند صد بایت).
- برای هر دو GIF و PNG، اگر همه پیکسل ها مات هستند، کانال آلفا را حذف کنید.
به عنوان مثال، می توانید از تبدیل باینری برای بهینه سازی تصاویر GIF و PNG خود با دستور زیر استفاده کنید (پارامترهای داخل براکت ها اختیاری هستند):
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG یک فرمت با اتلاف است. فرآیند فشرده سازی جزئیات بصری تصویر را حذف می کند، اما نسبت فشرده سازی می تواند 10 برابر بزرگتر از GIF یا PNG باشد.
- اگر بالاتر بود کیفیت را به 85 کاهش دهید. با کیفیت بزرگتر از 85، تصویر به سرعت بزرگتر می شود، در حالی که بهبود بصری اندک است.
- نمونه برداری Chroma را به 4:2:0 کاهش دهید، زیرا سیستم بینایی انسان نسبت به درخشندگی حساسیت کمتری به رنگ ها دارد.
- از فرمت پیشرونده برای تصاویر بیش از 10 هزار بایت استفاده کنید. JPEG پیشرو معمولاً نسبت فشرده سازی بالاتری نسبت به JPEG پایه برای تصاویر بزرگ دارد و مزایای رندر تدریجی را دارد.
- اگر تصویر سیاه و سفید است از فضای رنگی خاکستری استفاده کنید.
به عنوان مثال، می توانید از تبدیل باینری برای بهینه سازی تصاویر JPEG خود با دستور زیر استفاده کنید (پارامترهای داخل براکت ها اختیاری هستند):
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
بازخورد
این صفحه به شما کمک کرد؟