I recently asked a colleague for advice about what resolution to use to support the needs of today’s high pixel density displays. They said to always make vector assets 2 times the dimensions that they will display on screen. So if a vector image display size was 100px, the natural size of the svg asset should be 200px. For jpegs used in an email, it’s also best to make them 2x larger than the display size to look good on ‘Retina’ displays.  To aid content contributors, it’s best to suggest a minimum size for images uploaded to a CMS so photos will still look crisp on high-density displays & devices.

Also, when embedding svgs in webpages it’s good to include a fallback .png for old browsers or those that don’t yet support svgs like in this example:

<img src=”your-fallback.png” srcset=”your-svg.svg” alt=”Your alt text here” />

Thanks to University Marketing for providing this advice.

Here are some articles related to addressing image resolution needs for high pixel density displays:

Optimising for High Pixel Density Displays –

Optimizing for Large-Scale Displays – From 4/9/16

High DPI Images for Variable Pixel Densities – From 8/22/12

How to optimize images for Retina and high density screens – From 6/15/12

Designing for Retina Displays, Optimize Website for @2x Images  – From 2/13/13

Formatting your images for display on the web – From 7/20/17 – Squarespace suggests that images uploaded to their website service be between 1500 and 2500 pixels wide. Their service creates seven variations of each uploaded image, to ensure ‘perfect display’ on any screen size.

Here are some articles about image display in Emails for high pixel density devices:

Keep High-Density Displays from Uglifying Your Emails – From 6/12/12, from MailChimp

University Marketing advice about responsive emails – From 4/28/15