Reducing Image Size on Websites

Images are nearly always the largest item on a page and if you have icons for “contact us” and “home”, a company logo, ticks or crosses, background images etc; all of a sudden you can have an overweight website, rather than a toned athletic one!

Reduce Image Size: there are a number of ways of doing this, if you are using a more advanced piece of software there is likely a “save for web” option in the file menu which will usually reduce file size significantly. Trimming the height and width of images will naturally reduce the image size. Some programs will actually attach software specific data to images hen you save them; opening and then saving an image file with Paint for example will strip this information away reducing file size by as much as 25% in some cases.

Quality of Images: There are various tools that can be used to compress images or reduce image quality, which in turn reduces file size. These should be used with prudence because reducing image quality can be a large trade off; for instance if the image quality is reduced too much it will look unprofessional.

Use the Correct Image Format: Jpegs are great for photos or high quality images, but for icons or flat colour images a GIF or PNG will be better. The PNG file format has greater scope for colours and as such will usually be a bigger file.

Frames: using image frames can save on server load which can reduce the website’s speed. A frame is essentially a link to the location of an image which can be stored on another server or domain. Used incorrectly and Frames become the nemesis of SEO, but used properly Frames can help to reduce load times.

Proper Use: if you have an e-commerce site and as a result have thousands of product images, thumbnails, full size high quality Jpegs showing different angles etc; this will put strain on the server hosting the site. So you can use a frame in place of an image, the frame simply points to the image.

The benefit of this is that the page will load as normal but images will be loaded form another server, the page will look as it should even before the images load and loading times will be reduced because the server hosting the site will be running faster.

Improper Use: Using one large frame which essentially is the website, this will mean that your website will likely never be indexed because it effectively doesn’t exist on that domain.

Define Image Parameters: Setting the image’s width and height on page will help to reduce load times. Setting this will mean that the browser knowing in advance the dimensions of the image will reserve a place on the page for it.

Zipping and Compression: There are tools such as Smushit that are lossless zipping tools, these do not reduce image quality but instead provide you with a zip file for each image which should replace the original on your hosting server. This will increase website load times significantly.

View on Koozai.com