Resize Image HTML

Key takeaways:

• To resize an image in HTML, set the width and height attributes on the img tag. Both take a plain integer with no unit, measured in CSS pixels
• The width and height attributes are the only resizing controls that live in HTML itself. Everything else on this page is CSS.
• Set one dimension and the browser derives the other from the file, so the image cannot stretch. Set both to the file’s real dimensions and it also reserves layout space.

Image resizing involves adjusting the dimensions of an image, either by enlarging or reducing its size, while preserving the aspect ratio or intentionally distorting it. This is commonly done to optimize images for faster loading on websites, save storage space, or enhance the overall appearance of a page. Various techniques like interpolation, cropping, and compression can be used for resizing, and it is typically done using dedicated software or online tools.

Resizing images in HTML involves using the <img> tag to change the size of the image as it appears on the user’s screen, but without changing the file size or physical image size. While this is convenient, it also has several disadvantages, as we explain below.

In addition to setting the width and height attributes directly in the <img> tag, you can also use inline CSS via the style attribute to resize images on a case-by-case basis. It is also important to specify dimensions for images to prevent layout shifts or flickering as the page load

This is part of a series of articles about bulk image resize.

In this article:

• Important Caveats of HTML-based Image Resizing
• How to Resize Images in HTML
  • Maintaining the Aspect Ratio When Resizing Images
  • Fitting a Container
  • Resizing a Background Image
• Which Resizing Method Should You Use?
• How Do You Serve a Smaller Image Instead of Resizing in HTML?

Important Caveats of HTML-based Image Resizing

One of the primary issues with HTML-based image resizing is that it does not actually change the file size of the image. When you set the width and height attributes in the <img> element, the browser merely scales the image to fit within the specified dimensions. The original image file remains unchanged and is still downloaded in its entirety by the browser.

This leads to several problems:

• Performance Impact: Since HTML resizing does not reduce the file size, it can have a detrimental impact on the overall performance of your webpage. As the browser downloads the original, unoptimized image files, it consumes more bandwidth and increases the page load time. This issue is particularly noticeable on slower networks or mobile devices, where downloading large image files can significantly slow down the user experience.
• Quality Loss: Another issue with HTML resizing is the potential loss of image quality. When the browser scales an image to fit the specified dimensions, it uses its internal algorithms to perform the resizing, which can sometimes result in a lower-quality image. This problem is more noticeable when the image is downscaled significantly, as the browser may struggle to maintain the image’s sharpness and detail.
• Increased CPU Usage: Since the browser is responsible for resizing the image, it consumes more processing power to perform this task. This additional CPU usage can lead to slower page rendering times, particularly on lower-powered devices or those with many images to process.
• Layout Instability and Flickering: If you do not specify the width and height of an image, the web page might flicker as the browser loads the image and adjusts the layout. To avoid this, it is best to define these dimensions explicitly or use CSS properties to ensure stability.

How Much Data Does HTML Resizing Actually Waste?

The difference between image formats and sizes can actually become a substantial difference. Let’s break the numbers down: Cloudinary’s public cloud has an image sized at 850 x 565, and the same image can be requested at a display width of 400 pixels in three ways:

A page that writes width=”400″ on the first URL ships 610,244 bytes to show roughly 10,000 bytes worth of pixels. On a phone over a weak connection, that difference is most of the wait.

Given the problems and performance impact of HTML-based image resizing, it is recommended to use other methods for resizing images. A good option is to use responsive images with the srcset and sizes attributes to ensure that the browser downloads the most suitable image based on the device’s screen size and resolution.

Learn more in our detailed guide to responsive images

Another option is to use Cloudinary’s dynamic resize feature (read more below). Cloudinary is a cloud-based image management solution that lets you upload images and deliver them to users, dynamically resized to the most appropriate size for the user’s device.

How to Resize Images in HTML

If, despite our warnings, you still want to resize your images in HTML, here are several ways to do it.

Resizing an Image Using Width and Height Attributes

When working with images in HTML, one of the simplest ways to resize an image is by using the width and height attributes of the <img> tag. These attributes allow you to specify the dimensions of the image directly within your HTML code.

Here’s an example of how you can resize an image using the width and height attributes:

<img src="path/to/your/image.jpg" width="300" height="200">

In this example:

• The src attribute specifies the path to the image file.
• The width attribute sets the width of the image to 300 pixels.
• The height attribute sets the height of the image to 200 pixels.

Resizing an Image Using the Style Attribute

Another method for resizing images is to use the style attribute within the <img> tag. This approach allows for more flexible, case-by-case adjustments using inline CSS.

Example:

<img src=”path/to/your/image.jpg” style=”width: 200px; height: 100px;”>

This method is especially useful when you need precise control over an individual image’s dimensions without affecting global styles.

Considerations When Using Width and Height Attributes

While using the width and height attributes is straightforward, there are a few considerations to keep in mind:

