How to resize an image with HTML and CSS?

Pure HTML

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.

Aspect ratio

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

More about object-fit can be found here.

How to avoid image cropping

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.

Summary

Client-side resizing

• 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

‍