یکی از عوامل مهم در بهینه‌سازی عملکرد صفحات وب و بهبود تجربه کلی کاربر، اطمینان از این است که تصاویر موجود در یک سایت با ویژگی‌های عرض و ارتفاع صحیح تعریف شده باشند. هنگامی که عناصر تصویری این ویژگی‌ها را ندارند، می‌تواند به مشکلات عملکردی، تغییرات ناخواسته در چیدمان (layout shifts) و زمان بارگذاری کند منجر شود که در نهایت تجربه کاربری را تحت تاثیر قرار می‌دهد.
چرا ویژگی‌های عرض و ارتفاع مهم هستند؟
ویژگی‌های عرض و ارتفاع تصویر، فضای مورد نظر آن را در صفحه تعریف می‌کنند حتی قبل از اینکه تصویر به طور کامل بارگذاری شود. این ویژگی‌ها اطلاعات مهمی را به مرورگر می‌دهند و به آن کمک می‌کنند که فضای مناسب برای تصویر را هنگام بارگذاری محتوای صفحه رزرو کند. رزرو زودهنگام این فضا می‌تواند به طور قابل توجهی تغییرات چیدمان را کاهش دهد و تجربه بارگذاری روان‌تری را فراهم کند.
در اینجا دلایل اصلی اهمیت تعیین عرض و ارتفاع برای تصاویر آمده است:
جلوگیری از تغییرات چیدمان: بدون ویژگی‌های عرض و ارتفاع، مرورگر باید منتظر بماند تا تصویر به طور کامل دانلود شود تا ابعاد آن را تشخیص دهد. در این مدت، ممکن است سایر عناصر صفحه جابجا شده یا اندازه‌گذاری شوند که منجر به تغییرات چیدمان می‌شود. این تغییرات ممکن است باعث تجربه منفی کاربری شود، به ویژه زمانی که صفحه بارگذاری می‌شود یا تصاویر دیر بارگذاری می‌شوند و محتوای اطراف را جابجا یا تغییر اندازه می‌دهند.
بهبود عملکرد: هنگامی که تصاویر دارای ویژگی‌های عرض و ارتفاع هستند، مرورگر می‌تواند فرآیند رندر صفحه را قبل از بارگذاری کامل تصویر شروع کند. این اجازه می‌دهد که مرورگر به سرعت چیدمان ثابت صفحه را نمایش دهد و این باعث بهبود عملکرد مشهود صفحه می‌شود. این فرآیند به جلوگیری از تأخیر در رندر و تضمین این که محتوا به موقع روی صفحه نمایش داده می‌شود، کمک میکند.
بهبود امتیاز Cumulative Layout Shift (CLS): Cumulative Layout Shift (CLS) یکی از معیارهای اصلی Web Vitals است که پایداری بصری را اندازه‌گیری میکند. یک امتیاز بالا در CLS نشان‌دهنده این است که محتوای صفحه در حین بارگذاری خیلی جابجا می‌شود که می‌تواند منجر به تجربه منفی کاربر شود. با تعیین ویژگی‌های عرض و ارتفاع برای تصاویر، از تغییرات ناخواسته چیدمان جلوگیری کرده و امتیاز CLS صفحه را بهبود می‌بخشید.
جلوگیری از تأخیر در رندر تصاویر: در صورت عدم وجود ویژگی‌های عرض و ارتفاع، مرورگر ممکن است ابعاد تصویر را قبل از بارگذاری تشخیص ندهد و این باعث تأخیر در رندر و فرایند بارگذاری غیرقابل پیش‌بینی می‌شود. این عدم قطعیت می‌تواند منجر به ظاهر ناگهانی تصاویر یا جابجایی محتوای صفحه بعد از بارگذاری تصویر شود که باعث احساس کند بودن و بهینه نبودن صفحه می‌گردد.
چطور ویژگی‌های عرض و ارتفاع را به درستی برای تصاویر تعیین کنیم؟
استفاده از ابعاد طبیعی تصویر: ساده‌ترین روش این است که از ابعاد ذاتی تصویر خود استفاده کنید. این ابعاد همان ابعاد طبیعی تصویر هستند که می‌توان آن‌ها را به طور مستقیم از فایل تصویر استخراج کرد. با تعیین ویژگی‌های عرض و ارتفاع به ابعاد طبیعی تصویر، مرورگر می‌تواند فضای صحیحی را برای تصویر قبل از بارگذاری آن اختصاص دهد.
تصاویر واکنش‌گرا و ملاحظات نمایشگر: در بسیاری از موارد، تصاویر باید واکنش‌گرا باشند، به این معنی که باید متناسب با اندازه‌ها و وضوح‌های مختلف صفحه نمایش تنظیم شوند. برای حفظ انعطاف‌پذیری در حالی که همچنان ویژگی‌های عرض و ارتفاع به درستی تعریف شده است، می‌توانید از CSS برای تنظیم حداکثر عرض تصویر به 100% و تعیین ارتفاع به صورت نسبی استفاده کنید. این می‌تواند از طریق CSS و ویژگی aspect-ratio محقق شود که تضمین میکند نسبت ابعاد تصویر در هنگام مقیاس شدن دست نخورده باقی می‌ماند.
<img src="example.jpg" width="600" height="400" style="max-width: 100%; height: auto;" alt="Example Image">
به طور متناوب، استفاده از عنصر picture به همراه srcset می‌تواند تصاویر واکنش‌گرا را ارائه دهد که بسته به اندازه صفحه نمایش تنظیم می‌شوند و در عین حال فضای مناسب برای هر تصویر را حفظ می‌کنند.
استفاده از نسبت ابعاد (Aspect Ratio): برای تصاویری که نیاز به حفظ نسبت ابعاد خاصی دارند ولی در عین حال باید واکنش‌گرا باشند، استفاده از ویژگی CSS aspect-ratio روش خوبی است. این ویژگی به مرورگر کمک میکند که فضای مناسب برای تصویر را محاسبه و تنظیم کند حتی قبل از بارگذاری کامل آن.
تصاویر پیش‌نمایش و بارگذاری تنبل (Lazy Loading): برای تصاویری که به صورت تنبل بارگذاری می‌شوند (یعنی تنها زمانی که وارد صفحه می‌شوند بارگذاری می‌شوند)، می‌توانید حتی برای تصویر پیش‌نمایش نیز اندازه‌گذاری مشخصی انجام دهید. این تصویر پیش‌نمایش اطمینان می‌دهد که فضای مورد نظر از قبل رزرو شود و از تغییرات چیدمان هنگام بارگذاری تصویر اصلی جلوگیری کند.
مزایای تعیین ویژگی‌های عرض و ارتفاع
رندر سریعتر صفحه: زمانی که تصاویر به درستی اندازه‌گذاری شده‌اند، مرورگر می‌تواند چیدمان صفحه را سریعتر محاسبه کند که باعث رندر سریعتر صفحه می‌شود. این باعث بهبود زمان بارگذاری مشهود و ایجاد تجربه روان‌تری برای کاربران می‌گردد.
تجربه کاربری بهبود یافته: با جلوگیری از تغییرات چیدمان و تضمین چیدمان ثابت، کاربران تجربه کمتری از ناراحتی و سردرگمی خواهند داشت. این باعث ایجاد یک سایت حرفه‌ای و شیک می‌شود.
مزایای SEO: گوگل از پایداری صفحه به عنوان یکی از عوامل رتبه‌بندی استفاده میکند. صفحاتی که امتیاز CLS کمتری دارند معمولاً در نتایج موتور جستجو رتبه بهتری خواهند داشت، بنابراین تعیین صحیح ابعاد تصاویر یکی از جنبه‌های مهم بهینه‌سازی موتور جستجو (SEO) است.
بهینه‌سازی برای موبایل: در دستگاه‌های موبایل که اندازه صفحه نمایش به شدت متفاوت است، تعیین عرض و ارتفاع تضمین میکند که تصاویر به درستی در تمامی دستگاه‌ها نمایش داده می‌شوند و از تحریف یا بارگذاری کند جلوگیری می‌شود.
نتیجه‌گیری
تضمین این که عناصر تصویری ویژگی‌های عرض و ارتفاع صریح دارند، بخشی ضروری از بهینه‌سازی عملکرد وبسایت و تجربه کاربری است. با ارائه ابعاد صحیح برای تصاویر، توسعه‌دهندگان وب می‌توانند از تغییرات چیدمان جلوگیری کنند، زمان رندر صفحه را بهبود بخشند و پایداری بصری را افزایش دهند. این بهینه‌سازی به ویژه برای بهبود امتیاز Cumulative Layout Shift (CLS) که یکی از معیارهای کلیدی برای تجربه کاربری و SEO است، اهمیت دارد. با صرف وقت برای تعیین ابعاد صحیح برای تصاویر، توسعه‌دهندگان می‌توانند وب‌سایت‌هایی سریعتر و واکنش‌گرا ایجاد کنند که تجربه بهتری برای کاربران فراهم می‌آورد.
