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.
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?
Content Images in Modern HTML Emails
In the last few months I have been following the previous posts of the Modern HTMLRead more
HTML Email Width - Overcoming the 600px Limitation
The de facto standard for HTML emails' width is 600 pixels. But why is that? WeRead more
The Drop Calc Method to Create Responsive HTML Emails
Originally I was going to write an article about the different techniques which you can createRead more