آموزش بهینه سازی مشخص کردن ابعاد عکس

مشخص کردن ابعاد عکس Specify image dimensions

مقدمه

از دید یه بازدید کننده

شاید تا حالا شده باشه که به سایتی مراجعه کردید و دارید متن مطلب (یا خبر) میخونید ولی متن به پایین تر یا بالاتر بره
یا اینکه متن یه جای مشخص داشته باشه و عکس ها ابعاد مشخصی داشته باشند و قبل از بارگذاری عکس ها جای محل قرار گیری عکس مشخص باشه و در حین بارگذاری سایت متن جابجا نشه

بهتر شدن رندر سایت توسط مرورگر

یکمی بحث رو تخصصی تر می کنیم
فک کنید ابعاد عکس مشخص نباشد یعنی ابعاد شاید 1در 1 باشد یا شاید 1900 در 1200
وقتی ابعاد عکس مشخص نباشد چه اتفاقی برای مرورگر رخ میدهد؟
اول عکس رو 1 در 1 در نظر میگیرد
حالا یکم منتظر می مونه که درخواست عکس جواب داده بشه و شروع به دریافت عکس کنه
به محض دریافت عکس پهنای عکس مشخص میشود اما ارتفاع عکس مشخص نیست
و همینطور که عکس بارگذاری می شود ارتفاع تخصیص داده شده توسط مرورگر به عکس بیشتر می شود و همین باعث می شود که اجزای بعد از عکس پایین تر بره
حالا فک کنید قبل از اینکه عکس بارگذاری بشه مرورگر ابعاد عکس را بدونه و یه کادر مخصوص عکس به ابعاد داده شده ایجاد می کنه و شروع به بارگذاری عکس می کند
بنظرتون کدوم کمتر حافظه مصرف می کند؟ کدوم عملیات پیچیدگی کمتری دارد؟ کدوم عملیات سریعتر هست؟

Specify image dimensions

Overview

Specifying a width and height for all images  allows for faster rendering  by eliminating the need for unnecessary reflows  and repaints.

مشخص کردن ابعاد عکس ها

بررسی اجمالی

تعیین پهنا و ارتفاع همه عکس ها اجازه رندر سریعتر برای حذف reflows های غیر ضروری ( reflows  به عملیات دوباره محاسبه موقعیت و هندسه عناصر است) و دیگر نیازی نیست دوباره صفحه را از نو چیده بشه.

Details

When the browser lays out the page, it needs to be able to flow around replaceable elements such as images . It can begin to render a page even before images  are downloaded, provided that it knows the dimensions  to wrap non-replaceable elements around. If no dimensions  are specified in the containing document, or if the dimensions  specified don’t match those of the actual images , the browser will require a reflow and repaint once the images  are downloaded. To prevent reflows , specify the width and height of all images, either in the HTML <img> tag, or in CSS.

جزئیات

وقتی که مرورگر لایه خروجی و قابل نمایش را میسازد ، اجزای اطراف عکس ها را جابجا می کند.
حال می شود که لایه خروجی سایت را ساخت قبل از اینکه عکس ها دانلود و بارگذاری شده باشند،به شرطی که ابعاد عکس ها را بداند و نیازی به جابجا کردن دوباره اجزای اطراف عکس نباشد. اگر هیچ ابعادی مشخص نشده باشد، یا اگر ابعاد مشخص شده با ابعاد واقعی عکس های کی نباشد ، مرورگر درخواست reflow و repaint خواهد داد.
برای جلوگیری از reflows  ،مشخص کنید پهنا و ارتفاع همه عکس ها ، یا در تگ <img> در زبان HTML سایت و یا در CSS سایت.

Recommendations

Specify dimensions  that match those of the images themselves.

Don’t use width and height specifications to scale images on the fly. If an image  file is actually 60 x 60 pixels, don’t set the dimensions to 30 x 30 in the HTML or CSS. If the image needs to be smaller, scale it in an image editor and set its dimensions to match.

Be sure to specify dimensions on the image  element or block-level parent

Be sure to set the dimensions on the <img> element itself, or a block-level parent. If the parent is not block-level, the dimensions will be ignored. Do not set dimensions  on an ancestor that is not an immediate parent.

پیشنهادات ما به شما

ابعاد مشخص شده مطابقت کنند با ابعاد اصلی عکس ها

پهنا و ارتفاعی که با مقایس عکس هم خوانی ندارند استفاده نکنید. اگر یک عکس شما ابعاد واقعیش 60 در 60 هست، هرگز ابعاد آن را 30 در 30 در HTML و CSS تعیین نکنید. اگر نیاز به عکسی به ابعاد کوچیکتری دارید بهتر است که با ویرایشگر عکس ابعاد دلخواه در بیاورید.

مطمئن شوید که برای عنصر عکس ابعاد تعیین شده یا در سطح بلوک والدین ابعادی تعیین شده است

مطمئن بشید که ابعادی در تگ <img> یا در یک سطح-بلوک والدین تعیین شده باشد. اگر والدین سطح-بلوک نیستند ، ابعاد تعیین شده نادیده گرفته خواهند شد.ابعاد را روی جد عنصر عکس تنظیم نکنید چون نزدیک ترین والدین نیست.

توضیح ساده چه کار باید کرد

1.ابعاد اصلی عکس را بدست بیاورید
برای اینکار در سیستم عامل ویندوز (98وMEوXPو7و8) روی عکس کلیک راست کنید و گزینه Properties را انتخاب کنید و از پنجره باز شده روی تب Details کلیک کنید و width را برای پهنا و height را برای ارتفاع عکس در نظر داشته باشید.
2.در قالب سایت و متن مطلب (هرجایی از سایت که از عکس استفاده می کنید) تگ عکس <img> را پیدا کنید و width=”” و height=”” را اضاف کنید و مقادیر بدست آمده در مرحله اول رو در بین “” بنویسید.

نمونه کد

<img src="http://seo.qalebfa.ir/example.jpg" />

را به

<img src="http://seo.qalebfa.ir/example.jpg" width="400" height="300" />

سوالی در این زمینه داشتید در بخش دیدگاه ها بپرسید جواب خواهیم داد.

آموزش بهینه سازی مشخص کردن ابعاد عکس
4.6 - 9

نوشته شده توسط تیم سئو قالبفا در تاریخ 24 فوریه 2013 دسته : آموزش بهینه سازی سرعت سایت