Optimizing Images for the Web

written by
Chantel Keith

How to optimize images for the web

In the fast paced modern web world, you only have a few seconds to make a positive first impression on your website’s visitors which means your website’s pagespeed is very important. Studies have shown that 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load*. It isn’t easy to achieve this level of website performance and it’s even harder to maintain it.

Because there’s a direct correlation between image optimization and pagespeed, we’ve found one of the easiest and fastest ways to keep your site loading as close to light speed as possible is to optimize your website’s images. Whether your website has one or many images, the larger each image file is, the longer your web page will take to load. Below are three ways to keep your image sizes down and your pagespeed score up.

1. What image format should I use on my website?

The three most popular file types for images on the web are JPG, PNG, and GIF. Each of these formats has its strengths and weaknesses. Depending on the contents of your image, you’ll want to carefully choose the correct image format to keep your website performing at its best.

• JPGs or JPEGs are the most common image format used on the web, typically for product images, hero banners or photography. They can be saved at various quality levels ranging from low to high quality, boasting smaller file sizes at the expense of loss in quality. When using this file format, we recommend saving images at 80% quality.
• PNG is another common image format used on the web. Although it can be used for photography, the file sizes tend to be much larger making JPGs a better choice for this purpose. However, one key feature of the PNG format is its ability to save transparent images, making it a great option for icons and logos.
• GIFs are most popular due to their animatable ability. They’re commonly used for small animations and low resolution video clips. Because of their limited color set, they are also suitable for icons or logos but would not be recommended for product or banner photos.

2. What size should my website’s images be?

The bigger the image, the greater the file size. The size of an original high-resolution image can be up to 3 MB or much larger which is HUGE and equivalent to the average size of entire web pages. Slap two or three of these onto your webpage and watch your pagespeed score take a nosedive. Your image’s dimensions should only be as large as the container or space it needs to display in — your web developer or administrator should be able to provide these specifications to you.

For responsive, full-width images in hero or banner containers, we recommend keeping them between 1500 and 2500 pixels wide. This will prevent the image from getting too pixelated or blurry when stretched to fill containers. To ensure that images which are not full-width will display optimally on retina screens, you’ll want to save them at twice the size of their respective container — this is especially important for PNGs and GIFs. Our modern web builds here at 300FeetOut will then process the original image files you upload to save copies in multiple sizes & ensure each image is displayed at the smallest appropriate size on every visitor’s viewport throughout your entire website.

For overall image file sizes, we recommend keeping each image below 500 KB.

3. How to compress images for the web

The easiest way to reduce the file sizes of images is to run them through an image compression app. These tools remove bloated metadata in the image file, like comments and unnecessary color profiles, without compromising the image quality.

Our favorite image compression app to use is ImageOptim; however, there are several other free tools to choose from such as ShortPixel, TinyJPG or Compressor.io.

These three optimizations mentioned in this article will guarantee an improvement in the performance of not only your images, but your overall website as well. And the great thing is you’ll get a lot of bang for your buck! It only takes a few minutes to perform the steps above which will in turn help maintain or even improve your pagespeed score as a result. Google — and your website visitors — will be very pleased.

Sources:
* How Loading Time Affects Your Bottom Line via KissMetrics.com

• Technology