Not as simple as happy trees, I guess.
Recently, I got a new MacBook Pro to do design work on.
If you’re a designer, you know these have a Super High Resolution display, known as “Retina”.
I went to redesign this website and immediately had trouble discerning why images in Photoshop looked so small.
The reason everything looks so tiny on a retina display (Mac) or HiDPI (PC) is because for every pixel you were used to designing with on your standard 72ppi desktop & laptop monitors and/or Macs, the retina display uses four times the pixel density to display imagery. Legacy issues? Older sites or images you had previously saved for web at 72ppi or even higher will be very apparently degraded or jagged on the retina display as well as on those devices which have the same, such as the iPad and iPhone. I believe this is the same for Android Super Amoled screens, but haven’t tested this intensively.
When researching this software usability issue, I found a lot of workarounds, some simple and most outdated. The many pixel densities on devices and displays seem to keep getting larger and larger. This makes the process for a designer crafting a universal image resolution solution seemingly futile. There are blogs that can help cite the exact resolution for a device you are wishing to pinpoint presentation on. The following topics are how you can approach the challenges of first creating higher than normal resolutions and then how to implement specific images based on “device-pixel-ratio” or pixel density to serve up different versions of things like background images using CSS media queries.
First, Create and Design.
Apple has an article on the breakdowns of devices and the dates they were manufactured. This knowledgebase article also has information on how to keep retina resolution on your MacBook while preserving a different resolution on a thunderbolt external display. This is preferable to me as it can give you an idea of what a client on a non-retina display will see as well as what can be generated for iOS screens or the MacBook Pro’s screen itself. Opening software applications like Photoshop in “Low Resolution” mode seems a bit counterproductive. It feels like you’re defeating the purpose using this great new display in all it’s glory.
- Currently, when you open up Photoshop on a MacBook Pro, the best way to see images the way others and their browsers will is to view your images at 200%. This seems to get quite contentious in Adobe threads, but this has worked for me so far.
- After you’re viewing the images at “non-retina” size, you now have to make a decision on resolution(s). You can see a cumululative grid of ppi sizes associated with types of devices on Wikipedia. These probably exist elsewhere too. I made compromises here. For smaller images I went with a range from 144ppi to 244ppi. The native ppi of the iPhone X is 458ppy at 180 px, but I’m not going to serve that up for every desktop and mobile device by default. These “heavy” images can have a drastic effect on gallery and page loads if the images are too large. I chose the custom sizes above as they came out at high quality, even when zoomed with special CSS transitions, or flex: fitted in Bootstrap, etc.
- The most recent version of WordPress does not seem to have an effect on imagery uploaded to it, but I see mentions of where other CMS platforms and prior versions WP do perform image compression. Watch out for this, as it will negate everything you’ve strived to create a specific resolution for.
- For smaller sized images like thumbnails, I used .pngs which seem to come out compressed, but highly legible. The size of these was small in data, even when multiples were used for my galleries.
- For larger imagery, where I wanted to have a little more control over image adjustments and curves, I used the ol’ .jpg.
Second, use a device-pixel-ratio media query.
There is another facet of images being served up for the user. This can be done with a media query for particular element to deliver high-res imagery or not, based on the pixel density of a given device. I see where there are also WP plugins along with .js libraries for this, but I haven’t needed to use these yet.
Here’s a brief example…
@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
- The code above comes from a CSS-TRICKS snippet that illustrates how to include high-res images for devices that can use them, without delivering them to all users.
- This Medium Post from Mike King shows syntax of how you can implement background images at the same size, but at a higher resolution.
- While I see how the techniques above are good for imagery like headers or persistent elements, it seems as if the first options above will probably be used along with queries for specific or unique sets of images, like galleries, etc. that need to be of all different widths and heights.
These techniques are likely to evolve over time, and this post will be updated to reflect new implementations as well.
