Image sizing basics in HTML - Deep Dive

Overview - Image sizing basics

What is it?

Image sizing basics teach how to control the size of images on a web page. This means deciding how wide and tall an image should appear to users. Proper sizing helps images look good and fit well with other page elements. It also affects how fast the page loads and how easy it is to use on different devices.

Why it matters

Without controlling image size, pictures can appear too big or too small, breaking the page layout or making it hard to see content. Large images slow down the website, frustrating visitors. Proper sizing ensures images look clear, load quickly, and keep the page neat and accessible on phones, tablets, and computers.

Where it fits

Before learning image sizing, you should understand basic HTML tags and attributes. After mastering sizing, you can learn about responsive design and optimization techniques to make images adapt to different screen sizes and improve performance.

Mental Model

Core Idea

Image sizing is about telling the browser how much space an image should take on the page, balancing appearance and performance.

Think of it like...

It's like choosing the right frame size for a photo before hanging it on a wall — too big or too small looks odd and can spoil the room's look.

┌───────────────┐
│   Image Tag   │
│ <img src=...> │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Size Settings │
│ width, height │
│ CSS rules     │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Rendered Size │
│ on Screen     │
└───────────────┘

Build-Up - 6 Steps

1

Foundation

What is an image element

Concept: Introduce the basic HTML tag for images and its default behavior.

In HTML, images are added using the tag with a source URL. By default, the browser shows the image at its original size, which depends on the image file's pixels. For example: will show the flower image at its natural size.

Result

The image appears on the page at its original pixel dimensions.

Understanding the default behavior helps you see why controlling size is needed to fit images nicely on different pages.

2

Foundation

Using width and height attributes

Concept: Learn how to set image size directly in HTML using width and height attributes.

You can add width and height attributes to the tag to tell the browser how big the image should be. For example: sets the image to 200 pixels wide and 150 pixels tall, regardless of the original size.

Result

The image displays at the specified width and height, stretching or shrinking as needed.

Knowing these attributes lets you quickly control image size without CSS, but it uses fixed pixel sizes that may not adapt well on all devices.

3

Intermediate

Controlling size with CSS styles

🤔Before reading on: do you think CSS width and height override HTML attributes or work alongside them? Commit to your answer.

Concept: Use CSS to style images for more flexible and powerful sizing control.

CSS lets you set image size using properties like width and height in stylesheets or style attributes. For example: makes the image half the width of its container and adjusts height automatically to keep the shape. CSS can use units like %, rem, vw, or px.

Result

The image size adapts based on CSS rules, allowing responsive and proportional scaling.

Understanding CSS sizing unlocks responsive design, letting images adjust smoothly to different screen sizes.

4

Intermediate

Aspect ratio and image distortion

🤔Quick: If you set width to 200px and height to 100px on a square image, will it keep its shape? Commit to yes or no.

Concept: Learn how width and height affect the image's shape and how to avoid distortion.

If you set width and height independently without keeping the original ratio, images can look stretched or squished. To keep the shape, set one dimension and let the other adjust automatically, like width: 200px; height: auto; or use the CSS aspect-ratio property to lock proportions.

Result

Images maintain their natural shape without distortion when sized properly.

Knowing how to preserve aspect ratio prevents ugly images and improves user experience.

5

Advanced

Responsive images with max-width

🤔Before reading: does max-width: 100% make images bigger than their original size? Commit to yes or no.

Concept: Use max-width in CSS to make images scale down on smaller screens but not grow too large.

Applying max-width: 100% to images means they can shrink to fit their container but never grow beyond their natural size. For example: img { max-width: 100%; height: auto; } ensures images look good on phones and desktops without pixelation or overflow.

Result

Images resize nicely on different devices, improving layout and load speed.

Understanding max-width helps create flexible layouts that adapt to screen size without losing image quality.

6

Expert

Using srcset and sizes for optimal loading

🤔Quick: Does the browser automatically pick the best image size without srcset? Commit to yes or no.

Concept: Learn how to provide multiple image versions and let the browser choose the best one for the device and screen size.

The srcset attribute lets you list different image files with their widths, like . The browser picks the best file to load, saving bandwidth and improving speed.

Result

Users get the right image size for their device, speeding up page load and saving data.

Knowing srcset and sizes is key for professional, performance-focused web design.

Under the Hood

