How to resize an image using CSS

Resizing images with CSS is fundamental for building responsive, user-friendly websites. Whether you’re working with inline images or background graphics, knowing how to control image size directly through CSS helps maintain visual consistency across devices without compromising performance.

This guide explains how to reduce image size in CSS efficiently, without compromising quality

How to Reduce Image Size in CSS

Reducing image size using CSS helps maintain a clean layout, improves loading times, and ensures your visuals fit well within different screen dimensions. CSS provides several properties that allow you to control an image’s width, height, and scaling behavior without modifying the original file.

1. You can directly resize the image’s height and width using fixed dimensions. This method will cater to needs where size consistency matters; however, the image might distort as the aspect ratio of the viewport changes.
2. If you want scalable images that adapt well to a flexible layout, you should leverage the ‘max-width’ and ‘max-height’ CSS properties.
3. The ‘object-fit’ comes into play when you want images to fit inside the container without disturbing the image’s original aspect ratio. It’s especially effective for user-uploaded content, like profile pictures, where images with varying dimensions need to be displayed consistently.
4. When using images as element backgrounds (e.g., body, div), use the CSS background property instead of HTML. This is used when you want to have overlay text, background, decoration, and more. The CSS property grants better control over the image adaptability inside the container.

Once you’ve applied CSS to resize your images, it’s crucial to test how they appear across different devices and screen sizes. BrowserStack Responsive makes it easy by allowing you to preview your web pages on real browsers and devices.

With instant access, no downloads or setups, you can ensure your resized images look sharp, consistent, and responsive everywhere.

Method 1: Resizing Using Width and Height Properties

The most basic and direct way to resize an image is to use the width and height properties in CSS styling. Setting the width and height in CSS changes the image’s displayed dimensions. This method of resizing images is not preferred if you want to achieve responsive web design, as it does not adapt to different screen sizes.

img {

    width: 50px;

    height: 150px;

}

Method 2: Resizing Using the max-width and max-height property

When an image exceeds the size of its parent container, it can cause layout issues. The max-width and max-height attributes ensure the image does not exceed the specified maximum dimensions.

Setting the image width to 50% will stretch it across half the screen, and it will yield the same result irrespective of the device it is viewed upon.

img{
max-width: 50%;
max-height: 50%
}

Furthermore, you can also apply the value as auto to the max-height or max-width attribute to prevent any overlapping of any default dimension. This is useful to prevent the image from getting distorted.

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

Method 3: Resizing Using the Object-fit Property

The object-fit property adjusts the dimensions of the image to fit it inside the container it is placed upon. It can be applied to photos and videos to fit them realistically into the content box. The object-fit property supports five values: fill, cover, contain, none, and scale-down.

The following examples demonstrate how different object-fit values affect image resizing.

• fill: It resizes the image to fit the content box, even if it has to stretch or squish the image.

img{
object-fit: fill;
}

• cover: The image retains its aspect ratio and scales to fill the container. Parts of the image may be clipped to ensure the entire container is covered.

img{
object-fit: cover;
}

• contain: Resizes the image to fit within the content box while preserving the image’s aspect ratio.

img{
object-fit: contain;
}

• none: It doesn’t resize the image at all.

img{
object-fit: none;
}

• scale-down: It resizes the image to its smallest version, as if it is specified as none or contain.

img{
object-fit: scale-down;
}

Talk to an Expert

Resizing Background Images in CSS

Background images are not specified directly in HTML but are set using CSS. The background property in CSS applies background images to HTML elements. Here are examples of how to use different CSS background properties.

Using background-size Property

The background-size property enables responsive scaling of background images to fit or cover their containers. The background-size property takes several values with respect to its parent container, such as ‘contain’, ‘cover’, fixed values, dynamic values, and more.

Here are the different values that the property can take:-

Using contain value 

The ‘contain’ value fits the image entirely within the container, making it fully visible. If the image is smaller than the container, there will be empty space around it. The following example demonstrates the use of the contain value.

div{

    border: 5px solid red;

    background: url(./sample.jpg);

    background-size: contain;  /* Scales the image to fit the container */

    background-repeat: no-repeat;  /* Ensures the image does not repeat */

    }

By default, the background-repeat property repeats the image to fill the container.

Using cover value

The ‘cover’ value scales the image to cover the container completely while preserving the aspect ratio. If the aspect ratio doesn’t match, parts of the image may be cropped to ensure full coverage of the container.

