Tools

How to Properly Format and Compress Your Images for the Web

How to Properly Format and Compress Your Images for the Web
Written by Magoz
3 min read 18.9k views 21 comments

We upload a lot of images to the web, and sometimes we don’t pay enough attention to how we are formatting them.

The file format we choose is crucial. It will determine the file size and the image quality.

Today I’m going to show you a couple of tools and rules I use to improve the result of the images I upload to the web.

Choose the Proper Format

There are dozens of different image file formats, but we could say that there are three major image categories for the web: PNG, JPG and GIF.

  • PNG: Flat illustrations and social networks
    If you create flat illustrations with a few colors, as I do, use PNG. You will get the lightest files and the best quality of image. Also use it for Facebook and other social networks since they compress the JPG files very poorly. With PNG, your image will always look good.
  • JPG: Photos and complex images
    For all other kinds of images, use JPG. It works better than PNG on complex images with a lot of colors. Don’t use it for social networks. Use PNG instead; see the previous point.
  • GIF: Only for animated gifs
    Don’t use GIF for anything else.

What is Lossy Image Compression and Why Should You Use It?

Using lossy image compression correctly allows you to minimize the file size of any image without losing any noticeable quality. Minimizing the file size means a faster and more effective website in terms of usability and SEO.

Depending on the kind of image, you can expect something between 10% and 40% size reduction.

Compressing your images properly will ensure your images look good anywhere you upload them.

I use a couple of free apps to compress the images that perform better than any other software I’ve tried.

ImageAlpha

It only works for PNG files and has several options but the defaults do a marvelous job.

Open the image you want to convert and save the new version as a new file.
ImageAlpha is free and is only available for Mac.

ImageOptim

I use it for all image file formats other than PNG and also when I want to compress multiple images.

Drag or open the images to ImageOptim and it will automatically replace your original image with the lossy compressed one. Works like magic.
ImageOptim is free and is only available for Mac.


UPDATE: In the comments, Clara pointed out two new options that work even better: Tinypng and Tinyjpg . They work online, so you don’t need to install any additional software (but they also have Photoshop plugins available). Thank you Clara!

Conclusions

Using the proper format and compressing the images we upload to the web is very important to optimize their performance.

This is especially important when uploading them into our portfolio or publishing them on Facebook, Instagram, or other social networks.

PS: My online course Strategy & Business for Illustrators is now available for pre-order!

Magoz

Nomadic illustrator. Thinker. Seeker.

