Website Images (2012)

I used to have a process of producing images for my website that meant I designed and uploaded images at the exact size I wanted to use them in the webpage. So if an image slider required a 435 pixel x 250 pixel image, then make an image exactly that size. Or if I was putting an image gallery online, I would resize my photos down to 1024 pixels x 768 pixels because most users could view the entire image (plus some navigation, etc.) on their screens. And, with the 960 grid design movement, the largest image I’d expect to normally display was, well, 960 pixels wide.

Enter the Retina iPhone 4 and iPad 3, Retina MacBookPro and all the other non-Apple high pixel density (HiPPI) displays.

*sigh*

A number of articles have come out recently that describe the technical issues and provide suggestions for how to design websites for high pixel density displays, here are a couple to read:

• How to Design for Apple’s Retina Displays
• Optimising for High Pixel Density Displays

I’m going to describe the effect I’m after is “sharper”. That is the image should look as good as possible on both Retina and non-Retina devices (aka high pixel density or regular pixel density devices).

Here’s what I’ve learned:

• CSS media queries, preferably part of a Responsive web design, should be used to automatically select the best image for the display.
• Scalable images work best in a world of pixel scaling. Use PNG file formats where possible.
• Use CSS-styled text, instead of images, where possible. With web fonts and CSS, text can look better than ever!
• WordPress isn’t ready in July 2012 to use media queries to automagically swap in a higher resolution image.

Practically, here’s what I’m doing, and what I think makes sense going forward:

• Upload the highest resolution image available. I used to be really concerned about filesize vs. display performance based on data transfer rates—no longer!

  (Note: WordPress by default won’t resize the 3648 pixels x 2736 pixels photos from my camera, so I resize them to 2736 pixels x 2052 pixels before uploading them. There’s nothing special about this size, it happens to be 2/3 the size of the original. But it’s a size that my WordPress install will resize automatically as part of the image upload process. This means that I’ve only partially future proofed my website, the best I could be doing was to use the original image.)

• Display images at a size (pixel dimension) that makes sense for the webpage, but at the same time try to design things so the image file being referenced is at least twice the size (pixel dimension) of the display size. This effectively means there’s enough data for high pixel density displays to show a sharp image.

  I realize this means that I’m requiring some users to download larger images (more data) than is necessary, but until WordPress handles the image selection process natively (the couple plugins that exist as of July 2012 seem to break more things than they help) I think it’s the best compromise. If my users are using a desktop computer, they’re probably accessing the site over a high bandwidth connection so the extra data probably doesn’t negatively affect their experience.. If they are accessing the site from an iOS Retina device, they probably want the sharper image anyway.

  (Note: Designing only for 2x means that the images will appear sharp on the current generation of high pixel density displays, but the future might bring even higher resolution displays. This is why it’s also critical to upload the highest resolution images that are available.

• When inserting images that appear side by side on a WordPress page, reference the next size “larger” image (or the original) than I want to display on the page to make sure there’s enough data. Use the <img> width and height attributes to set the size of the image.

• When inserting a single image on a webpage that’s intended to span the width of the display, use the original image in WordPress.

  Using a fullsize/full-width image “works” in my current site because I’m using a theme that’s a responsive design (using HTML5 and CSS3), so it will automagically size the image to fit properly.

• Use PNG images for any non-photo images (I’m probably still going to use high resolution JPEG images from my cameras for ease in workflow), designed at least twice as large as I want to display them.

Here’s what it looks like:

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”]

Source: Brandon

Comparison of Retina-enabling 1280×962, 800KB image display (top) and
the “old” way of displaying images 600×450, 161KB (bottom).
You’ll have to view this on a high pixel density display to see the difference.
The images should look the same on a “regular” screen.

Source: Brandon