Why Do I need to optimize Images on my Website?
Then Simple and most basic reason is for improving website SEO and load the website faster. The faster the websites is loaded the more SEO traffic you can expect.
How to reduce the load times of pages by loading appropriately sized images.
Diminish file sizes based on where images will be displayed.
Resize image files themselves instead of via CSS.
Save files in appropriate format depending on usage.
Cost benefit ratio: high value
Access needed
90% of most websites are graphics dependent and therefore there are a lot of image files. Leaving these images uncompressed and in the wrong format can drastically slow down your web page load times. So it’s important to optimize your images.
Optimizing images for the web
The images create using programs like Photoshop and Illustrator look amazing but often the file sizes are very large.
This is because the images are made in a format which makes them easier to manipulate in different ways.
With file sizes upwards of a couple of megabytes per image, if you put these files on your website it would be very slow to load.
Optimizing your images for the web means saving or compiling your images in a web friendly format depending on what the image contains.
Images hold data other than just the pixels we see on the screen.
This data can add unnecessary size to the image which leads to longer load times as the user waits for the image to download.
In terms of cost versus benefit optimizing your images should be near the top of your page speed optimizations if you don’t have them optimized already.
How it work?
Optimizing images for the website can reduce your total page load size upto 80%.
There are two forms of compression that we need to understand, Lossy and Lossless.
Images in a lossy format will look slightly different than the original image when uncompressed.
Keep in mind that this is only visible at a very close look. Lossy compression is good for website, because images use small amount of memory, but can be sufficiently like the original image.
Images in lossless format retain all the information needed to produce the original image.
For this reason these images carry a lot more data and in return are a much large file size.
Can you imagine take a poster size image and using it as a thumbnail? The little 20px by 20px image would take as long to load as the original poster, when we could just be loading a 20px
We can also optimize images for the website by saving them as the appropriate dimensions.
Resizing the image on the webpage itself using CSS is helpful but the issue is the web browser will still download the entire original file, then resize it and display it.
Optimize Your Images
Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.
Reduce the white space around images – some developers use whitespace for padding which is a big no no.
Crop your images to remove any whitespace around the image and use CSS to provide padding.
Use proper file formats –
If you have icons, bullets or any graphics that don’t have too many colours use a format such as GIF and save the file with lower amounts of colours.
If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
Save your images in the proper dimensions.
If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
To resize your images you will have to use some form of program.
For basic compression you can use a simple editing program such as GIMP.
For more advanced optimization you will have to save specific files in Photoshop, Illustrator or Fireworks.
Tools PageSpeed use to test this recommendation –
- For JPEGs: libjpeg-turbo
- PNG/GIFs: OptiPNG.
