Images are one of the most resource intensive elements on a webpage. It can negatively affect the rendering of a web page as well as one of the major factors affecting the page load speed on your webpages. There are several steps you can take to improve the performance of the images while rendering.
First and foremost, you should optimize the size of the images on your pages.
Image optimization is altogether a different process. There are several different ways you can optimize and reduce the image size before it is published to the website. You can first decide on an optimum size for your image and then optimize it and then serve the scaled and optimized image in order to reduce the image download time.
When the browser renders the page, it may block on elements that it does not have enough information to render. Image is one of such elements, and the browser needs to know the dimensions of the element to render the image. When you don’t specify the image dimension explicitly, the browser have to wait till the entire image is downloaded to compute the width and height of the image or it will need to refresh the page later to render the image once it is downloaded.
Images are considered replaceable elements on the page, because it is possible for the browser to allocate space and layout for the element and continue rendering the rest of the layout and page. This allows the image to be downloaded in parallel without blocking the rendering process. Once the download of the image is complete, it can then be rendered into the pre-allocated slot in the page. This will speed up the process of rendering and page display on the browser.
In order for the browser to allocate the slot, it needs to know the dimension of the element which is the image ahead of time and definitely before the image is downloaded. Thus specifying the image dimensions helps the browser to render the entire page faster. This especially is useful when the images are large in file size and takes a longer time to download.
Once you have optimized the image, specify the dimensions wherever possible…
Images on the page are specified using the img tags in HTML. Depending on how you create and edit your webpages and blog posts, you may not be completely aware of this. Most web and blog editors shield the users from the underlying HTML tags, and you probably just drag and drop images into a slot on the page.
The img tag comes with two important attributes width and height in addition to the other important SEO tags, such as alt and title. You can specify the width and height of the image using these attributes to the tag. In addition to allowing the browser to allocate the element slot in the layout, it also allows you to display an image with the required width and height.
An example of the image tag will look some like what is shown below. You can specify the width and height using any of the units such as em, pixels, percentage etc.
<img alt="" src="/images/myimage.jpg" width="150px" height="10em" />
As with any style tag, you can specify the width in either the HTML or in the included CSS file. As long the CSS file is loaded early in the rendering process, both methods pretty much yield the same results and speedup. If you are specifying the width in the CSS file, make sure that the width is specified for the img tag and not the parent element such as div or span.
In some layouts, especially liquid or free form layouts, it is sometimes hard to specify a dimension up front because the image is supposed to render based on the size of the display screen. You could still be able to specify one of the values, either the width or the height in most cases.
Specifying the image dimension will help with the browser performance, but it does not have any affect on the network optimization. If your image is not properly optimized according to the displayed size, it will still download the entire image. It does not optimize the image file in any way.
