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.
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:
max-widthto 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.
max-width, we need to add width: 100%; to the inline CSS, in order to prevent automatic resizing of the parent table cell.
Pine includes a responsive image reset for mobile, that kicks in only if you don't use the fluid retina technique.
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.