Image formats, jpg, webp, and auto/manual conversions

Hello again everyone!

I have another quick question for you, on optimization again.
Now, I love PNGs, I really do, but we all know the huge difference in size compared to a jpg, especially when we don’t care for transparency. So I was going through my site again, trying to optimize it, and I thought well why not convert everything to WebP myself using Pixelmator (love it; I hate Photoshop) then import the files to my existing project and swap all the images manually.

  1. Blocs wouldn’t allow me to choose WebP images for some places (for example: carousel slices). I thought, OK maybe it’s for my own safety that it doesn’t let me. For fall-back reasons.

  2. Then I thought I should convert all non-transparent images to jpg. Again using Pixelmator. Now I noticed this: If I Export as jpg (quality 70%) I get let’s say a file size of 300KB. However, If I choose Export for Web (70%), the image is much much smaller! I got images from 400KB to 60-65KB. And opening them side by side with the originals, I can’t say I notice too much loss, and I doubt casual visitors will notice anything either.

So, please advise me if I’m doing it right:

Original jpg/png —> Pixelmator, Export for Web (70%) as a jpg —> Use in Blocs —> Export Project (my choice for WebP quality is 90) —> and upload it all.

When Blocs will convert the files to WebP, will there be a problem since I’d be feeding it an “inferior” image file? I read online that “exported-for-web” images lack lots of information and are converted to sRGB. Is that OK?

Thank you all for your time!

Hi,

Export for Web in Pixelmator is the perfect tool for optimizing images for the web. It strips some irrelevant details, and as you mentioned, you won’t notice any difference in quality.

So, my advice is to use optimized JPGs for most images + Optimized PNGs for images with transparent backgrounds, SVGs for logos and custom illustrations. Then, when exporting in Blocs, use the Convert to WEBP feature. This way, Blocs will automatically create the fall-back versions for older web browsers and optimized WEBP images for everything else.

Cheers,
Eldar

2 Likes

@Eldar thank you! Will do as you said!