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
, andheight: 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.