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?
HTML Email Development Tools
Would you like to improve your HTML email development workflow and learn about new developer tools? This article series is for you.Read more
Git Branching Workflows in SaaS Development and the Review ASAP Policy
This article shows you a git branching workflow which helps developers to review changes frequently, leading to better code quality.Read more
Tabular Data Representation in Modern HTML Emails
Responsive tables are the most common ways to represent tabular data in HTML emails. Learn about the best practices and the card layout design approach.Read more