Responsive Images!

I am happy to offer a new feature for WideRange Galleries clients with responsive-designed websites: Responsive Images!

Summary

• Responsive images allow you to upload larger images.
• The larger image files will be served to large or high resolution screens. Images will look sharper on retina screens.
• Smaller image file versions will be served to mobile devices with small screens, saving bandwidth and loading times.
• Recommended sizes for new responsive image uploads would be between 1200-1600px on the long side.
• Existing website photos will stay how they are; new larger images will be responsive.
• Instructions for uploading and updating images files are listed below.

What are responsive images?

Traditionally when an image is embedded in a page, there’s just one image file and the browser loads it. With responsive images, for each photo several different image sizes are provided, and the browser will automatically choose the best one to load based on a variety of factors including browser size, screen resolution, and internet connection speed.

Why responsive images?

The responsive images feature has two major benefits: it provides higher resolution image files for large monitors and retina screens, and conversely it supplies lower resolution image files for small devices that don’t need to load a big image file.

The first issue mainly involves retina screens. Retina screens are the newer high resolution screens like you’ll find on iPhones, iPads, and the newest iMacs and MacBooks. Before retina screens came along, all websites displayed at 72ppi resolution, and images looked just fine at these fairly low resolutions. But because retina screens have over twice the resolution of normal monitors, webpages and images viewed on retina devices are automatically upsized by 2x in order to maintain the same relative visual size. This means that web images that look fine on a normal monitor will look soft and blurry on a retina screen.

Responsive images solve this blurry retina problem by providing an image that’s twice the resolution, which will look much sharper on retina devices. Similarly, people using large desktop monitors with big browsers will also get to see larger versions of your photos.

On the other end of the spectrum are small mobile devices, which often use slower wireless internet connections. Since more and more people are accessing the internet with these small devices using slower internet speed, it’s important to also provide smaller image files that will load quicker. There’s no need to load a huge 1600px image on a screen that’s only 320px wide! Responsive images solve this problem because the browser will be able to load a small version of the image file rather than the big version, thus saving valuable bandwidth and loading time.

In short, responsive images allow your website to cater simultaneously to both large and small screens, rather than needing to compromise on either.

Demonstration

To see responsive images in action, I’ve provided an example below along with a normal image to compare. To fully appreciate the responsive image, you really should view those photos on a larger retina screen such as an iPad or retina iMac or MacBook. On a normal monitor you won’t see any difference, while on a retina screen you can really see the difference in sharpness.

900px non-responsive image
A normal 900px non-responsive image. This will look fine on a normal screen, but a bit blurry on a retina screen.
Responsive Image example
A responsive image. On a normal screen this will load the same 900px image as above. But on a retina screen it will load a 1800px image which will look much sharper. Also, try resizing your browser smaller and see how it loads a smaller image file instead. (You might need to refresh the page to see the effects).

What’s happening in this case with the responsive image is that there’s actually four different sized jpg files at 600, 900, 1200, and 1800 pixel widths. In the code we’re telling the browser that there’s these four images available and what sizes they are, and the browser is automatically choosing the best one based on the screen resolution and browser size. It only chooses the one that’s as big as it needs, thus saving bandwidth for smaller devices resulting in faster loading times. For high res retina screens the browser knows it needs to load one of the larger images to display sharper.

How to start using responsive images

Once I activate the responsive images feature for your website, you will start uploading your new photos at larger image sizes. Previously, clients would upload web photos at sizes around 700-1000px widths. With the responsive images feature in place, you will upload your photos at larger sizes in the 1200-2000px range.

That’s all you have to do! The admin will automatically create all the various smaller thumbnail sizes.

Note that if your website is an older non-responsive website (meaning the content doesn’t scale to fit smaller screens/browsers) we will need to upgrade your site to a responsive version in order to utilize the responsive images feature. I highly recommend this, since more and more people are using the internet on phones and other mobile devices, so it’s becoming more important to have a responsive, mobile-friendly website.

Read more below about recommended photo upload sizes and how to replace existing images with larger versions.

What size should I upload my photos at?

This is the main question you will need to decide.

The short answer: in the 1200-1600px range.

The long answer: There is no definite answer; mainly it’s a personal choice based on the balance between the level of size/image-quality desired vs. your level of comfort/paranoia about posting significantly larger image files knowing that they will inevitably be pirated and shared around the web without your permission.

