Image quality and size

We have all experienced a site where the images take what seems like forever and a day to download. It’s frustrating and can lead to the user leaving the site. Large images take longer to download and by large I am not referring to the dimensions but rather the file size. It is important to make sure that the images loading on the site are small enough in size to download quickly as the site loads.

“47% of consumers expect a web page
to load in 2 seconds or less.”

 

Images have a way of bringing a user into the story you are telling, or selling a product the user wants. Crisp, high resolution images are a must to give the user a sense of texture and color. But you need to keep in mind the file size when saving your images, as well as, maintaining high image quality.

JPGs are the most common file type for images on the web. JPGs will maintain the colors, shadows and gradients of photos, because they have a large color palette to work with. JPGs can also be saved in several ranges of quality, allowing you to adjust these settings before saving. You are able to balance quality and file size to get exactly what you need.

Three things to reduce the file size of an image

• Reduce Image Size: Image dimensions
• Save Image for Web to Reduce File Size: File size
• Compress Image: Eliminate additional metadata

Using Photoshop, save your image by exporting and saving for web – File > Export > Save for Web (Legacy). Next you will be able to adjust the quality. Usually a quality setting between 60-75% will work best in file size with no noticeable difference in the quality of the saved image. It will sometimes require a little playing around to find the perfect quality to use. For further compression, an easy way to reduce the file size an additional 5-10% is with image compression apps. I use ImageOptim which is a tool that will remove hidden data in the image file. This type of app can remove additional color profiles and metadata that aren’t needed. It’s a quick and easy way to reduce the file size without losing the image quality.