JM
6
Designing for Retina
Curious to find out how other email designers go about designing retina ready emails.
Currently, my set up is design the email within Photoshop and export slices for HTML build. However, considering making some key images in the email retina ready, so doubling the dimensions of them.
Would I be better off designing as I do, and then picking out the assets that I want to be retina ready. Or design the entire email as retina ready? But only save the slices that I want to be retina ready at those dimensions and reduce the size down of everything else?
Just thinking that I might have to change my design workflow for this!
One technique that's being used more often now is compressive images. You can essentially scale the image to 4x and save the image at 0 quality to save on file size but still have the same quality. I personally haven't explored this much yet but I know Fabio Carneiro of MailChimp has used this with success. Here are some articles on the technique:
http://www.vanseodesign.com/web-design/compressive-image-tests/
http://gogrowstrategies.com/compressive-images/
http://filamentgroup.com/lab/compressive-images.html
Oh interesting, never even thought about it that way.
Great articles. One thing that caught my eye from the Vanseo Design article is most of the comparisons are looking at 0% v's 100% quality but for web you're more likely to save at around 60% quality.
I don't think this technique will save you any file size but it looks like a good way of delivering better images to retina. Will have a play around with it sometime soon.
Yes but how do you keep retina images from breaking Outlook ?
Setting the image height and width with the HTML attribute should fix your Outlook woes i.e.
<img src="..." height="200" width="600">My workflow goes something like this (if it helps at all):
1. Design emails @1x, using vector and smart objects where ever possible.
2. Code emails using @1x assets. This locks in the image dimensions I want.
3. Go back and recreate/scale-up image assets @2x (or even @1.5x since it saves files size and looks almost as good).
Emails I work on are usually a mix of images and HTML content; not sure how this would work with an image-heavy design.
Didn't think of just scaling @1.5x actually. Might be a better shout for me too.
I realize this post is kind of old but in case someone else is looking for a solution, I design in Photoshop at 1x using all smart images. Then use Photoshop's built-in generator to save images out for Retina. It's super fast and doesn't add any time to my work flow.
Hi Jaina - we tend to design emails at double res and then save out the imagery at a low compression size. Alternatively you could save them out at maximum resolution and then use https://compressor.io/ to bring the file sizes down.
IMHO, design the entire email as retina-ready.
I was leaning in that direction.
Our designers and developers usually make our emails retina ready. :)
Maybe this helpful photoshop plugin can help you out? Very easy to create retina images of layers in photoshop.
http://retinize.it/
I wrote about the technique here.
https://www.displayblock.com/2014/11/21/create-hi-res-retina-images-email/