Skip to content

RESOURCES / BLOG

How to Edit Picture Size in HTML: The Easy Way

To resize a picture in HTML, you can control its dimensions using HTML attributes, inline styles, or external CSS. These methods adjust how the image is displayed without changing the original file.

The simplest way to resize an image is by setting width and height directly in the <img> tag.

Example:

<img src="your-image.jpg" width="300" height="200" alt="Description of image">Code language: HTML, XML (xml)

This resizes the image to exactly 300×200 pixels.

Pros: Super quick and beginner-friendly
Cons: Not responsive, it won’t scale on smaller screens.

A more flexible method involves using inline style attributes to define width and height.

Example:

<img src="your-image.jpg" style="width: 50%; height: auto;" alt="Responsive image">Code language: HTML, XML (xml)

This sets the image to take up 50% of its parent container’s width, while height: auto ensures the aspect ratio is preserved.

Pro Tip: Always include height: auto when resizing by width to avoid distortion.

This approach keeps your HTML clean and is best for projects that require reusable styling.

CSS:

.resized-image {

    width: 100%;

    max-width: 500px;

    height: auto;

  }Code language: CSS (css)

HTML:

<img src="image.jpg" class="resized-image" alt="Styled image">Code language: JavaScript (javascript)

This makes the image flexible and scales it up to 500px wide at most, adjusting automatically to smaller screen sizes.

CSS gives you even more control beyond just width and height:

  • Fixed dimensions: width: 300px; height: 200px;
  • Percentage-based dimensions: width: 50%; height: auto;
  • Responsive behavior: Combine max-width, min-width, and height: auto for fluid scaling.
  • Object-fit for layout control: This determines how the image fills its container.

Example with object-fit:

.resized-image {

  width: 100%;

  height: 100%;

  object-fit: contain;

}Code language: CSS (css)

This keeps the image scaled proportionally while ensuring it fits the entire container without being stretched or cropped.

Instead of resizing in the browser, you can use Cloudinary to serve perfectly sized images from the server, improving performance and reducing load times.

Example:

<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_auto,f_auto/sample.jpg" alt="Cloudinary image">Code language: HTML, XML (xml)

What this does:

  • Resizes the image to 400px wide
  • Applies q_auto for optimal compression
  • Uses f_auto to deliver next-gen formats like WebP or AVIF

You can combine this with responsive design using srcset or media queries.

To ensure images scale on mobile devices and small viewports, apply this responsive pattern:

<img src="image.jpg" style="max-width: 100%; height: auto;" alt="Responsive image">Code language: HTML, XML (xml)

This makes the image shrink with the screen size while preserving its proportions. For best results, combine this with Cloudinary’s image delivery tools or srcset attributes.

If you’re wondering how to edit picture size in HTML, you have several great options depending on your needs:

  • Use basic HTML attributes for quick, fixed-size adjustments
  • Use CSS for responsive layouts and design flexibility
  • Use Cloudinary to deliver dynamically resized, performance-optimized images right from the URL

Correctly resizing images improves your site’s UX, SEO, speed, and consistency across devices, all critical for any web project.

Start using Cloudinary for free and make image handling scalable, smart, and incredibly efficient.

Start Using Cloudinary

Sign up for our free plan and start creating stunning visual experiences in minutes.

Sign Up for Free