آموزش رفع خطای Specify image dimensions در gtmetrix

یکی دیگه از خطاهای رایجی که موقع تست سرعت سایت با GTmetrix به وجود میاد و بیشتر در سایت‌هایی که از سیستم مدیریت محتوای اختصاصی استفاده می‌کنند دیده میشه با عنوان Specify image dimensions هست که مربوط به اندازه تصاویر استفاده شده در صفحات یک سایت به حساب میاد. این خطا زمانی به وجود میاد که اندازه تصاویر با استفاده از کدهای HTML که با استفاده از دو دستور width برای پهنا و height برای ارتفاع مشخص میشه وجود ندارند و صرفا آدرس تصویر برای نمایش دادن مشخص شده. این موضوع باعث میشه موقعی که سایت در حال لود هست به مشکل بخورید.

در این آموزش قصد دارم نحوه برطرف کردن ارور Specify image dimensions در جی تی متریکس رو آموزش بدم که با استفاده از این آموزش میتونید تصاویری که در صفحات سایت استفاده می‌کنید رو بهینه کنید تا سرعت لود بهتری در سایت داشته باشید.

آموزش رفع خطای Specify image dimensions در gtmetrix

توی این آموزش میخوام به یکی از مهم‌ترین و ساده‌ترین کاری که باعث میشه سئو تصاویر بهتری داشته باشید بپردازم. حتما برای شما هم پیش اومده وقتی وارد سایتی که چندین تصویر در یک صفحه داره میشید، لا به لای این تصاویر متن نوشته قرار دارند و چون برای لود تصاویر درخواستی به سرور ارسال میشه، تا لود شدن عکس مدتی طول میکشه. ممکنه با دو نوع از سایت‌ها که در حالت زیر هستند مواجه شده باشید.

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

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

<img src="image.jpg" />

اما در دسته دوم که به صورت بهینه شده تصاویر رو استفاده کردند و مقدار width و height رو برای ارتفاع و پهنای عکس در نظر گرفتند اگر سورس صفحه رو بررسی کنید به شکل زیر خواهند بود.

<img src="image.jpg" width="800" height="350" />

رفع ارور Specify image dimensions

با توضیحاتی که تا به اینجا داده شد حتما متوجه شدید که برای برطرف کردن این خطا کافیه اندازه تصاویر رو وارد کنید. تو سیستم‌های مدیریت محتوا مثل وردپرس این کار به صورت خودکار انجام میگیره. چرا که وردپرس از این قابلیت پشتیبانی میکنه و نیازی نیست دستی اندازه تصاویر رو مشخص کنید. وردپرس به کمک قابلیت برش تصاویر بر اساس اندازه تصویر(بند انگشتی، میانه، بزرگ، کامل و…) اندازه هر تصویر رو موقع آپلود کردن شناسایی میکنه و بعد از قرار دادن در صفحه هم خاصیت width و height رو براشون اعمال میکنه. اما در سایر سیستم‌ها ممکنه مجبور باشید این کار رو به صورت دستی وارد کنید که زیاد هم بد نیست.

چرا تعیین ابعاد تصاویر اهمیت دارد؟

وقتی شما اندازه تصاویر را مشخص نمی‌کنید، مرورگر برای اینکه تصویر را بارگذاری کند، ابتدا باید کل فایل تصویر را دریافت کرده و سپس ابعاد واقعی آن را محاسبه کند. این فرآیند باعث ایجاد تأخیر در رندر شدن صفحه می‌شود. در مقابل، وقتی مرورگر از قبل می‌داند که یک تصویر دقیقاً چه مقدار فضا را اشغال خواهد کرد، می‌تواند چیدمان عناصر صفحه را بدون نیاز به صبر برای بارگذاری تصویر انجام دهد. این موضوع نه تنها تجربه کاربری را بهبود می‌بخشد بلکه در نمره‌های عملکردی ابزارهایی مثل GTmetrix و PageSpeed Insights نیز تأثیر مثبت خواهد داشت.

روش‌های مختلف برای مشخص کردن ابعاد تصاویر

استفاده از ویژگی‌های width و height در تگ HTML
ساده‌ترین روش همین است که در تگ <img> اندازه‌ها را به صورت مستقیم تعیین کنید:
```
<img src="image.jpg" width="600" height="400" />
```
استفاده از CSS برای مشخص کردن ابعاد
اگر بخواهید تصاویر را با استفاده از کلاس‌های CSS کنترل کنید، می‌توانید به شکل زیر عمل کنید:
```
<img src="image.jpg" class="custom-img" />
```
```
.custom-img {
    width: 600px;
    height: 400px;
}
```
البته باید توجه داشت که برای برطرف کردن خطای GTmetrix توصیه می‌شود ابعاد به صورت مستقیم در تگ HTML هم وارد شوند، مگر اینکه CSS قبل از بارگذاری تصویر در مرورگر رندر شود.
تولید خودکار اندازه‌ها از سمت سرور
در برخی سیستم‌های مدیریت محتوا یا فریم‌ورک‌ها، امکان تنظیم سرور برای ارسال ابعاد تصاویر همراه با HTML وجود دارد. به این شکل می‌توان از وارد کردن دستی اندازه‌ها صرف‌نظر کرد و همچنان ساختار بهینه داشت.

نکته مهم برای سایت‌های واکنش‌گرا (Responsive)

اگر سایت شما واکنش‌گرا است، باید مراقب باشید که ابعاد تصاویر را به گونه‌ای تنظیم کنید که در دستگاه‌های مختلف به‌درستی نمایش داده شوند. در این حالت، استفاده از ویژگی‌های width و height در کنار CSS‌هایی مثل max-width: 100% بسیار کاربردی است. به عنوان مثال:

<img src="image.jpg" width="800" height="400" style="max-width:100%; height:auto;" />

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

جمع‌ بندی

برای برطرف کردن ارور Specify image dimensions در GTmetrix:

همیشه برای تصاویر خود مقادیر width و height را مشخص کنید.
در سایت‌های اختصاصی، بررسی کنید که هنگام تولید HTML این ویژگی‌ها لحاظ شده باشند.
اگر سایت شما واکنش‌گراست، از CSS مناسب برای حفظ انعطاف‌پذیری تصاویر استفاده کنید.
و در نهایت، تست و بررسی مجدد در GTmetrix بعد از اعمال تغییرات فراموش نشود.