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

  • A Step-by-Step Guide to Sending Emails with PHP A Step-by-Step Guide to Sending Emails with PHP

    In this comprehensive guide you will learn the ins and outs of sending text and HTML emails with built-in packages and email delivery services using PHP.

    Read more
  • How to Use a Templating Language in HTML Email Development How to Use a Templating Language in HTML Email Development

    Shorten your development time with templating languages. EJS and the new JavaScript ES6 template strings can reduce the pain of responsive email coding.

    Read more
  • CSS Inliner Tools Worth Considering for Your Next Email CSS Inliner Tools Worth Considering for Your Next Email

    I hope you have never tried inlining CSS to your email code manually. Thankfully there are several CSS inliner tools. Check out their pros and cons.

    Read more