Responsive Images

June 2015
Cactus Stars
Images so sharp they might poke your eyes out.

WideRange Galleries websites are equipped with a fantastic feature for displaying photos at their finest on all types and sizes of screens: Responsive Images!


• Responsive images look significantly sharper on high-resolution retina screens.
• Large image files are served to large or high resolution screens.
• Smaller image file versions are served to mobile devices with small screens, saving bandwidth and loading times.
• Recommended sizes for responsive image uploads would be around 1500 or 1600px on the long side.

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 high-res 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 newer iMacs and MacBooks, for example. 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, and low and high resolution screens, without any compromises.


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.

A non-responsive image
A normal 960px non-responsive image. This will look fine on a normal screen, but a bit blurry on a retina screen.
A responsive image
A responsive image. On a normal screen this will load the same 960px image as above. But on a retina screen it will load a 1920px 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 a set of different sized jpg files including sizes of 480, 640, 960, and 1920 pixel widths. In the code we’re telling the browser that there’s these multiple 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 use the Responsive Images feature

The responsive images feature is built-in with all v5 WideRange Galleries websites (basically any WideRange Galleries website built or updated after 2014). All you have to do is upload your web images at the desired size (see below) and 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 the responsive Version 5 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.

What size should I upload my photos?

This is the main question you will need to decide.

The short answer: I do 1500px on the long end, or 2000px for panoramas.

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 can be bypassed (for example, by taking a screenshot) 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.

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

800px: more or less the standard size we used to use a long time ago before responsive design was a thing; looks blurry on retina screens
1200px: a good size on normal screens, could be larger and sharper on retina screens.
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 is 1500px or 1600px, but it comes down to a personal choice like I said above about image quality vs. piracy concerns. I have decided that for me 1500px is a good size — it’s large enough to display sharply at a good size on retina screens, but not so large that the files could be printed or otherwise abused too much.

* 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 1500px as your size, then size your horizontals to 1500px wide, and your verticals to 1500px 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 2400px. 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.

Enjoy your sharper photos!

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 nice and sharp the images look — with both the gallery thumbnails and the individual photo pages.

As always, please contact me if you have any questions!

Posted in Features, Knowledge Base and tagged Images.

Related Posts

WebP Images
May 2021