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

  • Beginner's Guide to Using Sass in Email Coding Beginner's Guide to Using Sass in Email Coding

    Do you repeat bits of CSS code across email template projects? Learn to use the Sass preprocessor language to change that and design reusable components.

    Read more
  • Open Source Email HTML Modification Tools for Email Developers Open Source Email HTML Modification Tools for Email Developers

    Grab these free & open-source HTML code modification tools created by EDMdesigner specifically for email coders.

    Read more
  • Managing Full-time Employees at a Growing SaaS Company Managing Full-time Employees at a Growing SaaS Company

    In this article you can read about how an early-stage startup can overcome management difficulties with the SCRUM methodology and the pomodoro technique.

    Read more