Make pages load faster by compressing images

Images can be a huge bottleneck to the speed of your website. Luckily, you can use something called compression that helps them load twice, three times, or even five times as fast. This is super-easy and only takes about 10 seconds per image, but it really makes a difference on the end user experience for your website.

  1. Find a large, slow-loading image on your website, and download it to your computer. Optionally, resize it to a maximum of 2000 pixels in width.
  2. Upload it to TinyPNG.com (which ironically accepts both PNG and JPG/JPEG files).
  3. TinyPNG will compress it; when it’s done, download the compressed version.
  4. Switch out the original image on your website with the compressed one. You’re done!

What’s actually happening during compression?

A great explanation of image compression comes from Reddit:

An image is made up of lots of little dots called pixels. The pixels are assembled in a specific order, and every pixel has a specific color/shade. […] When you have a big image, the image will have a LOT of pixels, and remembering all of the individual pixel details, in order, can make the files big.

 

To make the files smaller, the computer figures out tricks to make the data smaller. If the entire top row of pixels for an image is black, for example, an uncompressed image would have to data read kind of like –

 

BLACK BLACK BLACK BLACK BLACK

 

For a compressed image, the computer would have the data kind of like this –

 

BLACK [x5]

 

Compression can also sometimes simplify small differences to make up for less data. If you’ll allow me to use a word for an example, think of the word “Phlegm.” A computer wanting to simplify that might save it as “Flem,” because an “F” is less data than “Ph,” but makes the same sound, and the “G” is silent anyways. Similarly, when it comes to image compression, it might find two pixels that are really close together and really similar in tone, and it then might “average,” them to share a single common tone.

Basically, compression removes redundancy in the image and causes its 1’s and 0’s to be stored more efficiently. How’s that for awesome?

Hello there, Divi designer!

Designing can be tough, but you can make it easier. Receive four free emails on eliminating stress, using Divi's magical powers to work smarter, raising your rates, and automating the administrative dullness in your practice so you can focus on doing what you love.

Sign Up