In this post we’ll discuss the different techniques to resize images in HTML and CSS. We’ll also explain why to avoid client-side resizing and the benefits of choosing server-side resizing.
When using images on the web it is just a matter of time before you will need to resize them to fit your layout and content. The easiest and most straightforward method is using pure HTML, by using the width and height attributes of the img tag.
Let’s try with an image with an original size of 1456x816
To resize this image to a size of 485x272 pixels we set a height to 272 pixels and width to 485 pixels.
As you can see, this kind of resizing is very easy and straightforward. There are however some major downsides.
HTML resizing doesn’t know about the aspect ratio therefor the aspect ratio of the source image is not maintained. This can result in distorted, stretched images.
Upscaling or downscaling
When you resize using HTML, it is actually the browser’s that will rescale the image based on what is required. Quality of the resulting image can vary depending the scaling algorithms of the browser.
Bandwidth and loading time
HTML resizing takes place on the browser. This type of client-side resizing isn’t beneficial for bandwidth usage or loading time. For example serving a 1200x1200 picture and resizing in the browser for a 50x50 avatar isn’t a good idea.
Resizing images using CSS
CSS can also be used to set width and height attributes of an image.
As you notice, the CSS size takes precedence over the HTML size attributes. However, it is always advised to provide an width and height to an img tag to avoid layout shift during page load.
When using CSS we can resolve that nasty aspect ratio problem we had with pure CSS.
How to avoid image distortion
By declaring a object-fit, we can tell the browser how to fit the image in the given dimensions
The object-fit property can take one of the following values:
fill - This is default. The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit
contain - The image keeps its aspect ratio, but is resized to fit within the given dimension
cover - The image keeps its aspect ratio and fills the given dimension. The image will be cropped to fit
none - The image is not resized
scale-down - the image is scaled down to the smallest version of none or contain
To have more control over how the image is placed or cropped in it’s container, you can combine the object-fit with an object-position property.
More about the object-position property can be found here.
Although using CSS gives you a lot more control that using pure HTML, it doesn’t solve the problem of bandwidth, upscaling or downscaling or loading times.
To solve this the recommendation is to use responsive images, or server-side rendering.
Easy to resize using width and eight attributes of the img tag in HTML
Low control over the end result due distortion and up-or downscaling of quality
Use CSS width and height properties.
Apply object-fit and object-position to get more control over how the image is resized
Why to avoid client-side resizing
Slows down page loads: Downloading a full-resolution image takes time, which is a waste if you are are then resizing it on the client. Slow page loads are a critical factor in providing a good UX.
Image quality: The browser is responsible for scaling and resizing, for which quality can very across different browsers.
Bandwidth waste: Downloading a 10mb image to rescale it to a 50x50 avatar is a waste of bandwidth that is easily avoided. This is wasteful for your own data transfer bandwidth and for end-users, especially on mobile devices.
Increases processing and memory usage: When rescaling and resizing is done in the browser it will consume resources on the client to perform these tasks. Especially on cheap mobile devices this can have a huge impact on page performance and UX.
Benefits of server-side resizing
When using server-side image resizing, all the processing is done on the server. The client simply request the image in the right size based on the needs and the requirements of the client. This can be done by providing transformation in the URL of the image.
Efficient use of bandwidth: Transfer smaller file sizes when lower quality or smaller images are required, saving bandwidth.
Faster page loads: Smaller files sizes combined with lower processing and memory usage in the browser results in a faster page load.
Improves SEO scores: Faster page loads, lower time to Largest Contentful Pain (LCP) leads to better SEO scores.
No excessive use of client resources: Resize and compression processing is done on the server and not the client browser providing a more fluent page experience.
Serve next gen formats like Webp: Automatically serve next generation web formats resulting in even more optimal use of resources such as Webp