آیا فراموش کرده‌اید که ابعاد تصویر خود را قبل از قرار دادن در سایت کوچک کنید؟ این مسئله ممکن است خیلی اهمیت نداشته باشد، اما باعث هدر رفتن داده‌های کاربران و آسیب رساندن به عملکرد صفحه می‌شود. در این مطلب از منتوریکس با روش پیدا کردن ابعاد مناسب عکس‌های سایت آشنا شوید.
عکس‌های سایت با اندازه اشتباه را شناسایی کنید
Lighthouse شناسایی تصاویر با اندازه اشتباه را آسان می‌کند. ممیزی عملکرد (Lighthouse> Options> Performance) را اجرا کرده و به دنبال تصاویر با اندازه مناسب می‌گردد. بنابراین هر تصویری را که نیاز به تغییر اندازه دارد، لیست می‌کند. یکی از اصلی ترین مباحث سئو، بهینه سازی تصاویر می باشد.
اندازه صحیح عکس‌های سایت را تعیین کنید
اندازه تصویر می‌تواند پیچیده باشد. به همین دلیل، ما دو روش ارائه داده‌ایم: "خوب" و "بهتر". هر دو عملکرد را بهبود می‌بخشد، اما درک و اجرای رویکرد "بهتر" ممکن است کمی بیشتر طول بکشد. با این حال، عملکرد را بهتر می‌کند. بهترین انتخاب برای شما انتخابی است که در اجرای آن احساس راحتی کنید.
یک نکته مهم در مورد واحدهای CSS
برای تعیین اندازه عناصر HTML، از جمله تصاویر، دو نوع واحد CSS وجود دارد:
- واحدهای مطلق: عناصر با استفاده از واحدهای مطلق، صرف نظر از دستگاه، همیشه در همان اندازه نمایش داده می‌شوند. نمونه‌هایی از واحدهای CSS معتبر و مطلق عبارت هستند از: px، cm، mm، in.
- واحدهای نسبی: عناصر با استفاده از واحدهای نسبی با توجه به طول نسبی مشخص شده در اندازه‌های مختلف نمایش داده می‌شوند. نمونه‌هایی از واحدهای CSS معتبر و نسبی عبارت هستند از:%، vw (1vw = 1٪ از عرض نمای)، em (1.5 em = 1.5 برابر اندازه قلم).
رویکرد "خوب"
- واحدهای نسبی: اندازه تصویر را به اندازه‌ای تغییر دهید که در همه دستگاه‌ها کار کند.
ممکن است برای شما مفید باشد که داده‌های تجزیه و تحلیل خود را بررسی کنید (به عنوان مثال گوگل آنالیتیکس) تا ببینید کدام اندازه نمایشگر معمولا توسط کاربران شما استفاده می‌شود. همچنین، screensiz.es اطلاعاتی در مورد نمایشگر بسیاری از دستگاه‌های رایج را ارائه می‌دهد.
- Absolute units: تغییر اندازه تصویر برای اندازه‌ای که در آن نمایش داده می‌شود.
برای تعیین اینکه تصویر در چه اندازه‌ای نمایش داده می‌شود می‌توان از پنل DevTools Elements استفاده کرد.
رویکرد "بهتر"
- واحدهای مطلق: از ویژگی‌های srcset و اندازه‌ها برای ارائه تصاویر مختلف به تراکم‌های مختلف نمایش استفاده کنید.
"تراکم صفحه نمایش" به این موضوع اشاره دارد که نمایشگرهای مختلف دارای تراکم متفاوت پیکسل هستند. یک صفحه نمایش تراکم پیکسل بالا واضح‌تر از یک صفحه نمایش تراکم پیکسل پایین به نظر می‌رسد.
در نتیجه، اگر می‌خواهید کاربران بدون در نظر گرفتن تراکم پیکسل دستگاه خود، واضح‌ترین تصاویر ممکن را تجربه کنند، چندین نسخه تصویر لازم است.
برخی از سایت‌ها این تفاوت در کیفیت تصویر را مهم تلقی می‌کنند اما برخی معتقدند که این امر مهم نیست.
تکنیک‌های مختلف این امکان را برای شما فراهم می‌کنند که چندین نسخه تصویر را لیست کنید و دستگاه نیز تصویری را که برای آن مناسب است، انتخاب کند.
- واحدهای نسبی: از تصاویر پاسخگو برای ارائه تصاویر با اندازه‌ها مختلف استفاده کنید. (راهنما را اینجا بخوانید.)
تصویری که در همه دستگاه‌ها کار می‌کند برای دستگاه‌های کوچک‌تر غیر ضروری خواهد بود. تکنیک‌های تصویر پاسخگو، به ویژه srcset و اندازه‌ها، به شما امکان می‌دهد چندین نسخه تصویر را تعیین کنید و دستگاه اندازه‌ای را که برای آن مناسب است انتخاب کند.
تغییر اندازه عکس‌های سایت
صرف نظر از روشی که انتخاب می‌کنید، استفاده از ImageMagick برای تغییر اندازه تصاویر مفید است. ImageMagick محبوب‌ترین ابزار برای ایجاد و ویرایش تصاویر است. بیشتر افراد هنگام استفاده از CLI می‌توانند اندازه تصاویر را بسیار سریع‌تر از یک ویرایشگر تصویر مبتنی بر GUI تغییر دهند.
تغییر اندازه تصویر به 25٪ اندازه تصویر اصلی:
تصویر مقیاس متناسب با "عرض 200 پیکسل در 100 پیکسل ":
اگر اندازه تصاویر زیادی را تغییر داده‌اید، استفاده از اسکریپت یا سرویس برای خودکار کردن روند کار راحت‌تر است. درباره راهنمای تصاویر پاسخگو می‌توانید اطلاعات بیشتری در این باره کسب کنید.
هنگامی که اندازه تصاویر خود را تغییر دادید، Lighthouse را دوباره اجرا کنید، چیزی را از دست ندهید.
اگر به مطالعه در زمینه جدیدترین معیار رتبه‌بندی وب‌سایت‌ها یعنی کور وب وایتال علاقه‌مندید، پیشنهاد می‌کنیم از مجموعه مقالات core web vitals منتوریکس دیدن کنید. همچنین شما می‌توانید برای دریافت مشاوره دیجیتال مارکتینگ و خدمات سئو سایت با ما تماس بیگرید.
این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.
انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وب‌سایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.