از سیاست های تصویر بهینه سازی شده برای اطمینان از اینکه سایت شما از بهترین تصاویر استفاده می کند استفاده کنید.
تصاویر اغلب مقدار قابل توجهی از فضای بصری را اشغال می کنند و اکثر بایت های دانلود شده در یک وب سایت را تشکیل می دهند. بهینه سازی تصاویر می تواند عملکرد بارگذاری را بهبود بخشد و ترافیک شبکه را کاهش دهد.
با کمال تعجب، بیش از نیمی از سایت های موجود در وب، تصاویری با فشرده سازی ضعیف یا بزرگ غیر ضروری ارائه می دهند. این تنها با بهینه سازی تصاویر، فضای زیادی را برای بهبود عملکرد باقی می گذارد.
ممکن است بپرسید چگونه می توانم بفهمم که تصاویرم بهینه شده اند و چگونه باید آنها را بهینه کنم؟ ما در حال آزمایش مجموعه‌ای از سیاست‌های ویژگی جدید برای بهینه‌سازی تصویر هستیم: oversized-images ، unoptimized-lossy-images ، unoptimized-lossless-images ، و unoptimized-lossless-images-strict . همه اکنون برای آزمایش های مبدا در دسترس هستند.
سیاست های تصویر بهینه شده
خط‌مشی مجوزها مجموعه جدیدی از محدودیت‌ها را برای تصاویر معرفی می‌کند که می‌تواند با اجرای زمان توسعه اعمال شود. تصاویری که هر یک از محدودیت‌ها را نقض می‌کنند، به‌عنوان تصاویر نگهدارنده نمایش داده می‌شوند که شناسایی و رفع آنها آسان است. این خط‌مشی‌ها را می‌توان در حالت فقط گزارش مشخص کرد که در آن تصاویر به‌طور عادی بدون اعمال اجرا می‌شوند، در حالی که تخلفات از طریق گزارش‌ها مشاهده می‌شوند. (برای جزئیات به حالت فقط گزارش در طبیعت ، در زیر مراجعه کنید.)
تصاویر بزرگ
خط مشی مجوزهای oversized-images ابعاد ذاتی یک تصویر را در رابطه با اندازه ظرف آن محدود می کند.
وقتی سندی از خط‌مشی oversized-images استفاده می‌کند، هر عنصر <img> که وضوح ذاتی آن بیش از X برابر بزرگتر از اندازه ظرف در هر بعد باشد، با یک تصویر نگهدارنده جایگزین می‌شود.
چرا؟
ارائه تصاویر بزرگتر از آنچه که دستگاه مشاهده می تواند ارائه دهد - به عنوان مثال، ارائه تصاویر دسکتاپ به زمینه های تلفن همراه، یا ارائه تصاویر با تراکم پیکسلی بالا به دستگاهی با تراکم پیکسل پایین - باعث هدر رفتن ترافیک شبکه و حافظه دستگاه می شود. برای اطلاعات در مورد بهینه سازی تصاویر خود ، تصاویر سرویس با ابعاد صحیح را بخوانید و تصاویر پاسخگو را ارائه دهید .
مثال ها
چند مثال گویای این موضوع است. در زیر رفتار پیش فرض هنگام برش اندازه نمایش تصویر به نصف نشان داده می شود.
اگر خط‌مشی مجوزهای زیر را اعمال کنم، به جای آن یک تصویر مکان‌نما دریافت می‌کنم.
Permissions-Policy: oversized-images *(2);
اگر فقط عرض یا ارتفاع را پایین بیاورم، نتایج مشابهی دریافت می کنم.
نحوه استفاده
به طور خلاصه، خط مشی oversized-images را می توان از طریق یکی از موارد زیر مشخص کرد:
-
Permissions-PolicyHTTP -
<iframe>ویژگیallow
برای اعلام سیاست oversized-images ، باید موارد زیر را ارائه دهید:
- نام ویژگی،
oversized-images(الزامی) - فهرستی از مبدا (اختیاری)
- مقادیر آستانه (یعنی نسبت کاهش مقیاس X) برای مبداها، مشخص شده در پرانتز (اختیاری)
ما یک نسبت کاهش مقیاس 2.0 یا کمتر را توصیه می کنیم. استفاده از تصاویر واکنش‌گرا با رزولوشن‌های مختلف را در نظر بگیرید تا تصاویر را در اندازه‌ها، رزولوشن‌های مختلف و غیره به بهترین شکل نمایش دهید.
نمونه های بیشتر
Permissions-Policy: oversized-images *(2.0)
این خط مشی در همه مبداها با مقدار آستانه 2.0 اجرا می شود. هر عنصر <img> با تصویری که نسبت کاهش مقیاس آن بیشتر از 2.0 باشد غیرمجاز است و با یک تصویر نگهدارنده جایگزین می شود.
Permissions-Policy: oversized-images *(inf) 'self'(1.5)
این خط مشی در مبدا سایت با مقدار آستانه 1.5 اجرا می شود. عناصر <img> در زمینه‌های مرور سطح بالا و زمینه‌های مرور تودرتوی منشأ مشابه، تنها در صورتی به‌طور معمول ارائه می‌شوند که نسبت کاهش مقیاس کمتر یا مساوی 1.5 باشد. عناصر <img> در هر جای دیگری به طور عادی ارائه می شوند.
تصاویر بهینه-{ضایع، بدون ضرر}-
سیاست‌های ویژگی‌های سخت‌گیرانه unoptimized-lossy-images ، unoptimized-lossless-images ، unoptimized-lossless-images-strict اندازه فایل یک تصویر را در رابطه با وضوح ذاتی آن محدود می‌کند:
-
unoptimized-lossy-images - فرمت‌های با اتلاف نباید از نسبت بایت در پیکسل X تجاوز کنند، با اضافه هزینه ثابت 1 کیلوبایت . برای یک تصویر W x H، آستانه اندازه فایل به صورت W x H x X + 1024 محاسبه می شود.
-
unoptimized-lossless-images - فرمت‌های بدون اتلاف نباید از نسبت بایت بر پیکسل X تجاوز کنند، با مقدار اضافی 10 کیلوبایت . برای یک تصویر W x H، آستانه اندازه فایل به صورت W x H x X + 10240 محاسبه می شود.
-
unoptimized-lossless-images-strict - فرمت‌های بدون اتلاف نباید از نسبت بایت بر پیکسل X تجاوز کنند، با اضافه هزینه ثابت 1 کیلوبایت . برای یک تصویر W x H، آستانه اندازه فایل به صورت W x H x X + 1024 محاسبه می شود.
وقتی سندی از هر یک از این خط‌مشی‌ها استفاده می‌کند، هر عنصر <img> که محدودیت را نقض می‌کند با یک تصویر نگهدارنده جایگزین می‌شود.
چرا؟
هرچه اندازه دانلود بزرگتر باشد، بارگذاری یک تصویر بیشتر طول می کشد. هنگام بهینه سازی یک تصویر، اندازه فایل باید تا حد امکان کوچک باشد: حذف ابرداده، انتخاب فرمت تصویر خوب، استفاده از فشرده سازی تصویر و غیره. برای فشرده‌سازی تصاویر، Use Imagemin را بخوانید و برای اطلاعات در مورد بهینه‌سازی تصاویر، از تصاویر WebP استفاده کنید .
مثال
موارد زیر رفتار پیش فرض مرورگر را نشان می دهد. بدون خط مشی مجوزها، یک تصویر با اتلاف بهینه نشده می تواند دقیقاً مانند یک تصویر بهینه شده نمایش داده شود.
اگر خط‌مشی مجوزهای زیر را اعمال کنم، به جای آن یک تصویر مکان‌نما دریافت می‌کنم.
Permissions-Policy: unoptimized-lossy-images *(0.5);
نحوه استفاده
اگر با خط مشی مجوزها تازه کار هستید، لطفاً برای جزئیات بیشتر ، مقدمه خط مشی مجوزها را بررسی کنید.
به‌طور خلاصه، سیاست‌های unoptimized-{lossy,lossless}-images می‌توان از طریق زیر مشخص کرد:
-
Permissions-PolicyHTTP -
<iframe>ویژگیallow
برای اعلام یک خط‌مشی unoptimized-{lossy,lossless}-images ، باید موارد زیر را ارائه دهید:
- نام ویژگی، برای مثال،
unoptimized-lossy-images(الزامی) - فهرستی از مبدا (اختیاری)
- مقادیر آستانه (یعنی نسبت بایت به پیکسل X) برای مبدا، مشخص شده در پرانتز (اختیاری)
ما نسبت بایت بر پیکسل 0.5 یا کمتر را برای unoptimized-lossy-images و نسبت بایت به پیکسل 1 یا کمتر را برای unoptimized-lossless-images و unoptimized-lossless-images-strict توصیه می‌کنیم.
فرمت های WebP نسبت فشرده سازی بهتری نسبت به فرمت های دیگر دارند. اگر می توانید تمام تصاویر خود را در قالب WebP با اتلاف ارائه دهید. اگر این کافی نیست، فرمت WebP بدون ضرر را امتحان کنید. از JPEG در مرورگرهایی که از فرمت های WebP پشتیبانی نمی کنند استفاده کنید. اگر هیچ یک از این فرمت ها کار نمی کند از PNG استفاده کنید.
اگر از قالب‌های WebP استفاده می‌کنید، آستانه‌های سخت‌تر را امتحان کنید:
- 0.2 برای WEBPV8
- 0.5 برای WEBPL
نمونه های بیشتر
Feature-Policy: unoptimized-lossy-images *(0.5);
unoptimized-lossless-images *(1.0);
unoptimized-lossless-images-strict *(1.0);
این خط‌مشی در همه مبداها با مقدار آستانه 0.5 (برای قالب‌های با اتلاف) و 1 (برای قالب‌های بدون ضرر) اجرا می‌شود. هر عنصر <img> که تصویر آن دارای نسبت بایت به پیکسل بیشتر از محدودیت باشد، مجاز نیست و با یک تصویر نگهدارنده جایگزین می شود.
Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
unoptimized-lossless-images *(inf) 'self'(0.8);
unoptimized-lossless-images-strict *(inf) 'self'(0.8);
این خط‌مشی در مبدا سایت با مقدار آستانه 0.3 (برای قالب‌های با اتلاف) و 0.8 (برای قالب‌های بدون ضرر) اعمال می‌شود. عناصر <img> در زمینه‌های مرور سطح بالا و زمینه‌های مرور تودرتوی همان مبدا، تنها در صورتی که نسبت بایت به پیکسل این محدودیت‌ها را برآورده کند، به‌طور معمول ارائه می‌شوند. عناصر <img> در هر جای دیگری به طور عادی ارائه می شوند.
حالت فقط گزارش در طبیعت
انتشار یک سایت با تصاویر مکان‌نما ممکن است آن چیزی نباشد که می‌خواهید. می‌توانید در حین توسعه و مرحله‌بندی از خط‌مشی‌ها در حالت اجرا (با تصاویر بهینه‌نشده ارائه‌شده به‌عنوان تصاویر مکان‌نما) استفاده کنید و از حالت فقط گزارش در تولید استفاده کنید. (برای جزئیات بیشتر ، گزارش‌دهی خط‌مشی مجوزها را بررسی کنید.) مانند سرصفحه Permissions-Policy HTTP، هدر Permissions-Policy-Report-Only به شما امکان می‌دهد گزارش‌های نقض را در طبیعت و بدون هیچ گونه اعمالی مشاهده کنید.
محدودیت ها
خط‌مشی‌های تصویر فقط بر روی عناصر تصویر HTML ( <img> ، <source> ، و غیره) کار می‌کنند و هنوز روی تصاویر پس‌زمینه یا محتوای تولید شده پشتیبانی نمی‌شوند. اگر می‌خواهید از سیاست‌ها در مورد محتوای گسترده‌تر پشتیبانی شود، لطفاً به ما اطلاع دهید.
بهینه سازی تصاویر شما
من کمی در مورد بهینه سازی تصاویر شما صحبت کرده ام، اما نگفتم چگونه این کار را انجام دهم. این موضوع خارج از محدوده این مقاله است، اما می توانید از پیوندهای زیر و از کدهای فهرست شده در انتهای مقاله اطلاعات بیشتری کسب کنید.
لطفا به ما بازخورد بدهید
امیدواریم این مقاله درک خوبی از سیاست های تصویر به شما داده باشد و شما را هیجان زده کرده باشد. ما واقعاً دوست داریم که سیاست ها را امتحان کنید و به ما بازخورد بدهید.
می‌توانید برای هر یک از ویژگی‌های ذکر شده در این مقاله به لیست پستی ما بازخورد بدهید: feature-control@ chromium.org .
ما دوست داریم بدانیم از چه مقادیر آستانه ای استفاده کرده اید و مفید بوده اید. ما دوست داریم بدانیم که آیا unoptimized-lossless-images یا unoptimized-lossless-images-strict بصری‌تر و آسان‌تر برای استفاده هستند، یا به جای آن باید از کمک هزینه سربار تفاوت استفاده کنیم. ما یک نظرسنجی را در پایان دوره آزمایشی ارسال خواهیم کرد. گوش به زنگ باشید!