یکی دیگه از خطاهای رایجی که موقع تست سرعت سایت با GTmetrix به وجود میاد و بیشتر در سایتهایی که از سیستم مدیریت محتوای اختصاصی استفاده میکنند دیده میشه با عنوان Specify image dimensions هست که مربوط به اندازه تصاویر استفاده شده در صفحات یک سایت به حساب میاد. این خطا زمانی به وجود میاد که اندازه تصاویر با استفاده از کدهای HTML که با استفاده از دو دستور width برای پهنا و height برای ارتفاع مشخص میشه وجود ندارند و صرفا آدرس تصویر برای نمایش دادن مشخص شده. این موضوع باعث میشه موقعی که سایت در حال لود هست به مشکل بخورید.
در این آموزش قصد دارم نحوه برطرف کردن ارور Specify image dimensions در جی تی متریکس رو آموزش بدم که با استفاده از این آموزش میتونید تصاویری که در صفحات سایت استفاده میکنید رو بهینه کنید تا سرعت لود بهتری در سایت داشته باشید.
توی این آموزش میخوام به یکی از مهمترین و سادهترین کاری که باعث میشه سئو تصاویر بهتری داشته باشید بپردازم. حتما برای شما هم پیش اومده وقتی وارد سایتی که چندین تصویر در یک صفحه داره میشید، لا به لای این تصاویر متن نوشته قرار دارند و چون برای لود تصاویر درخواستی به سرور ارسال میشه، تا لود شدن عکس مدتی طول میکشه. ممکنه با دو نوع از سایتها که در حالت زیر هستند مواجه شده باشید.
چه از نظر رابط کاربری و چه از نظر ساختار بهینه بودن سایت، دسته اول زیاد خوب نیستند. از یک طرف بازدیدکننده یکباره با کلی عکس که لود میشن مواجه میشه و از طرف دیگه هم مرورگر چون اندازه تصاویر براش تعریف نشده مجبور هست موقع لود صفحه به صورت همزمان تصاویر رو هم آنالیز بکنه و در جای خودشون نشون بده که این کار میتونه روی سرعت سایت تاثیر تقریبا بدی بگذاره. در چنین سایتهایی که اندازه تصاویر مشخص نشدند، اگر سورس کد رو بررسی کنید، فقط آدرس تصاویر قرار داره و اثری از اینکه تصویر با چه اندازهای هست مشخص نیست.
<img src="image.jpg" />
اما در دسته دوم که به صورت بهینه شده تصاویر رو استفاده کردند و مقدار width و height رو برای ارتفاع و پهنای عکس در نظر گرفتند اگر سورس صفحه رو بررسی کنید به شکل زیر خواهند بود.
<img src="image.jpg" width="800" height="350" />
با توضیحاتی که تا به اینجا داده شد حتما متوجه شدید که برای برطرف کردن این خطا کافیه اندازه تصاویر رو وارد کنید. تو سیستمهای مدیریت محتوا مثل وردپرس این کار به صورت خودکار انجام میگیره. چرا که وردپرس از این قابلیت پشتیبانی میکنه و نیازی نیست دستی اندازه تصاویر رو مشخص کنید. وردپرس به کمک قابلیت برش تصاویر بر اساس اندازه تصویر(بند انگشتی، میانه، بزرگ، کامل و…) اندازه هر تصویر رو موقع آپلود کردن شناسایی میکنه و بعد از قرار دادن در صفحه هم خاصیت width و height رو براشون اعمال میکنه. اما در سایر سیستمها ممکنه مجبور باشید این کار رو به صورت دستی وارد کنید که زیاد هم بد نیست.
وقتی شما اندازه تصاویر را مشخص نمیکنید، مرورگر برای اینکه تصویر را بارگذاری کند، ابتدا باید کل فایل تصویر را دریافت کرده و سپس ابعاد واقعی آن را محاسبه کند. این فرآیند باعث ایجاد تأخیر در رندر شدن صفحه میشود. در مقابل، وقتی مرورگر از قبل میداند که یک تصویر دقیقاً چه مقدار فضا را اشغال خواهد کرد، میتواند چیدمان عناصر صفحه را بدون نیاز به صبر برای بارگذاری تصویر انجام دهد. این موضوع نه تنها تجربه کاربری را بهبود میبخشد بلکه در نمرههای عملکردی ابزارهایی مثل GTmetrix و PageSpeed Insights نیز تأثیر مثبت خواهد داشت.
استفاده از ویژگیهای width و height در تگ HTML
سادهترین روش همین است که در تگ <img> اندازهها را به صورت مستقیم تعیین کنید:
<img src="image.jpg" width="600" height="400" />
<img src="image.jpg" class="custom-img" />
.custom-img { width: 600px; height: 400px; }
البته باید توجه داشت که برای برطرف کردن خطای GTmetrix توصیه میشود ابعاد به صورت مستقیم در تگ HTML هم وارد شوند، مگر اینکه CSS قبل از بارگذاری تصویر در مرورگر رندر شود.
اگر سایت شما واکنشگرا است، باید مراقب باشید که ابعاد تصاویر را به گونهای تنظیم کنید که در دستگاههای مختلف بهدرستی نمایش داده شوند. در این حالت، استفاده از ویژگیهای 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 بعد از اعمال تغییرات فراموش نشود.
با رعایت این نکات ساده، نهتنها از شر یکی دیگر از خطاهای GTmetrix خلاص میشید، بلکه قدمی موثر در بهینه سازی کلی سایتتون هم برمیدارید.
آموزش گامبهگام حذف محدودیت Grace Period در Remote Desktop Services یکی از مشکلات رایج در…
پروتکل Remote Desktop Protocol (RDP) یکی از متداولترین روشها برای مدیریت سرورهای ویندوزی از راه…
شبکه های ارتباطی در طی چند دهه اخیر دچار تحولات بنیادینی شده اند. در آغاز،…
مایکروسافت با انتشار نسخه ی ویندوز سرور 2025، یک بار دیگر ثابت کرده که در…
حملات DDoS (Distributed Denial of Service) یکی از پیچیدهترین و مخربترین تهدیدات سایبری برای وبسایتها…
PyTorch یک چارچوب ماشین لرنیگ اوپن سورس پرکاربرد است که به دلیل سهولت استفاده، نمودار…