Have you ever visited a website and started scrolling down the page only to have the content suddenly jump? You lose your position on the page and are left to search up and down to find your place again. For devices with slow connections, this can occur multiple times, becoming especially frustrating.
Similarly, websites utilizing responsive image solutions often have a slight delay before the JavaScript has a chance to intialize and request an appropriately sized resource. When the resource does load, you experience the same scroll jump or “reflow” on the page. Although responsive images are designed to enhance the experience, this reflow behavior can simultaneously degrade it.
For non-responsive websites, the solution is to specify height and width attributes on the image element. This tells the browser to reserve a specific amount of pixels for the resource that it will eventually load. Conversely, responsive design will request resources of varying sizes depending on the screen accessing the content; specifying attributes here won’t work.
To solve this issue, I’ll explain how to use a styling hack based on the height to width ratio of the image. The catch is that you will need to know the ratio of your image in order to properly use this trick. Once you know the ratio of the image being requested, the steps I’ll describe will preserve the content area of the requested image, just as if you had actually specified height and width attributes.
Add the following to a SASS file that gets compiled into your CSS:
.img-container {
position: relative;
height: 0;
background-color: \$white;
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
$ratio-feature-image: percentage(1163/2000);
$ratio-1-1: 100%;
.ratio-feature-image {
padding-bottom: \$ratio-feature-image;
}
.ratio-1-1 {
padding-bottom: 100%;
}First, we apply styles to a parent element of the image element. The parent element must have its position set to relative so that we can absolutely position the image element. You will need to customize the background-color style to match that of your website. Go ahead and set the height to zero since we’re manipulating the size through the padding and child image element.
For the image element, we absolutely position the image on the top-left of our container element. Setting the width and height to 100 percent ensures the browser will reserve space on the page while waiting for to load the image, thereby eliminating the reflow effect.
Finally, you need to specify a ratio class that gets added to the parent element of the image. Assuming you’re using SASS like the example above, you can create variables based on the exact pixels of your image and let SASS calculate the ratio percentage for you. You can see an example of this in the $ratio-feature-image variable. Since a one-to-one ratio is just a square, I set this to 100 percent myself.
To use these styles, add a div element to your page with an img element inside it. Add the img-container and ratio classes to the div and you’re set. When you load the page, the browser will now reserve space for your image without the nasty reflow effect. You can check out the example HTML below. The example uses Foundation Interchange for responsive images.
<div class="img-container ratio-1-1">
<img data-interchange="[@item.teaserScreenshot2x, (default)], [@item.teaserScreenshotSmall2x, (small)], [@item.teaserScreenshotMedium2x, (medium)], [@item.teaserScreenshot2x, (large)]" alt="@item.Headline screenshot">
<noscript>
<img src="@item.teaserScreenshot2x" alt="@item.Headline screenshot">
</noscript>
</div>