ارائه تصاویر در اندازه دسکتاپ به دستگاه های تلفن همراه می تواند 2 تا 4 برابر بیشتر از نیاز داده استفاده کند. دستورالعمل های موجود در این صفحه را دنبال کنید تا با ارائه اندازه های مختلف تصویر به دستگاه های مختلف، تجربه کاربری را بهبود ببخشید.
تصاویر واکنشگرا و Core Web Vitals
هنگامی که تصاویر واکنشگرا را ارائه می دهید، صفحه شما قابلیت های نمایش دستگاه کاربر را ارزیابی می کند و یکی از مجموعه ای از نامزدهای تصویر را انتخاب می کند که بر اساس آن معیارها برای نمایش بهینه هستند. این کار عمدتاً با ارائه تصاویر کوچکتر به دستگاه هایی با صفحه نمایش کوچکتر، داده ها را برای کاربران شما ذخیره می کند.
اثرات بارگذاری سریع‌تر تصویر می‌تواند به بزرگترین رنگ محتوای صفحه شما (LCP) نیز گسترش یابد. به عنوان مثال، اگر عنصر LCP صفحه شما یک تصویر است، ارائه آن به صورت پاسخگو می تواند زمان بارگذاری منبع آن را کاهش دهد.
زمان بارگذاری کمتر منبع، زمان بارگذاری یک تصویر LCP را کاهش می دهد و امتیاز LCP صفحه شما را بهبود می بخشد. LCP کمتر به این معنی است که کاربران سایت شما را سریع‌تر بارگذاری می‌کنند و به‌ویژه مهم‌ترین محتوای آن (عنصر LCP) را سریع‌تر بارگذاری می‌کنند. ارائه تصاویر واکنش گرا همچنین می تواند کشمکش پهنای باند برای منابع دیگر در صفحه را کاهش دهد، که می تواند سرعت بارگیری صفحه شما را به طور کلی بهبود بخشد.
تغییر اندازه تصاویر
دو مورد از محبوب‌ترین ابزارهای تغییر اندازه تصویر ، بسته npm واضح و ابزار ImageMagick CLI هستند.
بسته شارپ انتخاب خوبی برای تغییر اندازه خودکار تصویر است (به عنوان مثال، ایجاد چندین اندازه ریز عکسها برای همه ویدیوهای وب سایت شما). سریع است و به خوبی با اسکریپت ها و ابزارهای ساخت ادغام می شود. ImageMagick برای تغییر اندازه یک بار تصویر راحت تر است زیرا به طور کامل از خط فرمان اجرا می شود.
تیز
برای استفاده از شارپ به عنوان اسکریپت Node، این کد را به عنوان یک اسکریپت جداگانه در پروژه خود ذخیره کنید، سپس آن را برای تبدیل تصاویر خود اجرا کنید:
const sharp = require('sharp');
const fs = require('fs');
const directory = './images';
fs.readdirSync(directory).forEach(file => {
sharp(`${directory}/${file}`)
.resize(200, 100) // width, height
.toFile(`${directory}/${file}-small.jpg`);
});
ImageMagick
برای تغییر اندازه یک تصویر به 33 درصد از اندازه اصلی، دستور زیر را در ترمینال خود اجرا کنید:
convert -resize 33% flower.jpg flower-small.jpg
برای تغییر اندازه یک تصویر به گونه ای که در فضایی با عرض 300 پیکسل در فضای زیاد 200 پیکسل قرار گیرد، دستور زیر را اجرا کنید:
# macOS/Linux
convert flower.jpg -resize 300x200 flower-small.jpg
# Windows
magick convert flower.jpg -resize 300x200 flower-small.jpg
چند نسخه تصویر باید ایجاد کنید؟
هیچ پاسخ "درست" واحدی برای این سوال وجود ندارد. با این حال، ارائه 3 تا 5 اندازه مختلف از یک تصویر معمول است. ارائه اندازه تصویر بیشتر برای عملکرد بهتر است، اما فضای بیشتری را در سرورهای شما اشغال می کند و از شما می خواهد که کمی HTML بیشتری بنویسید.
گزینه های دیگر
خدمات تصویر مانند Thumbor (متن باز) و Clodinary نیز ارزش بررسی را دارند. هر دو روش ساده ای برای ایجاد تصاویر پاسخگو هستند که همچنین دستکاری تصویر را در صورت تقاضا ارائه می دهند. برای راه اندازی Thumbor، آن را روی سرور خود نصب کنید. Cloudinary از جزئیات برای شما مراقبت می کند و نیازی به راه اندازی سرور ندارد.
چندین نسخه تصویر را ارائه دهید
هنگامی که چندین نسخه تصویر را مشخص می کنید، مرورگر بهترین مورد را برای استفاده انتخاب می کند:
| قبل از | بعد از |
|---|---|
| <img src="flower-large.jpg"> | <img src="flower-large.jpg" srcset="flower-small.jpg 480w, flower-large.jpg 1080w" sizes="50vw"> |
ویژگی‌های src ، srcset و sizes تگ <img> همگی برای رسیدن به این نتیجه نهایی با هم تعامل دارند.
ویژگی "src".
ویژگی src باعث می‌شود این کد برای مرورگرهایی که از ویژگی‌های srcset و sizes پشتیبانی نمی‌کنند کار کند. این مرورگرها به بارگیری منبع مشخص شده در ویژگی src باز می گردند.
ویژگی "srcset".
ویژگی srcset لیستی از نام فایل های تصویری جدا شده با کاما و توصیف کننده های عرض یا چگالی آنها است.
این مثال از توصیفگرهای عرض استفاده می‌کند که به مرورگر می‌گوید یک تصویر چقدر گسترده است، بنابراین مجبور نیست تصویر را دانلود کند تا متوجه شود. 480w یک توصیف کننده عرض است که به مرورگر می گوید که flower-small.jpg 480 پیکسل عرض دارد. 1080w یک توصیف کننده عرض است که به مرورگر می گوید که flower-large.jpg 1080 پیکسل عرض دارد.
اعتبار اضافی : برای ارائه اندازه های مختلف تصویر، نیازی به دانستن توصیفگرهای چگالی ندارید. با این حال، اگر در مورد نحوه عملکرد توصیفگرهای چگالی کنجکاو هستید، به آزمایشگاه کد سوئیچینگ رزولوشن مراجعه کنید. توصیفگرهای چگالی برای ارائه تصاویر مختلف بر اساس تراکم پیکسلی دستگاه استفاده می شود.
ویژگی "اندازه ها".
ویژگی sizes به مرورگر می‌گوید که تصویر در هنگام نمایش چقدر عریض خواهد بود، اگرچه بر اندازه نمایش تصویر تأثیری نمی‌گذارد، بنابراین همچنان برای آن به CSS نیاز دارید.
مرورگر از این اطلاعات به همراه اطلاعاتی که در مورد دستگاه کاربر می‌داند (از جمله ابعاد و تراکم پیکسلی آن) استفاده می‌کند تا مشخص کند کدام تصویر باید بارگذاری شود.
اگر یک مرورگر ویژگی " sizes " را تشخیص ندهد، به بارگیری تصویر مشخص شده توسط ویژگی " src " بازمی گردد. ( sizes و srcset به طور همزمان معرفی شدند، بنابراین هر مرورگر از هر دو ویژگی یا هیچ کدام پشتیبانی می کند.)
اعتبار اضافی : اگر می‌خواهید شیک باشید، می‌توانید از ویژگی sizes برای تعیین اندازه‌های مختلف اسلات نیز استفاده کنید. این وب‌سایت‌هایی را که از طرح‌بندی‌های مختلف برای اندازه‌های دید متفاوت استفاده می‌کنند، در خود جای می‌دهد. برای یادگیری نحوه انجام این کار، این نمونه کد چند اسلات را بررسی کنید.
(حتی بیشتر) اعتبار اضافی
علاوه بر تمام اعتبار اضافی که قبلاً ذکر شده است (تصاویر پیچیده هستند!)، همچنین می توانید از همین مفاهیم برای کارگردانی هنری استفاده کنید. جهت هنری تمرین ارائه تصاویر با ظاهری کاملاً متفاوت (به جای نسخه های مختلف یک تصویر) به نماهای مختلف است. می توانید در لابراتوار کد Art Direction اطلاعات بیشتری کسب کنید.
تأیید کنید
پس از پیاده سازی تصاویر واکنش گرا، می توانید از Lighthouse استفاده کنید تا مطمئن شوید هیچ تصویری را از دست ندهید. ممیزی عملکرد Lighthouse را اجرا کنید ( Lighthouse > Options > Performance ) و به دنبال نتایج ممیزی تصاویر اندازه مناسب باشید. این نتایج تصاویری را که هنوز باید اندازه آنها را تغییر دهید فهرست می کند.