آموزش رفع خطای Specify Image Dimensions در gtmetrix

آموزش رفع خطای  Specify Image Dimensions :

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

علت خطای Specify Image Dimensions :

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

حالت اول :

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

حالت دوم :

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

اضافه کردن Width + Height به HTML تصاویر

حال چگونه خطای Specify Image Dimensions  را حل کنیم ؟

• روش اول : اضافه کردن Width + Height به HTML تصاویر:

هنگامی که تصویر را پیدا کردید ، HTML آن را مشاهده کنید و متوجه می شوید که عرض + قد مشخصی وجود ندارد. تمام کاری که شما باید انجام دهید اینست که این موارد را درون HTML قرار دهید: مثال : عرض = ”135 ″ ارتفاع =” 135  

• روش دوم : استفاده از سایت gtmetrix :

برای رفع خطای Specify Image Dimensions کافیست تصاویری که این مشکل را دارند در سایت خود پیدا کنیم و ابعاد آن را با اندازه ای که در gtmetrix مشخص شده اصلاح کنیم(طبق شکل).

• روش سوم : استفاده از افزونه وردپرس :

شما می توانید از افزونه Better Search Replace برای بهینه سازی تصاویر ویجت که در چندین صفحه ظاهر می شوند استفاده کنید بدون اینکه مجبور باشید به صورت جداگانه از آنها عبور کنید. این باعث صرفه جویی در وقت می شود.

مرحله 1:

افزونه Better Search Replace را نصب کنید.

مرحله 2:

در قسمت  جستجو، عرض + ارتفاع مشخص شده در html را اضافه کنید. در قسمت "Replace with"، نسخه جدیدی از تصویر را که شامل عرض + ارتفاع است ، اضافه کنید.

مرحله 3:

جدول های مورد نظر خود را انتخاب کنید تا افزونه بتواند تصاویر را اسکن و جایگزین کند. اگر می خواهید آن را امتحان کنید، می توانید یک حالت خشک را انجام دهید ، در غیر این صورت آن گزینه را بردارید و روی "Run Search / Replace" کلیک کنید. مرحله 4: افزونه اجرا خواهد شد و تصویر را در تمام جداولی که انتخاب کرده اید جستجو یا جایگزین می کند. پس از اتمام، Better Search Replace به شما می گوید که چند جدول اسکن شده و چند تصویر جایگزین شده است.