Reduce from 300 dpi to 72 dpi

Designers tend to work in 300 dpi, but for web 72 dpi is usually enough. This way you can significantly reduce the file size of your images and still have a clear-looking illustration.

The hard part comes with 72 dpi images when you want to resize them, since you may end up with blurry or uneven images. There’s a workaround to handle this issue though. Before you resize the image switch to a greater bit-depth for example from 8 bit to 32 bit. Do the resizing in 32 bit mode, and switch back again to 8 bits. This technique will help you to reduce unwanted distortions and blurriness which may occur when resizing 72 dpi images.

How to optimize image size for responsive emails

Optimize image width for 600 px

Our research shows that 600 px is still the optimal width for responsive emails, so it is for images in them. Just memorize this number and always try to add images which are 600 px wide, even in case multi-column structures. Why?

  • The total width of your email template is 600 px, so if you have a one column layout, this is the width your image should fill in.
  • If you have a three column layout, still use 600 px wide images, since after reordering on mobile, they can be stretched to the mobile screen! 200 px wide images wouldn’t be able to fill in the mobile screen after reorder, but your 600 px wide images will look good!
  • Don’t worry there’s no need to use small icons in 600 px width. You can switch off the reorder on mobile function in EDMdesigner. Note: small images (less than 241px) are not stretched to the screen in our editor.

Smush.it! – Reduce file size

Smush.it is a handy little tool which helps you to optimize file size by removing “unnecessary bytes” from the image files. This tool works with any image file and may also help you to optimize your whole website’s image content. It’s definitely worth a try!

Do you have any tips to add?

Author
Roland Pokornyik

Roland Pokornyik

CEO / Co-founder @ Chamaileon.io & EDMdesigner.com

  • Visual Email Testing with Developer Tools, Litmus and Email on Acid Visual Email Testing with Developer Tools, Litmus and Email on Acid

    Have you ever struggled with email testing before? The browser developer tools, Litmus and Email on Acid can help you. See how to use them together.

    Read more
  • How to Use JavaScript for Creating HTML Email Layouts How to Use JavaScript for Creating HTML Email Layouts

    Does it take you 1+ hour to code an HTML email template? Maybe it's time to reconsider your workflow. Learn how to create email layouts with scripts.

    Read more
  • How to Use Sublime Text for HTML Email Development How to Use Sublime Text for HTML Email Development

    Do you want to cut the development time of your next HTML email template in half? Streamline coding productivity with Sublime Text's greatest features.

    Read more