• Aspect Ratio – If you only set one of the attributes (either width or height), the browser will resize the image while preserving its original aspect ratio. However, if you set both attributes, the image might be stretched or compressed if the aspect ratio of the specified dimensions does not match the original aspect ratio of the image.
• Quality – As mentioned before, resizing images using HTML attributes does not change the file size of the image. If the original image is large, it will still take time to load, which can affect page performance. For better performance, consider resizing the image before uploading it to your website.
• Responsiveness – For responsive design, you might want to use CSS for more control over how images resize on different screen sizes. Using width: 100%; in CSS can ensure the image scales with the size of its container.

Should You Set Both Width and Height?

Setting one dimension protects the aspect ratio, but it gives something up. An img with no dimensions has no size until its file arrives, so the browser lays the page out without it and reflows everything once the image appears. That reflow is a layout shift, and it is what makes text jump under the reader’s eye mid sentence.

With width and height present, the browser can calculate the aspect ratio before the image loads and reserve the space. That way, it has a chance of reducing or even preventing a layout shift and negatively impacting SEO or the user experience.

So the pattern that avoids distortion and layout shift at once is to put the file’s real dimensions in the attributes and let CSS set the display size. CSS wins over the attributes, so height: auto overrides the height attribute and nothing stretches:

<img src="photo.jpg" alt="A mountain trail at sunrise" width="1600" height="1064" class="article-image">

<style>
 .article-image {
 max-width: 100%;
 height: auto;
 }
 </style>

Maintaining the Aspect Ratio When Resizing Images

Here is an example of how to resize an image while maintaining the aspect ratio:

<style>

 .scaleA {

 width: 100%;

 max-width: max-content;

 }

 </style>

And add this line to the HTML code:

<img src="demo.webp" class="scaleA">

This approach is the easiest way to automatically resize an image. It involves setting the width to 100%. The default height setting is “auto,” which scales the height automatically based on the width.

The “max-content” setting is optional and limits an image’s maximum size to the original width. Thus, if an image had a width of 500px, it will only be able to scale up to 500px—this is useful to prevent the resized image from becoming blurry and over-stretched.

Scale an Image Down to Fit Its Container

The standard rule for a responsive image is two lines of CSS. It lets an image shrink to fit a narrow screen but never grow past its own resolution, which is what keeps it sharp:

img {
 max-width: 100%;
 height: auto;
 }

max-width: 100% caps the image at the width of its container, and height: auto recalculates the height from the file’s own ratio, so nothing distorts.

Because the image never scales above its natural size, it also never goes soft from upscaling. Use width: 100% instead and you force the image to fill the container in both directions, which stretches a small file and makes it blurry.

Fitting a Container

Another approach is to resize the image to fit a container:

    <style>
    /* (A) DESIRED FIXED DIMENSION */
    .scaleB {
      width: 500px;
      height: 500px;
      border: 10px solid blue;
    }


    /* (B) RESIZE METHOD */
    .fill { object-fit: fill; }
    .contain { object-fit: contain; }
    .cover { object-fit: cover; }
    .scale { object-fit: scale-down; }
    </style>


    <img src="demo.webp" class="scaleB fill">
    <img src="demo.webp" class="scaleB contain">
    <img src="demo.webp" class="scaleB cover">
    <img src="demo.webp" class="scaleB scale">

If you resize your browser window, your browser will automatically rearrange the images.

The object-fit method is best suited to resizing images to fit specific dimensions. The initial value, if you have not specified a fit method, is fill, which stretches an image whose proportions do not match the box.
The cover element scales the image while maintaining the original aspect ratio, clipping the image to cover the specified dimensions. The scale-down achieves the same effect as contain or none, depending on which is the better fit.

The five keywords behave as follows, as documented by MDN:

Add object-position: top alongside cover to choose which part of the image survives the crop. The default keeps the center, which is the wrong choice for most product photography and for portraits.

Resizing a Background Image

Here is an example of how to resize a background image in a div container:

    <style>
    .scaleC {
      /* (A) FIXED DIMENSIONS */
      width: 100%; height: 400px;
      overflow: auto;


      /* (B) BACKGROUND IMAGE */
      background-image: url(demo.webp);
      background-position: center;
      background-size: cover; /* contain | cover | auto */
      background-repeat: no-repeat;
      background-attachment: scroll; /* fixed | scroll | local */
    }
    </style>


    <div class="scaleC">
      <p style="margin-bottom:500px">Test</p>
    </div>

Here is an overview of the settings:

• background-image specifies the image used as the background.
• background-position centers the image in the div container.
• background-size specifies the resize method (cover or contain).
• background-repeat should be set to no-repeat, as there is only one background image.
• background-attachment specifies the element to which the background image is attached. Options include fixed (the background is static during scrolling), scroll (the background relates to the div and doesn’t move during scrolling), and local (the background relates to div’s contents and moves during scrolling).

Which Resizing Method Should You Use?

