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:
Here are some articles about image display in Emails for high pixel density devices:
American Institute of Graphic Arts (AIGA): http://www.aiga.org/About/
Columbus Society of Communicating Arts (CSCA): http://www.cscarts.org/
International Council of Graphic Design Associations (Icograda): http://www.icograda.org/
Society for Environmental Graphic Design (SEGD): http://www.segd.org/