Page Load Time: Start Optimizing Website Images

There is a saying that a picture is worth a thousand words, but in web development, it can be a thousand kilobytes or more which can drastically impact website images not loading quickly. Studies indicate that if a page has not loaded within 3 seconds, up to 40 % of the users will abandon the site. The traffic is detrimental to modern businesses and as responsible web developers it is our job to make sure that website is not loading but you should have insights on how to optimize images for page speed.

If the developer is not careful about website images optimization, then they could incorporate megabytes of data into their webpage. There are numerous things that a developer can undertake at the front end of designing and exploring images to optimize the size and load time.

Choice of the right image format

Images are a one-stop solution on how to optimize images for page speed.

• PNG – If you require transparency in an image, then PNG is the best option for website image optimization. PNG-8 and PNG-24 are two types of PNG formats. If there are fewer colors in the images, then PNG–8 will be a better option.
• JPEG – there are a couple of JPEGs progressive and baseline addressing issues of website images not loading quickly. The latter displays images as the data becomes available whereas the former loads the images entirely. For website image optimization with JPEG files try exporting the image as progressive, reducing noise along with the quality levels.
• GIF – for animation and transparency, it is worth mentioning that using transparency in GIF indicates in a heavier file size than PNG. How to optimize images for page speed becomes easy by reducing the number of shades used in an image, enhancing horizontal patterns and reducing the vertical noise.
• SVG – there is another file type worth mentioning addressing issues of website images not loading quickly. Some images and icons can be replaced with SVG and on retina displays they look great. There may be a few browser compatibility issues and the best time to use them is when you have icons or logos that do not have complex patterns or shades.

Using Sprites

If there are images or icons that are made multiple times on your website then you may consider grouping those multiple images into one image or a sprite. This is of considerable help in addressing the issues of website images not loading slowly. Once you incorporate multiple reusable images, into one image you may notice, that the page weight may increase slightly but the load time decreases. 

This happens because we are not making several requests for the images, but rather a single request to the sprite. By using CSS, we can move the image as it is only going to show the part of the sprite that we want to display in a particular element.

CSS alternatives for animations

CSS has matured over the years, and developers and designers can use it to develop animations, gradients or 3 d objects. Though this may beef up the CSS files and cope with the issues of website images not loading slowly. For using a GIF using CSS animations would be a great alternative, as you have more control over animations used in CSS.

Optimizing the existing images

If you are not able to find handy solutions on how to optimize images for web speed there is no need to worry. For optimizing existing images there are various solutions and a few of the favorite ones are as follows

• Kraken.io – it is a personal favorite of mine. It is free to use but for better options, there is a paid service. The free version will allow you to upload MG images and compress them lossy. In addition, the paid service will allow you to resize the image
• Smushit.com – this is a service that is provided by Yahoo. You are allowed to upload images or pull images from an URL to optimize them. It will compress the images, and allow you to download them in a single zip file. They convert JPEG files into progressive JPEG once optimized. Only 1 MB of files are allowed per image.
• Compressnow.com – it allows you to upload 3 MB images to your website. They support PNG, JPEG and GIF files. It is true that you can drag and drop multiple files into the website for optimization.

To conclude in the years to come there would be various breakthroughs in how to optimize pages for web speed. Various breakthroughs in optimization such as HTTP/2 new extensions like welp etc.  Even there are JavaScript tools like lazy loading where images above the fold are to be loaded first. The loading below the fold images as the user scroll occurs. Lazy loading helps you to drop page time significantly and address the issues of images loading slowly.

For developers, the picture element is also a game changer. Rather than serving one size for every device, small-size images can be served and large images for larger devices. Website image optimization is the tip of the iceberg when it comes to web performance, but has a significant role to play.

For more such blogs, Connect with GTECH.