How to optimise your images for a Website

Images are one of the biggest factors in speeding up your site. I have come across some lovely looking sites that take ages to load because of the actual size of the images that the browser needs to download.

As a rule of thumb, you don’t want them to be larger than 500kb (for really big images such as full screen images at 1920px wide) – you want to aim for 200kb or lower on all other images.

So how do we get our images smaller without losing image quality?

First we need to look at the types of images you can use:



  • 256 colours.
  • Uses lossless compression.
  • Supports transparency.
  • Can be used for small animations.


  • Oldest format for web – 1989.
  • Not great quality on more detailed images.
  • Bitmap format – on mobile and 4K screens it won’t be pin sharp as an icon or logo.



  • 256 colours (24bit).
  • Suitable for high quality images.
  • Uses lossless compression.
  • Smaller file size


  • Does not support transparency
  • Creates bigger file size for smaller images/icons.



  • 256 colours (using 24 bit).
  • Uses lossless compression.
  • Most cases is smaller file size than a GIF.
  • It has alpha channel transparency which is more advanced than a GIF.


  • Avoid using with photo’s or images without transparency as generates large file sizes in comparison to a JPEG.
  • Bitmap format – on mobile and 4K screens it won’t be pin sharp as an icon or logo.



  • Unlike the rest, SVG is not a pure bitmap format. Instead it is a vector format.
  • SVG is pin sharp on mobile and 4K screens.
  • Best suited for displaying: Logos, icons, maps, charts… Anything that can be vector.
  • You can animate SVG


  • Cannot upload to WordPress using the default upload function. (however there are plugins that can do this for you).
  • Cannot display a picture (such as a photograph) as a SVG as it is not vector. (well you can but there really is no need to do this with Divi).
So looking at the above I would recommend the following setup.

  • Logos, Icons, charts or anything that is vector graphic: SVG
  • Images such as photographs: JPEG
  • Images that need a transparent background but are not vectore: PNG
  • Animated vectors: SVG
  • Small animations: GIF

Vector/flat graphic image size & quality examples (uncompressed)

save for web gif
GIF (14kb)
save for web jpeg
JPEG (64kb)
save for web png
PNG (15kb)
save for web svg
SVG (5kb)
Looking at the above we can learn:

  • JPEG is not the best option for flat graphics or smaller files. As you can see it is the largest out of them all.
  • JPEG, GIF & PNG image quality is inferior to the SVG when it comes to vector (flat) graphics.
  • SVG is the smallest file size and perfect quality on all devices.

Take a look at these images on your mobile or 4K screen to see the real difference.

Photography image size & quality examples (uncompressed)

save for web gif picture
GIF (311KB)
save for web jpeg picture
JPEG (337 kb)
save for web png picture
PNG (691 kb)
Looking at the above we can learn:

  • GIF although smaller files size is not good at rendering the image – if you look it is distorted in places.
  • PNG file size is double than a JPEG
  • JPEG is the smallest file size whilst still keeping the quality good.

This image is relatively small in comparison to what you would use for background images. You can imagine how big a PNG would be if the physical dimensions of the image was bigger.

So how do I export my media to be the smallest file size but keep it looking sharp?


I have started with SVG as this is the easiest. SVG doesnt need to be “optimised” as it is essentially HTML code. You can pick up premade SVG graphics online such as – Just choose your icon, click download and select the SVG format.

If you are handy with Illustrator, you can export your logo or icon as an svg that way. In Illustrator go to: File > Export and select SVG. Click export and away we go!. For more help see:

One thing to note is that in illustrator you can set the size of your SVG with your artboard. Alternatively you can set the size in the SVG code itself or use CSS to set a width of your SVG image.


Jpeg as mentioned above is the preferred option for large images or photographs. I use photoshop for my images so will be talking about the process using this. However if you use another image software, the export process will be similar – just pay special attention to how I optimise the file after it has been exported.

Step 1 – save the image:

In photoshop, make sure you have set the image size to be the same size as it is displayed on the site. For example the width of the box layout of Divi is 1080px so if you want an image to be the size of the page (not full width though) – set your image width in photoshop to be 1080px and 72dpi. In case you were not aware, 72dpi is used for web.

Once you have the image size right, click File > Export > Save For Web. Alternatively you can use the keyboard shortcut. PC: ctrl + alt + shift + s | MAC: cmd + opt + Shift + s.

Once the save for web window opens you will get a couple of options. I would recommend setting the quality to 80 as this reduces the file size without affecting the quality of the image.

Step 2 – compress the image:

I then compress the image further using one of two software.


For a free option I would recommend – Just upload your image and download the compressed version. This online tool compresses your image a lot but sometimes can mess up your quality so just check afterwards.


For the paid option I use JpegMini – it doesn’t reduce the file as drastically as compressor – however allows you to compress multiple images in one go and doesn’t affect your images at all. You can add 100 images and make a cup of tea, come back and you will know that the image quality won’t be affected.

Step 3 – Remove excess data

After this I then use File Optimizer to remove any excess data. During this step you won’t see the biggest amount of file size reduction, however I believe that the more you have the better when there are 100’s of images on one page.

Once you have done the above three steps – your image will look the same but will be much smaller in file size.

pre compressed jpeg
Uncompressed JPEG (337kb) – 1080px x 600px
compressed jpeg
Compressed JPEG (145kb) – 1080px x 600px


Unfortunately png is not that flexible. Just save it from Photoshop with a transparent background as png24. Once saved you can use some online tools to compress them but I have found that they can ruin the image especially if you have a drop shadow on the image. But give it a go and see if they work for your image. This is why I only use png if I need to !.  Give Tinypng a try.

I hope you have found this useful. If you have any questions or need further explanations on an area you are unsure of, let us know and we will update the post with more information regarding this area.

Any suggestions or additions – again let us know – we love to learn!


  1. What’s the reason to not use Photoshop to compress the image more than 80%? It would save an extra step, so you must have a good reason…

    • Hi Cheryl, Sorry for the delay in replying. I found that I got the same result at 100% and 80% using the compression software. If I was not using them I would, in fact, use 80% as there is no real noticeable difference in the quality but smaller file size than 100%. However, because I am using the software to minify them it doesn’t matter.

      What do you think?

Submit a Comment

Explore more from Divi Engine