Browsers read the tag and its attributes or CSS styles to calculate the image's display size. They reserve space on the page before loading the image to avoid layout shifts. When srcset is used, the browser evaluates device pixel ratio, viewport size, and media queries to select the best image source. CSS rules cascade and override HTML attributes based on specificity and order.

Why designed this way?

HTML attributes provide simple, fixed sizing for quick control, but lack flexibility. CSS was introduced to separate style from content, allowing responsive and dynamic sizing. Srcset and sizes were added to solve the problem of loading large images on small devices, improving performance and user experience.

┌───────────────┐
│ <img> Element │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Read HTML     │
│ width/height  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Apply CSS     │
│ width/height  │
│ max-width etc │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Calculate     │
│ final size    │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Load image    │
│ from src/srcset│
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does setting width and height attributes always prevent layout shifts? Commit to yes or no.

Common Belief: Setting width and height attributes on images always stops layout shifts during page load.

Reality: If the width and height do not match the actual image ratio, the browser reserves wrong space, causing layout shifts or distortion.

Why it matters: Incorrect sizing causes content to jump as images load, frustrating users and hurting accessibility.

Quick: Can CSS width: 100% make an image larger than its original file size? Commit to yes or no.

Common Belief: CSS width: 100% always scales images down to fit containers and never enlarges them.

Reality: If the container is wider than the image's natural size, width: 100% can stretch the image, causing pixelation.

Why it matters: Stretched images look blurry and unprofessional, harming user trust and design quality.

Quick: Does the browser automatically pick the best image size without srcset? Commit to yes or no.

Common Belief: Browsers automatically load the best image size for the device without needing srcset or sizes attributes.

Reality: Without srcset, browsers load the single image source regardless of device, wasting bandwidth and slowing load times on small screens.

Why it matters: Not using srcset leads to poor performance and user experience on mobile devices.

Quick: Does setting only width or only height keep the image's aspect ratio? Commit to yes or no.

Common Belief: Setting only width or only height on an image always preserves its original shape automatically.

Reality: If the other dimension is not set to auto or controlled by CSS, the image may distort or collapse depending on browser defaults.

Why it matters: Misunderstanding this causes distorted images that confuse or annoy users.

Expert Zone

1

Browsers reserve layout space based on width and height attributes to prevent content jumping, but if these don't match the image's intrinsic ratio, layout shifts still occur.

2

Using CSS aspect-ratio property is a modern way to maintain image proportions without relying on height:auto hacks.

3

Srcset combined with sizes allows fine control over image loading, but requires careful crafting of media queries and understanding device pixel ratios.

When NOT to use

Fixed pixel sizing is not suitable for responsive designs; instead, use relative units and CSS techniques. Avoid srcset if only one image version exists, but prefer it for performance. Inline styles for sizing can be replaced by CSS classes for maintainability.

Production Patterns

Professionals use CSS max-width: 100% with height: auto for fluid images. They combine srcset and sizes to serve optimized images for different devices. Lazy loading images and using modern formats like WebP further improve performance.

Connections

Responsive Web Design

Image sizing is a core part of making websites adapt to different screen sizes.

Mastering image sizing helps build layouts that look good on phones, tablets, and desktops without extra effort.

Performance Optimization

Proper image sizing reduces file size and load time, improving website speed.

Knowing how to size images correctly directly impacts user experience by making pages faster and smoother.

Human Visual Perception

Understanding how people perceive image clarity and distortion guides sizing choices.

Recognizing that stretched or pixelated images annoy users helps prioritize maintaining aspect ratio and quality.

Common Pitfalls

#1 Image appears stretched or squished.

Wrong approach:

Correct approach:

Root cause:

Setting fixed width and height that do not match the image's natural aspect ratio causes distortion.

#2 Image overflows container on small screens.

Wrong approach:

img { width: 500px; }

Correct approach:

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

Root cause:

Using fixed pixel width ignores container size and device screen width, breaking responsive design.

#3 Page layout shifts when images load.

Wrong approach:

(no width or height set)

Correct approach:

Root cause:

Not reserving space for images causes content to move as images load, hurting user experience.

Key Takeaways

Images default to their original size unless you specify otherwise using HTML attributes or CSS.

Using width and height attributes reserves space and helps prevent layout shifts but must match the image's aspect ratio.

CSS offers flexible and responsive ways to size images, especially with relative units and max-width.

The srcset and sizes attributes let browsers pick the best image version for device and screen size, improving performance.

Maintaining aspect ratio is crucial to avoid distorted images that degrade user experience.