Sharp images that display well on both mobile and desktop

Since pretty much all of today's mobile devices have high pixel density screens, you need to use "retina" images for your media to look sharp on any screen. This is done by using images that are usually twice (or even more!) the intended display size.

However, some email clients - specifically Outlook for desktop - don't like images that are larger than their container, and will blow up your design if you don't use a fixed width.

Pine uses the fluid retina image technique, so that your images display well across the board, even in Outlook.

Fluid Retina Images #

Not only does this ensure proper image sizing in all email clients, but your mobile images will not expand beyond their natural width. This works in three steps:

  1. Use the width="" attribute to set a fixed width that is half the original image width. This is the intended display width, and will also be used by Outlook.
  2. Use max-width to constrain image width to the same value as in the previous step. This is what ensures the image doesn't get resized on mobile to more than its intended display width.
  3. Finally, because some mobile email clients don't support max-width, we need to add width: 100%; to the inline CSS, in order to prevent automatic resizing of the parent table cell.

Mobile Responsive Fallback #

Pine includes a responsive image reset for mobile, that kicks in only if you don't use the fluid retina technique.

Although it may not be noticeable on large images, keep in mind that this fallback will force your images to be as wide as their parent element, on mobile. This can potentially render images larger than their natural width, making them look blurry or pixelated - see example above.

Hiding Images on Desktop #

While our hide-sm class is enough to hide an image in mobile email clients, things get a bit more complicated on desktop. You can hide images on desktop and only show them on mobile just like we do with the hamburger navigation icon:

The inline CSS and Outlook conditional comment will hide the image for desktop email clients, while the show-sm class will make it visible on mobile devices.

Tip: always use aria-hidden="true" on hidden or UI images - it'll help screen readers skip them.

Next Up: Background Images →

Current Version