ارائه تصاویر با ابعاد و اندازه صحیح

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

برای بهینه‌سازی عملکرد و سرعت وب‌سایت، تصاویر باید به‌اندازه موردنیاز طرح صفحه شما، بزرگ باشند. به‌عنوان‌مثال، تصاویر slider  معمولاً بزرگ‌تر. تصاویر وبلاگ با اندازه متوسط (با عرض برابر با عرض صفحه منهای نوار کناری) و تصاویری نیز نیاز به‌اندازه نسبتاً کوچک دارند.

بنابراین بسیار مهم است که ابتدا ابعاد تصویر را تعیین کنید تا بدانید محدوده محتوای شما در سایت شما چقدر گسترده است. می‌توانید از ابزارهای توسعه‌دهنده تعبیه‌شده در مرورگر وب (developer option) خود استفاده کنید: روی هر عنصر صفحه کلیک راست کرده و روی «Inspect» کلیک کنید.

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

برای یافتن تصاویری که دارای ابعاد صحیح نمی‌باشند، بهترین روش استفاده از گزارش Lighthouse است، در قسمت عملکرد این گزارش (Lighthouse > Options > Performance) لیست تمام تصاویری که دارای ابعاد صحیح خود نیستند نمایش داده می‌شود.این لیست در قسمت Image elements do not have explicit width and height مانند تصویر زیر نمایش داده می‌شود.

تعیین اندازه صحیح تصاویر

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

مختصری در مورد واحدها (units) در CSS

در CSS دو نوع واحد (Unit) برای تعیین اندازه عناصر HTML از جمله تصاویر وجود دارد:

واحدهای مطلق (Absolute): عناصری که با استفاده از واحدهای مطلق استایل داده شده‌اند، صرف‌نظر از دستگاه، همیشه در یک اندازه نمایش داده می‌شوند. نمونه‌هایی از واحدهای CSS معتبر و مطلق: px، cm، mm، in.

واحدهای نسبی (Relative): عناصری که با استفاده از واحدهای نسبی استایل دهی شده‌اند، بسته به طول نسبی مشخص‌شده، در اندازه‌های متفاوتی نمایش داده می‌شوند. نمونه‌هایی از واحدهای CSS معتبر و نسبی: %, vw ، em.

واحدها(units) در CSS مبحث بسیار جالب و مفصلی است که خارج از حوصله این مقاله است برای اطلاعات تکمیلی به این مقاله (CSS Units) مراجعه کنید.

رویکرد “خوب”در تعین اندازه صحیح تصاویر

• رویکرد “خوب” و “واحدهای نسبی”: اندازه تصویر را تا حدی تغییر دهید که در همه دستگاه‌ها کار کند. به این مفهوم که تصویری از لحاظ کیفی و سایز انتخاب کنید که در دستگاه‌های مختلف به خوبی نمایش داده شود البته می‌توانید با استفاده از داده‌های Google Analytics خود پر استفاده‌ترین دستگاه در وب‌سایت خود را پیدا کنید و تصاویر خود را برای دستگاه‌هایی با تعداد کاربر بالا بهینه کنید. . از طرف دیگر، screensiz.es اطلاعاتی در مورد نمایشگرهای بسیاری از دستگاه‌های رایج ارائه می دهد.
• رویکرد “خوب” و “واحدهای مطلق “: اندازه تصویر را طوری تغییر دهید تا با اندازه‌ای که در آن نمایش داده می‌شود مطابقت داشته باشد.از پنل DevTools Elements می‌توان برای تعیین اندازه یک تصویر استفاده کرد.

رویکرد “بهتر”در تعین اندازه صحیح عکس ها

• “رویکرد بهتر” و “واحدهای مطلق”: از ویژگی‌های srcset و sizes (تصاویر واکنش‌گرا) برای ارائه تصاویر مختلف به تراکم‌های مختلف صفحه‌نمایش استفاده کنید. (راهنمای تصاویر واکنش‌گرا را اینجا بخوانید.)

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

تکنیک‌های تصاویر واکنش‌گرا این امکان را به شما می‌دهد که چندین نسخه تصویر را فهرست کنید و مرورگر طبق اندازه و تراکم دستگاه کاربر بهترین تصویر را انتخاب کند. استفاده از یک تصویر برای همه نمایشگرها در دستگاه‌های کوچک‌تر باعث اتلاف داده کاربر و افزایش زمان لود خواهد شد.

• “رویکرد بهتر” و “واحدهای نسبی”: از تصاویر واکنش‌گرا برای نمایش تصاویر متفاوت بر اساس اندازه صفحه استفاده کنید. (راهنما را اینجا بخوانید.)

تغییر اندازه تصاویر

صرف‌نظر از رویکردی که انتخاب می‌کنید، ممکن است استفاده از ImageMagick برای تغییر اندازه تصاویر و ارائه تصاویر با ابعاد و اندازه صحیح مفید باشد. ImageMagick محبوب‌ترین ابزار خط فرمان برای ایجاد و ویرایش تصاویر است. اکثر افراد هنگام استفاده از CLI نسبت به ویرایشگر تصاویر با رابط کاربری گرافیکی (مانند فتوشاپ) می‌توانند اندازه تصاویر را خیلی سریع‌تر تغییر دهند.

برای مثال کد زیر اندازه تصویر را به 25% اندازه اصلی تغییر می‌دهد:

convert flower.jpg -resize 25% flower_small.jpg

و این کد مقیاس تصویر را متناسب با “عرض 200 پیکسل در طول 100 پیکسل” تنظیم می‌کند:

# macOS/Linux
convert flower.jpg -resize 200x100 flower_small.jpg

# Windows
magick convert flower.jpg -resize 200x100 flower_small.jpg

اگر قصد دارید اندازه تصاویر زیادی را تغییر دهید، ممکن است استفاده از یک اسکریپت یا سرویس برای خودکار کردن فرایند راحت‌تر باشد. می‌توانید در راهنمای Responsive Images درباره این موضوع اطلاعات بیشتری کسب کنید.

سوالات متداول