Three Ways To Resize/Scale Web Images In Responsive Design
Images can be challenging to cope with in a reactive environment; by nature these is a ‘static’ element with specific sizes, just how can we manipulate them into working with our lovely fluid/flexible web designs? Please, note, this informative article addresses visual resizing in a web browser mainly, and not any “true” reactive image techniques, i.e. providing different images to different display screen sizes.
These are a few ways to control one image – the same image provided using 3 different methods. 2 of the 3 techniques below can be adapted to serve big images to desktop and small images to mobile – I’ll cover that in a later post. Let’s go through the 1st image resizing technique – for this demonstration I’ll call it the Fixed Ratio Resize method. Resize your browser window and you’ll see that it’s a really simple way to shrink images, without any frills.
Browser support because of this is great and works all the way back again to IE7. One glaringly apparent fail in this technique is that horizontal images can resize to ugly proportions in relation to surrounding content. Just have a look at the test banner image and see how when the internet browser is taken in very small, the image basically disappears (Ow, feel my squinty eye-pain!).
Now envision this in use on a good phone – it is not doing a very good job of providing illustrative meaning to the content, is it? Worse still, see what goes on when positioned alongside a more traditionally proportioned family portrait photo – observe how completely mind-boggling the thistle it becomes, compared to the horizontal banner?
This is based on a technique I came across a couple of years ago; a real way of resizing YouTube videos while keeping aspect ratio. With this explained, have a look at the prospective Ratio Resize method demo. Please, be aware that while I am using the same padding-percentage concept, I decided to use it on the pseudo-element to eliminate the extra box div (cleaner markup). This won’t create a totally easy scale-down though – notice how when the browser home window is pulled-in, only the banner image width shrinks to begin with, until it hits the padding-top/aspect percentage threshold, and then the height is affected too.
- Market Your Content
- What kind of message do we want to put out into the world
- Target Your Audience
- Use the WordPress plugins
Because of the non-linear scale-down, it too can result in a disproportionate text-to-image relationship in responsive layouts. No way near as bad as the 1st method, but it might cause visible inconsistencies still. This method IMO tends to work on a collection of uniform/standard image sizes best, for example, in a CMS where users will probably upload regularly-sized 4:3 or 16:9 camera images. Deploy this technique alongside a PHP auto-resizing script, and the results would be very well and predictably proportional.
In IE8, the elevation and width shrink however the image inside will not resize, while in IE7, only the width shrinks but elevation stays the same, and again, the image does not resize. It isn’t completely horrible though, and you will probably be offering a fixed-width design to IE7/8 users it doesn’t need image/content/design resizing (no support for media inquiries so less reactive design factors). I learned all about this system, that I’m phoning the Fluid Ratio Resize method, about a season ago in a voormedia article for liquid aspect ratios.
2 to give a soft linear scale-down when the image resizes, because of the calculation of the “sloping scale”. This “slope” transforms the image from a big size/aspect ratio, and scales it to a smaller size with a different aspect ratio gradually. The smooth, linear slope of the resize behavior is what makes this technique a genuine gem for predictable responsive design.
The drawback is that you’ll require to know the beginning and end size for this to work well, which means it is not something that could easily be included into user-generated content. It is most surely something that you as a programmer can use in layouts though. There are a few nice illustrations in the voormedia article for fluid aspect ratios that describe how the “slope” is derived and, in turn, how the padding-top and elevation are calculated, so please do take a look. For convenience (and with regard to my brain and yours) I’ve created a Fluid Ratio Resize Calculator that does all the effort for us.