How to Compress Images for Websites

compressing images for websites

Always Optimize Images before Uploading to a Website – Here’s Why

To ensure a website provides a quality user experience and performs well in search engines, it’s important to deliver a fast-loading website.  
 
Why? Because everybody can agree, a slow-loading website is the W-O-R-S-T.
 
Fortunately, one of the best (and often easiest) ways to improve page speed starts with image optimization.

But before diving into image optimization, let’s discuss page speed in general.
 

Why Page Speed is Important

1.    User Experience: 53% of mobile site visits are abandoned if it takes more than 3 seconds to load.

2.    Google’s Algorithm: Site speed is a ranking factor for SEO and Google is increasingly pushing for fast loading sites.

It’s undeniable a fast-loading website is a key to online business success.  

What Happens When Images Aren’t Optimized

Google wants to Make the Web Faster and offers tools such as Google PageSpeed Insights and TestMySite.

These tools take image optimization seriously and will sometimes give a 0/100 score for page speed when there are heavy, un-optimized images. Oftentimes, the site might have an exceptional TFB (time to first byte) and visually load quickly, but still receive a very low score due to the poorly optimized images.

For example:

google page speed insights blog image

slow pagespeed blog image
 
This website had a satisfactory TFB; but received a score of 0/100 on Mobile and Desktop mainly due to a 6 MB image in the homepage slideshow.

When to Optimize Images

Always!  While some Content Management Systems have built-in image compression, most do not.  Any time a new image is loaded to a website, it’s important to optimize accordingly.
 
Please note: Built-in image re-sizing (changing the dimensions or height and width) is different than built-in image compression (changing the ‘weight’ or file size itself).
 

How to Optimize Images

Before uploading an image to a site, check the size of the file (right click on the saved file and view properties). If it’s over 1MB, it can likely be saved as a more condensed file size without sacrificing the quality of the image.  Aim for under 500KB, ideally under 100KB.
 
image properties example blog image


Image Compression Tips Include:

•    Save as 72.0 PPI resolution.
•    Use ‘Save for Web’ in Photoshop
•    Save as a JPG for photographs
•    Save as a GIF for images with large blocks of flat color

Tools to Compress:

  • Photoshop
  • Paint.net
  • Google PageSpeed Insights (after scanning the site, there’s an option to download the optimized image).
  • Web based tools:

Additional Resources

Check out these Image Optimization Web Fundamentals from Google.
 
Or read ‘How to Improve Page Speed for Your Website’ for more tips on page loading optimization in addition to image compression.

Thanks for reading and don’t be afraid to reach out with any questions!

Contact_US_CTA

Write a review

Authors

  • Steven LaGow Blog Author
  • John Parker
  • James Grergory
  • Ellis LaMay Blog Author Image
  • Mani Blogger Image
  • Elin-Alexander
  • David-Dillon
  • Ahmed Okour
  • Paul-Ross-Blogger-Bio-Pic
  • Rachel-B-Web
  • Courtney-V4
  • scottstiles
  • stu-3
  • Joseph Gustafson
  • Vince Scarlata
  • Tim Ahlenius
  • Staff Blogs
  • shawn griffin blogger image
  • Americaneagle Partner
  • Nick Goodrum
  • Missy Hildebrand
  • corte-swearingen-director-ab-testing
  • Emily Stark