Website performance is one of the biggest factors that separate bad websites from great ones. Considering 47% of users expect a site to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load, it’s important to ensure a quick page render. A key element in your site’s performance is how well optimized your images are. Images likely account for the primary of your sites downloaded bytes. As a result, making sure each image on your site is optimized correctly can yield fantastic results when it comes to largest byte savings and performance improvements. The fewer bytes there are to download, the less competition there is for the users bandwidth and the faster a browser can render the page to completion.
Having clean, high resolution images is important for any website, and especially eCommerce sites where a client needs to see what they are purchasing. But high resolution photos are accompanied by massive file sizes. These file sizes take longer to load, and as a result you will see your sites bounce rate increase. Slow loading images negatively affect your SEO, as well. So finding the right balance between quality and performance is both an art and a science.
Let’s go over a few things to keep in mind when you are ready to start optimizing your images.
File Type Options
When it comes to web images, there are 2 main types to focus on. Each has it’s own pros and cons. These are very important to think about when saving any image.
JPG
By far the most popular file type for images. JPGs are the optimal choice for things such as: photos, complex images with multiple colors, gradients, or complex patterns. JPGs handle these types of images the best because it offers up a much larger color pallet to work with.
JPGs also give the user the option to save their image in a range of different quality options, from Poor to Very High. This gives the user a great way to balance quality and performance.
PNG
The primary reason a user would use a PNG is if they are wanting a file type that can handle transparency. This is the biggest differentiation between JPGs and PNGs.
PNGs have two option for quality: PNG-8 and PNG-24.
PNG-8 has a limited pallet of only 256 colors. This option provides a smaller file size, but is not recommended for complex images.
PNG-24 provides a higher quality images, but at the cost of a larger file size.
Properly Saving Images
Here are three things you can do to properly optimize your images for your site.
1. Save The Right Dimensions
If you know you are only going to want a specific image to be a certain size on your site, it is best to open up the image in Photoshop, or any other photo editing software, and resize the image to be near the size you are wanting. Just resizing an image with CSS will not affect how large the file is. It may only appear as 500px by 500px on your site, but if the file size is 2000px by 2000px it is going to take just as long to load.
2. Save for Web
It is entirely possible to reduce your images file size without sacrificing quality. The most effective and easy to perform method is to open up the desired image in Photoshop, click on “File” > “Export” > “Save for Web”. A new window will appear and will provide you several options for file type and quality of how you would like to export the image.
3. Compressing Images
Another great method for optimizing your images is to user a third party app. There are several available, and most are free. These tools will go through your image file and remove additional unneeded information such as color profiles and metadata. Several popular options are: