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?

PNG

Pros:

• 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.

Cons:

• 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.

 SVG

Pros:

• 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

Cons:

• 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).

• 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)

• 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)

• 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?

SVG

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 https://www.flaticon.com/ – 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: https://helpx.adobe.com/uk/illustrator/how-to/export-svg.html

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

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.

FREE

For a free option I would recommend  Compressor.io – 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.

PAID

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.

PNG

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.

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