Every method above changes how large the image looks. Only the last three change how many bytes the visitor downloads.

How Do You Serve a Smaller Image Instead of Resizing in HTML?

Two approaches change the file rather than the display size, and most production sites pair one of them with the CSS above.

Let the Browser Pick the File With srcset and sizes

srcset offers the browser several versions of the same image with their real widths, and sizes tells it how wide the image will be in your layout. The browser then picks a file before it downloads anything, taking device pixel ratio into account:

<img
 src="photo-800.jpg"
 srcset="photo-400.jpg 400w,
 photo-800.jpg 800w,
 photo-1600.jpg 1600w"
 sizes="(max-width: 600px) 100vw,
 (max-width: 1000px) 50vw,
 600px"
 width="1600"
 height="1064"
 alt="A mountain trail at sunrise"
 loading="lazy"
 decoding="async">

• Each w descriptor must match the real intrinsic width of that file. The browser trusts the number and chooses badly if it is wrong.
• sizes describes your layout, not the files. Read the example as: below 600px the image is the full viewport width, below 1000px it is half, otherwise it is 600px wide.
• Set width and height to the dimensions of the largest file in the set, and keep src as a fallback.
• loading="lazy" defers images below the fold. Leave it off anything in the first viewport and give your Largest Contentful Paint image fetchpriority=”high” instead.

Options for Resizing Before Delivery

The alternatives fall into two categories: a build step you run yourself, and an image CDN that resizes on request.

Resize and Rescale Images Automatically with Cloudinary

Cloudinary is a powerful and feature-rich cloud-based media management service that simplifies the process of working with images and videos. It allows users to perform various operations on their media files, including resizing, cropping, and optimization, among others, through a simple URL-based interface, or via SDKs for all popular programming languages.

URL parameters are the key-value pairs included in the URL that instruct Cloudinary on how to manipulate and deliver the requested image or video. By using these parameters, you can easily apply a wide range of transformations to your media files, without the need for manual intervention or additional server-side processing.

A major advantage of using Cloudinary for image resizing is that the service dynamically resizes images on the server side, before they are delivered to users, solving the problems of HTML-based resizing.

In the following section, we will explore Cloudinary’s automatic resizing capabilities, which are facilitated by URL parameters. These capabilities enable you to effortlessly resize and rescale images, ensuring optimal performance and user experience on your website. Each of the sections below links you to the Cloudinary image transformations documentation page with more details.

In order to try out the instructions below, sign up for a free Cloudinary account.

Limit Images to Specific Dimensions

To limit the size of an image to certain dimensions, change the crop (c in URLs) value to limit.

Below is an image that’s been resized from 850 x 565 px. to 70 x 70 px. with limit. Due to the preserved aspect ratio, this display is 70 x 47 px.

URL

https://res.cloudinary.com/demo/image/upload/w_70,h_70,c_limit/cashew_chicken.jpg

Crop Images With Auto Gravity

To focus on certain details while resizing images, crop the images with Cloudinary’s intelligent auto-gravity features. The parameter to set is gravity (g in URLs), which offers an auto value that intelligently crops according to your image’s content.

Cloudinary automatically crops images with content-aware, AI-based features by selecting faces, individual features, or areas of interest. To trigger that task, apply the gravity filter (g) with the features you want to preserve.

This example with the g_auto setting crops the most interesting area, as determined by AI:

Another example: To ensure the product takes center stage instead of irrelevant objects, set the product as the main focus. In the image on the right, the backpack is clearly in focus, drawing attention to the key item.

URL

https://res.cloudinary.com/demo/image/upload/c_thumb,g_auto:classic,h_175,w_175/v1551428220/veducate/spencer-backman-482079-unsplash.jpg

g_auto:classic

URL

https://res.cloudinary.com/demo/image/upload/c_thumb,g_auto:backpack,h_175,w_175/v1551428220/veducate/spencer-backman-482079-unsplash.jpg

g_auto:backpack

Sign up for a free Cloudinary account and resize images automatically without impacting page performance

Frequently Asked Questions

How do I resize an image in HTML without stretching it?

Set only width or only height and the browser derives the other from the file’s own proportions. If you want both attributes present for layout stability, set them to the file’s real dimensions and add height: auto in CSS, which overrides the attribute and keeps the ratio.

Does resizing an image in HTML reduce its file size?

No. The browser downloads the complete original file and scales it when painting. To reduce the bytes transferred you have to deliver a smaller file, using srcset, a build step, or an image CDN.

Can I resize an image in HTML without CSS?

Yes. The width and height attributes on <img> are HTML, not CSS. What you give up is responsiveness: attribute values are fixed numbers, so an image sized for a desktop column overflows a phone screen unless CSS caps it.

How do I stop the page from jumping while images load?

Put width and height on every <img>, set to the file’s real dimensions, so the browser reserves the space before the image arrives. If the dimensions aren’t known in advance, like user uploads rendered by a template, set aspect-ratio in CSS instead.