21 comments

  1. Hi Magoz, very useful tutorials. It’s a pleasure also to see how you work.
    I think however that your definition of lossy compression is innacurate: to shrink a file without losing *any* quality/information you would use lossless compression. Of course it’s possible to use lossy compression without having visible effects, which I think was your point.

    • Hi, Bruno! My pleasure to have you here.
      You are right, after reading the definition again, I find it inaccurate.

      What do you think about this one?
      Image lossy compression is minimising the file size without losing any noticeable quality.

      Thank you for your feedback

  2. I’d say

    Image lossy compression is minimising the file size without, *if done well*, losing any noticeable quality.

    But now it’s a terrible sentence! Those nitpicky commenters ruin everything :)

    • I tweaked it a bit and ended up with this one:
      Using lossy image compression correctly, allows you to minimise the file size of any image without losing any noticeable quality.

      I think it’s much better now. What do you think?

      Many thanks for your help Bruno!
      You and all the other commenters are adding incalculable value to the Blog! I couldn’t be more grateful to you.

      (I’ve edited your comment to include your correction)

  3. Ei, crec que no van els links!
    Moltes gràcies per tota la info que vas penjant :-)

    • Hola Paulapé, un plaer tenir-te per aquí!
      A mi em funcionen tots, quins no et van?

      • Ep! Un gust llegir-te :-D
        No em van ni el d’ImageAlpha ni el d’ImageOptim :-S
        Ara em miraré el que has ampliat ^^

        • He comprovat a diferents navegadors i els links funcionen.
          Has provat de esborrar la caché? (Alt+cmd+R si estàs a Chrome)

          Una abraçada!

          • Pff, en Firefox em segueix mostrant una ruta bizarra (amb l’adreça del bloc abans).
            Res, no em faces cas, que serà alguna cosa meua…
            En qualsevol cas, tot apuntat!

  4. Hi Magoz,

    another couple of good tips :) Do you know this app http://www.jpegmini.com? I think it works great, the trial version has the limit of 20 photos per day.

    • Hi Hugraphic! Thanks for your comment.
      I tried it in the past but the results were better with ImageAlpha and ImageOptim (more compression without loosing any noticeable quality).

  5. L
    L A C L A R A

    Hola Magoz y lectores,

    En mi caso, prefiero no instalar más software en mi ordenador y recurro a las webs https://tinypng.com/ y https://tinyjpg.com/ para reducir al máximo los archivos para web.
    Son muy útiles, la verdad, aunque requieres de una conexión que no siempre tendrás.

    Magoz, admiro tu capacidad para expresar conceptos mediante la ilustración que, en mi opinión, es el mayor desafío. También te felicito por este nuevo blog, y por explicar tus métodos de trabajo. En un océano de textos e imágenes creas contenidos interesantes.

    Adeu!

    —-

    Hi Magoz & readers,
    I prefer to avoid installing more software on my computer and I am currently using https://tinypng.com/ and https://tinyjpg.com/
    They work so well and you can reduce a lot the size of your files without loosing quality. But, of course, you’ll need internet connection.

    Magoz, I admire your capacity to express concepts trough illustration, in my opinion, that’s the biggest challenge. I congratulate you as well for creating this blog and show your work methodology. In this ocean of texts and images, you are capable of creating interesting contents.

    Adeu!

    • Thank you very much for commenting and for your kind words, Clara!
      I’m happy to hear you embrace minimalism regarding the software you install, I do the same.
      I only keep installed my essential apps.
      And for me, those two small apps are indispensable, so they have passed the filter.

      Mainly because the following reasons:
      – I use them almost every day.
      – I’m traveling and the internet connection is not always available.
      – The results I get with them compressors are much better than any other I’ve ever tried.

      Thanks for commenting and sharing your thoughts with us!
      Hope to see you again in this island in the middle of the ocean :-)

      (I reply you in English to allow more people to understand my answer).

  6. L
    L A C L A R A

    Hi again.
    Yes, it’s true that some software must be travelling with you when you are offline.
    I have to say I’ve done a test compressing one image with both softwares and the results are:
    –Original image: 180 KB
    –Compressed with ImageAlpha: 66 KB
    –Compressed with TinyPng: 53 KB
    ( the image looks exactly the same in all 3 cases)
    The same happened between ImageOptim and Tinyjpg.

    Conclusion: I will continue using those online tools, but I have downloaded your recommendations for offline days.
    Thanks!

  7. Thanks Magoz and thanks Laclara. Before this article I had always used straight Photoshop without giving it a second thought. Looking forward to trying the new tools.

  8. HI Magoz, I love your graphic work! Forgive me if you’ve answered this above, but can you just save for web in the formats suggested in Photoshop or is it much better to use the apps such as tinypng.com instead? Thanks for the info!

    • Hi Lana, sorry for my delay replying, I’ve been traveling.

      Tinypng works much better than the Photoshop’s Save for Web option.
      What I do is combining both options to get the best results:
      – First I export my image with Photoshop using the Save for Web.
      – Then I use Tinypng.com

      You can run your own tests, but in my experience this is the best workflow.
      Hope it helps!

  9. Although this blog is over a year old. We would like you to know we used to save images using Photoshop (Save for Web). After finding this article we’re using tinypng.com. Compression is much better. We love it! Thank you for sharing this blog.

More from Tools