Advanced Image Sizing

The newest WideRange version 5.10 is one of those updates that brings a subtle improvement that perhaps few clients notice right away, but which involved an extensive under-the-hood revamp of the website coding – specifically the image sizing algorithms.

Improved Image Sizing

Our websites have long been "responsive", or "mobile-friendly", meaning that the content and images automatically scale to fit into any screen size without triggering horizontal scrollbars. However, previously in most cases this scaling was only applied horizontally, not vertically, so on smaller screens in some circumstances it may have been impossible to see an entire image without scrolling up and down. There was a "Max Photo Height" setting to offer some control, but this was a compromise solution that could only strike a somewhat arbitrary balance – images may have still been too tall on small screens, and unnecessarily short on large screens.

With newer CSS coding tools available, I have enhanced the image sizing algorithm so that large images will now scale both horizontally AND vertically so they can be viewed in their entirety on any screen size without any vertical scrolling necessary! This offers a subtle but considerably improved viewing experience for all users, since images will now display smaller on small screens and larger on large screens.

This new advanced image sizing applies to all large-size images on the website, including individual photo pages, blog posts, and images inserted or uploaded into text.

New Image Sizing Controls

The Photo Settings page in the admin control panel (at Photos > Settings) now offers two new image sizing settings: a Minimum Photo Height and an Image Margin.

The Minimum Photo Height allows you to set a minimum height (in pixels) that an image will downsize to on small screens. This isn't really necessary, but perhaps on really small screens you may prefer that a user scroll to see a larger size image rather than see a smaller image in its entirety. I recommend leaving the Minimum Photo Height at about 350px or lower.

The Image Margin is a useful setting which determines how much smaller images should be sized than the browser viewport. For instance, if you have a margin of zero, then on shorter screens the images will size down to exactly the height of the browser viewport. With a margin of 40 pixels, the image will size down to the browser viewport height minus 40px (so, 20px of margin above and below the images). By tailoring the image margin to your website, you can potentially control whether images are entirely viewable along with their titles and/or captions too.

A Maximum Photo Height setting remains; however, you would only use this if there's some reason why you don't want your images to display at their full native height on larger screens. On large screens images will display as large as the dimensions you uploaded them at, so there's typically no reason why you'd want them to display smaller than that. In any case this control is still available.

Responsive Images Recap

Here's a summary of all the image display features our WideRange websites offer:

• All images are fully "mobile-friendly" and large images scale both horizontally and vertically to fit any screen size.
• All images feature Responsive Image coding, enabling the browser to automatically load the smallest necessary image file for the user's screen size and/or resolution, so mobile phones use less bandwidth and load faster.
• Image galleries feature a full-screen slideshow viewing option.
• Optimized WebP images are automatically generated from the uploaded JPG files, offering smaller file sizes and faster page loading. WebP images can optionally be turned off per photo or site-wide.
• Pages with lots of images and/or thumbnails feature "lazy loading" meaning that only the images visible in or near the viewing window are initially loaded; the rest load in as the user scrolls down the page. This too saves bandwidth and leads to faster loading pages.
• A "Retina Reduction" photo setting allows you to adjust the level of image size reduction to apply on high-resolution screens (more reduction = smaller size but higher apparent resolution).
• All images files are cached and served from a global content delivery network, for faster loading pages around the world.

A few other v.5.10 Updates

While the image sizing calculations were the meat and potatoes of the version 5.10 update, there are a few more updates to mention:

• The "Constrain Photos Within Text Width" setting is now available for each Gallery, Product, and Page (and configured when editing that gallery, product, or page). This allows you to determine if large images should display no wider than the text width (which looks cleaner in some contexts like for articles), or if the images are allowed to display wider than the text width. For any other miscellaneous context on the website this setting is configured at Photos > Settings.
• I have updated the admin with a more legible font and polished some of the admin styling throughout.