div{

    border: 5px solid red;

    background: url(./sample.jpg);

    background-size: cover;  /* Scales the image to fit the container */

    }

Using Specific Width and Height

It’s also possible to define exact width and height values for background images to control their dimensions precisely.

div{

    border: 5px solid red;

    background: url(./sample.jpg);

    background-size: 100% 100%;

    }

Using background-size with no-repeat

When using background-size: contain, the image may repeat to fill the container if background-repeat isn’t explicitly set. To prevent this, add background-repeat: no-repeat to ensure the image appears only once within the element.

div{

    border: 5px solid red;

    background: url(./sample.jpg);

    background-size: contain;  /* Scales the image to fit the container */

    background-repeat: no-repeat;  /* Ensures the image does not repeat */

    }

Different Image Sizes for Different Devices

While a large image may display well on desktops, it can lead to slower performance and scaling issues on mobile devices. Therefore, it is important to create appropriately sized images for different devices to ensure faster loading, better appearance, and overall website performance.

There are several ways to have proper image sizes for different devices.

• Media Queries: It allows developers to load different images based on viewport dimensions. Media queries is a powerful CSS feature that allows you to create multiple designs within a single website based on different screen widths. For example, a large image may be used for desktops, while a smaller version loads on mobile devices.
• Relative or Dynamic dimensions: Using relative units like %, em, rem, vh, or vw instead of fixed pixels is recommended for responsive scaling. This ensures fluid scaling of the website across different devices.
• Modern Image Formats:  Use image formats such as WebP and AVIF to balance the quality of the image and file size. Moreover, apply lazy loading to delay the loading of the images until they appear in the viewport, hence increasing the overall speed of the webpage. The syntax for applying lazy loading is shown below.

<img src="hero.jpg" loading="lazy" alt="Hero Image">

The HTML <picture> Element

The HTML <picture> element allows you to provide different versions of the same image, so that the browser chooses the best version depending upon the size, resolution, or image format support. Using the <picture> element helps deliver responsive and optimized images.

The syntax of using the <picture> element is as follows.

<picture>

        <source srcset="image.webp" type="image/webp">

        <source srcset="image.jpg" type="image/jpeg">

        <img src="image.jpg" alt="Sample Image">

      </picture>

How to Test the Responsiveness of the Resized Image

Testing Responsiveness of Images on Real Devices is a must to ensure it renders correctly on different devices of varying resolutions and screen sizes. Follow the easy steps below to test image responsiveness on real devices:

Step 1: Open BrowserStack Responsive Dashboard and enter the URL of the webpage containing the responsive image. If you have created a website on your local machine, you must host your website to test its responsiveness on BrowserStack Responsive.

Step 2: To check responsiveness, click Check.

Step 3: The user can check how the site appears on a certain device after choosing it.

Conclusion

The ability to resize images using CSS is an integral part of web design. This tutorial, explained how to resize images in CSS for responsive websites. For businesses, paying attention to every aspect of their digital presence is critical since even the tiniest error could have a big impact.

Resizing ensures that images are placed correctly inside their containers. Using max-width and max-height properties of CSS helped prevent the image from exceeding its parent container’s size. Thus, helped create a clean responsive website design. When customizing backgrounds with CSS, use the background-size attribute for seamless background resizing.

However, it is also crucial to perform responsive testing on your website to ensure that the design renders well on devices of different screen sizes and resolution. Thereby, making is ready to reach a wider audience. BrowserStack’s Responsive Testing Tool helps you test the responsiveness of your website on various desktop and mobile devices, helping you get a real look and feel of the website.

Bonus: Effortlessly convert Rem to Px and Px to Rem for responsive web design with our free tools.

Try BrowserStack Responsive for Free

FAQs

1. How to make image size smaller in CSS?

You can directly apply CSS to alter the image’s width and height. Other methods to resize images for optimization include using the Object-fit property, the max-width and max-height properties, and the background-size Property.

2. How to reduce image size in CSS?

You can use modern image formats such as WebP and AVIF to balance the quality of the image and file size. These formats give better compression than the JPG and PNG formats without distorting the quality of the image.

3. How to align image size in CSS

To align images in the webpage, you can use CSS properties such as margin, padding, width, height, and more. To align inline elements, you can use the ‘vertical-align’ property. However, the ‘text-align’ property is used for block-level elements. You can also use flexbox and CSS grid to align images.