As for the image quality issue, the key player here is the retina screen. Since retina screens have double the resolution of normal screens, a general rule of thumb would be to double whatever size you’d normally want your images to display. For example, if you intend for your photos to normally display at 800px, then a 1600px image file would be your target to upload to cater to retina screens. In practice, I have found that 1.5x the normal size is probably also suitable for most retina screens.

Personally, I am not comfortable posting my images super large due to piracy concerns. Though our websites offer a superficial download-prevention technique, this is fairly easily bypassed so it’s impossible to fully secure the images. We’ve all seen how our images get shared around the web and used in various ways without permission. It can be frustrating, and by posting significantly higher-res images, the stakes are higher. How much this concerns you is totally a personal decision; if you aren’t too concerned about it and feel that the benefits of displaying larger and sharper images is worth it, then that’s great.

I have decided that for me 1200px is a good size — it’s definitely larger and sharper than my previous 800px size, but not so large that the files could be printed or otherwise abused too much. I experimented with 1600px images, and those do look noticeably sharper on a large retina screen like my MacBook’s; however, I guess I’m just a bit conservative about putting out images that large into the world, so I’m going to limit mine to 1200px.

Here’s a brief summary of various sizes based on my experimentations so far:

800px: more or less the standard size we’ve been using so far on our sites; looks blurry on retina screens
1200px: quite large and nice on normal screens, very sharp on iPad-size retinas, could be sharper on larger retinas
1600px: nice and sharp even on the MacBook retina size screen, not sure it’s necessary to go any larger than this
2000px: catered specifically for large retina monitors, probably unnecessary and a bit excessive for most purposes

Also keep in mind that the larger size you choose, the more “future proof” you will be, as I’m sure as time goes on higher resolution monitors will become more of the norm.

Personally I think the sweet spot range is between 1200-1600px, and so it comes down to a personal choice like I said above about image quality vs. piracy concerns.

* Note that you should size both your horizontal and vertical images to the same dimension on their long edge. So for example if you choose 1200px as your size, then size your horizontals to 1200px wide, and your verticals to 1200px tall.

* Also note that you do not have to size everything to the same exact size; the website is flexible enough to handle any sizes up to about 2000px. So for example if you want to size your panoramas wider than normal, go ahead and do that.

Watch the filesizes!

One consequence of uploading larger image files is that the file size can get out of control. You definitely don’t want to be uploading images that are over 1mb in size — they will take longer to load and will slow your site down. And besides, it’s just unnecessary.

When you’re saving your web files, whether via Lightroom export, or Photoshop’s “Save for Web”, or whatever image editing app you use, you should select a jpg optimization setting of no more than 70% quality. For 1200-1600px images, you should aim for file sizes of about 400-800kb, preferably towards the lower end if possible. Remember that since your images are now larger and more detailed anyways, you do have more leeway to compress them a bit more aggressively without losing noticeable quality.

As always, also be sure to embed the sRGB color profile in your web images so that they will maintain consistent colors on various monitors.

I would also definitely recommend adding a small unobtrusive watermark to the bottom corner of your image files, so that they can be traced back to you in the inevitable event that they are copied and shared around the web.

Updating all your existing photos

Once I’ve activated responsive images on your website, all new photos should be uploaded at the newer larger size. All your existing photos will still work fine just as they have before, though those won’t be responsive images until you’ve updated them with new image files.

There are two ways of updating your existing photos:

1) If the new image files have different filenames than before, go to Photos > Modify, find your photo and click EDIT, and there you can upload the new file for the photo.

2) If the new images have the exact same filenames as before, you can use the Photos > Replace Image File page to batch upload the replacement images. This is the quickest possible way to replace lots of images, but you have to make sure that the filenames are exactly the same as they were before.

In any case, you should never use the Photos > Add page to replace images. This is because you are not adding a new photo to the database, you are simply replacing the image file for an existing photo.

Enjoy your sharper photos!

Once you’ve added or updated some larger image files, you can see the new responsive images in action on your website.

Be sure to refresh your website pages a few times to ensure that you’re seeing the new image files and not old cached versions.

As mentioned earlier, if you really want to see this feature in all its glory, you should view your site on a larger retina screen like an iPad or retina iMac or MacBook. Then you will see how noticeably sharper your new images look compared to the older ones — with both the gallery thumbnails and the individual photo pages.

Enjoy the new feature, and please contact me if you have any questions, or would like to activate this feature on your WideRange Galleries website!