Ways You Can Reduce Page Load Times by Product Photo Optimization

Ways You Can Reduce Page Load Times by Product Photo Optimization

No one wants Google to hate their website. With technological advancements, it is now possible for one to reduce the size of image files in order to improve the performance of their websites. One main problem most people face when formatting image files is that modification do reduce the quality of images which can easily make any visitor to hate your website. However, this is not a bad thing as long as you do not make them look ugly. There are certain techniques and tricks that will enable you to reduce the size of your image file and still be able to keep their quality. We will take you through the process of formatting your image files without affecting their quality together with how you can optimize the images for web and performance. The main goal of formatting image files is to be able to find balance between the acceptable quality and the lowest file. There is more than a single way on how you can perform all the optimizations. Compressing the image files before uploading them to your website is one great method which you can always do on Adope Photoshop.

A huge number of bandwidth usages especially for ecommerce websites do come from images. This means that the size of the image is important in site’s speed. Below are ways on how you can optimize the images to help improve load times.

Type of Files

One of the simplest and fast things one needs to consider when optimizing the image is the type of file. There are types of image files which are only good for specific images. For instance, JPG images are only good for photographic images. PNGs are good for simple images having less color or transparent images. 24 bit PNG are good for images that contain both simple graphics and photographic elements.

There are other types of image formats such as SVG, GIF and TIF which you can also use although the majority of web graphics is PNG and JPG. One basic rule is using PNG for everything while JPG only for photographic. In case you are in doubt on the type of file you need to use, you can try saving your image in both PNG and JPG and compare the file size and quality.

Saving Methods

The method in which you will be saving your image is another important consideration when it comes to image optimization. Most of the applications provide optimization options such as metadata, compression and color profiles when you are saving images. In case you will be using the Adobe Software when editing images, it is advisable that you use “Save for Web and Devices” box whenever you are optimizing the images. You will be able to preview what your images will look like whenever you are using “save for web and devices”. This will make it easier for you to compare how large a file will be when you save in PNG-24, PNG-8 or JPG type of file.

Using the “Save for Web and Devices” will also make it possible for you to convert your photos into a web ready RGB color mode. There are times when you will be working with an image using the CMYK color mode. Since CMYK mode uses four colors (black, yellow, cyan and magenta) while RGB uses three colors (blue, red and green), saving image files in CMYK color mode will add size to the image file. You should consider using RIOT for editing if you will not be using Adobe Software. RIOT stands for Radical Image Optimization Tool. It is a freeware application which makes optimization of GIF, PNG and JPG images possible in windows. RIOT is capable of compressing the images, removing metadata and modifying the color of the image to reduce the size of the image file.

Resizing of Image

It is always better to save an image in the correct dimensions than having browser resize it. In case a browser resizes any 1024 by 1024 pixel photo to 250 by 250, the user will still be downloading the 1024 by 1024 size image. You need to be sure that you are uploading images of the correct size instead of depending on the browser to resize them.

Using a Single Image Several Times

Using same image several times is another way you can use to reduce the bandwidth of the image. For instance, you can use the same header, same menu image and logo on every website page. This will mean that users will only have to download the image once and their browsers will be in a position to display the images.

It is also possible to optimize some of the background images in a similar way. For instance, in case you are using a textured background, you will be in a position to create repeating and smaller images instead of a single and large photo.

Preloaders and Sprites

Using CSS sprites is another great way to help reduce the load time. CSS sprites simply refer to CSS codes that display piece of a larger photo. People use this method in mouse over states on buttons. Although menus and buttons frequently use sprites, you can also use sprites to help display several site images for a single file. This will mean that the browser will only download a single image instead of four or five.

It is also possible to preload images using:

  • Ajax
  • CSS
  • jQuery
  • Javascript

The browser preloads or downloads the image and instantly displays it whenever the user accesses it. Preloading is capable of reducing the number of load times with websites having heavy images.

Using the CSS instead of Images

There are times when failing to use an image at all is the best way of reducing image load time. Developments made to CSS have made it possible for browsers to render images using pure CSS. Generating drop shadows, gradients, transparent images and rounded rectangles is now possible using CSS. However, you need to know that not all browsers support the techniques and you should consider browser compatibility before you replace an image with CSS.


Leave a Reply

Your email address will not be published. Required fields are marked *