حل ارور Specify image dimensions در GTmetrix
با آموزش حل ارور Specify image dimensions در GTmetrix از وبلاگ آموزشی پرداز آی تی در خدمت شما هستیم و قصد داریم تا در ادامه مطالب دسته GTmetrix به نحوه حل ارور Specify image dimensions در GTmetrix بپردازیم.
در مطلب قبلی از دسته آموزش های GTmetrix از وبلاگ پرداز آی تی به حل ارور Specify a character set early در GTmetrix پرداختیم که در صورت نیاز می توانید از این مطلب نیز استفاده کنید.
در سایت GTmetrix خطا Specify image dimensions از نوع خطا های عکس می باشد که دارای اولویت بندی متوسط است و و میزان دشواری مشخص شده برای حل این خطا نیز آسان است و میانگین درصد آن نیز 97% می باشد.
با آموزش حل ارور Specify image dimensions در GTmetrix در ادامه همراه پرداز IT باشید.
حل ارور Specify image dimensions در GTmetrix
در ابتدا قصد داریم تا به شما به توضیح درباره Specify image dimensions بپردازیم و در ادامه به نحوه رفع خطا Specify image dimensions.
منظور از Specify image dimensions چیست
Specify image dimensions به این معنا می باشد که برای عکس ابعاد و چهارچوب مشخصی معین نشده.
برای یک عکس عرض و ارتفاع که از مشخصه های یک عکس می باشند به عنوان ابعاد تصویر شناخته می شوند و هنگامی که عکس های شما دارای این صفات نباشند با خطا Specify image dimensions مواجه می شوید.
در بسیاری از صفحات وب تصاویر جزئی جدایی نشدنی از ظاهر و عناصر تشکیل دهنده یک سایت می باشند و به طور مسلم عکس ها دارای ویژگی های خاصی می باشند که ابعاد آنها یکی از این موارد می باشد.
اگر در آموزش قبلی همراه ما بوده باشید خدمت شما توضیح دادیم که مروگر برای اینکه اطلاعات و عناصر یک صفحه وب را به کاربر نمایش دهد درخواست ها یا request هایی را به سمت سرور میزبان سایت ارسال می کند.
سرور نیز متناسب با درخواست یا درخواست های مرورگر اطلاعات مورد نیاز را در اختیار مرورگر قرار می دهد که به کاربر نمایش دهد.
ابعاد تصویر از مواردی هست که برای مرورگر درخواست دهنده به سرور بسیار مهم می باشد زیرا تعیین عرض و ارتفاع برای همه تصاویر اجازه رندر سریع تر با حذف موارد غیر ضروری را می دهد.
در صورتی که تصاویر دارای ابعاد مشخص شده نباشند و یا ابعاد مشخص شده با تصویر اصلی مطابقت نداشته باشند مرورگر پس از لود تصاویر نیاز به ایجاد تغییر در تصاویر و بارگذاری مجدد آنها یا reflows دارد.
اما اگر ابعاد به درستی مشخص شده باشند دیگر مرورگر تشخیص می دهد که جزئیات یک صفحه مثل عکس و متن دقیقا کجا قرار دارند و نیازی به reflows نیست.
مشخص کردن ابعاد تصویر در افزایش سرعت بارگذاری صفحه تاثیر مثبتی دارد.
رفع خطا Specify image dimensions
در یک سند HTML عکس ها با تگ <img> در قسمت بدنه یا همان تگ <body> مشخص می شوند و برای حل این خطا و جلوگیری از reflows ، ابعاد تصویر یا تصاویر را در HTML و CSS تعیین می کنند.
شما می توانید width و height که عرض و ارتفاع تصویر هستند را یا در تگ <img> در HTML و یا در یک سند CSS به طور کلی مشخص کنید.
در صورتی که قصد دارید برای یک تصویر ابعاد تعیین کنید باید این کار به درستی انجام شود و به طور مثال اگر ابعاد یک عکس 60 در 60 می باشد برای آن در HTML و CSS ابعاد 30 در 30 مشخص نکنید.
برای چنین مواردی ابتدا با نرم افزار هایی مثل فتوشاپ ابعاد تصویر را به 30 در 30 کاهش دهید و سپس در HTML و CSS برای آن width و height برابر با 30 مشخص کنید.
کد های تصاویر زیر را تصور کنید که بدون تعیین ابعاد می باشند.
<img src="https://example.com/image.jpg" title="Some Title" /> <img src="https://example.com/vector.svg" class="svg" /> <img src="https://example.com/another-vector.webp" />
حال این کد ها پس از ابعاد دهی به تصاویر به شکل زیر می شوند.
<img src="https://example.com/image.jpg" title"Some Title" width="100" height="25" /> <img src="https://example.com/vector.svg" class="svg" width="100%" height="auto" /> <img src="https://example.com/another-vector.webp" width="100%" height="auto" />
این کد ها در HTML می باشد و برای استفاده در CSS می توانید به شکل زیر ابعاد را مشخص کنید.
در استایل دهی داخلی یا Inline CSS از مثل کد زیر عمل کنید.
<img src="https://example.com/image.jpg" style="width: 100px; height: 25px" />
در استایل دهی خارجی نیز می توانید به صورت زیر عمل کنید.
#picture.jpg { width: 300px; height: 200px; }امیدواریم آموزش حل ارور Specify image dimensions در GTmetrix مورد توجه شما عزیزان قرار گرفته باشد.
