The power of the HTML image tag and the versatility of the srcset

Question

The power of the HTML image tag and the versatility of the srcset

I am feeling a bit puzzled about how to properly use the srcset attribute within the HTML img tag. Despite reading multiple tutorials online, it seems that things are not functioning as described in those resources. Let's begin with a simple example:

<img src="assets/img/software-developer.jpeg" alt="Some Stuff" srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w">

In this case, I have two images:

```
assets/img/software-developer.jpeg
```
with dimensions of 450x450 pixels
```
assets/img/software-developer-300.jpeg
```
with dimensions of 300x300 pixels

Despite my attempts using Chrome Developer Tools for testing, I observe that regardless of the screen size I select, the image being downloaded is always

assets/img/software-developer.jpeg

. This is evident when looking at the currentSrc property under the Properties tab in Developer Tools.

Can someone shed some light on why this is happening? Ideally, I would like:

for screens with a width >= 450px, download
```
assets/img/software-developer.jpeg
```
for screens with a width < 450px, download
```
assets/img/software-developer-300.jpeg
```

Additionally, I am unsure about what occurs when the screen size is less than 300px:

If the smallest image available is

assets/img/software-developer-300.jpeg

with dimensions of 300x300 pixels, how can I adjust the code to allow it to resize and fit the viewport in such scenarios?

For instance, when using the Galaxy Fold device in Developer Tools with a width of 280 pixels, neither of the images fits the screen size: how should I update my srcset to enable resizing in this instance?

The internet contains abundant information relating to this topic, yet upon initial exploration, things appear somewhat perplexing. As a first step, I decided to conduct small tests focusing on srcset to verify if the expected image is being downloaded. Unfortunately, it appears that the tag is not performing as anticipated. It is clear that I am overlooking something crucial, and I am hopeful that someone here can provide clarification.

html css

Answer 1

Answer №1

It seems like the sizes tag is missing from your code.

sizes is used to define a set of media conditions, such as screen widths, and specify the optimal image size to choose based on those conditions.

To correctly implement this, you should write the code as follows:

<img src="assets/img/software-developer.jpeg" alt="Some Stuff" sizes="(max-width: 449px) 300px, 450px" srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w">

For more information, you can refer to this link: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#how_do_you_create_responsive_images

Answer 2

It seems like the sizes tag is missing from your code.

sizes is used to define a set of media conditions, such as screen widths, and specify the optimal image size to choose based on those conditions.

To correctly implement this, you should write the code as follows:

<img src="assets/img/software-developer.jpeg" alt="Some Stuff" sizes="(max-width: 449px) 300px, 450px" srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w">

For more information, you can refer to this link: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#how_do_you_create_responsive_images

Answer 3

Answer №2

I came to the solution on my own. Initially, using the srcset tag by itself doesn't make much sense; it should always be paired with the sizes attribute.

The srcset informs the browser about the available images, like this:

srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w"

In simple terms, this attribute tells the browser:

Hey, there are two options for images:

assets/img/software-developer-300.jpeg at 300 pixels wide
assets/img/software-developer.jpeg at 450 pixels wide

Next, you need to instruct the browser to use the former for screens less than 450px and the latter for screens 450px or wider. This is achieved with the sizes attribute:

srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w" sizes="(max-width: 449px) 300px,  (min-width: 450px) 450px"

In essence, for screens up to 449px, the 300px image version can be used, while for screens starting from 450px, the 450px version is recommended. However, some phones have screens smaller than 300px (e.g., Galaxy Fold's screen is 280px wide), leading to image cropping. To prevent this, it's necessary to inform the browser that if the screen size is under 299px, resize the image to 100vw. In my particular case, I found that using 75vw instead of 100vw worked better.

Answer 4

I came to the solution on my own. Initially, using the srcset tag by itself doesn't make much sense; it should always be paired with the sizes attribute.

The srcset informs the browser about the available images, like this:

srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w"

In simple terms, this attribute tells the browser:

Hey, there are two options for images:

assets/img/software-developer-300.jpeg at 300 pixels wide
assets/img/software-developer.jpeg at 450 pixels wide

Next, you need to instruct the browser to use the former for screens less than 450px and the latter for screens 450px or wider. This is achieved with the sizes attribute:

srcset="assets/img/software-developer-300.jpeg 300w, assets/img/software-developer.jpeg 450w" sizes="(max-width: 449px) 300px,  (min-width: 450px) 450px"

In essence, for screens up to 449px, the 300px image version can be used, while for screens starting from 450px, the 450px version is recommended. However, some phones have screens smaller than 300px (e.g., Galaxy Fold's screen is 280px wide), leading to image cropping. To prevent this, it's necessary to inform the browser that if the screen size is under 299px, resize the image to 100vw. In my particular case, I found that using 75vw instead of 100vw worked better.

The power of the HTML image tag and the versatility of the srcset

Answer №1

Answer №2

Similar questions

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

How can the data from a factory be utilized within the same controller but in a separate file in an AngularJS application?

Converting HTML code into executable PHP code

having difficulty retrieving the initial selected value of a dropdown using selenium

Svelte's feature prevents users from inputting on Mapbox

Adjust Bootstrap column alignment to left side

Editable JSON data within a table using Twitter Bootstrap

The origin of the recipient window does not match the target origin provided when using postMessage on localhost

the overflow issue with Summernote's dropdown menu

Tips on inputting pre-made HTML codes into a WordPress post

What benefits does a dynamic website like this offer compared to one that is purely AJAX-based?

How to Fetch Data Using jQuery AJAX in PHP Without Page Refresh

Utilizing JavaScript to dynamically alter the animation property within CSS

What is the method for showcasing AM and PM in various languages within the input type of time?

Automatically adjust the size of a parent div that houses two child divs

What could be causing the appearance of a mysterious grey box hovering in the upper left portion of my image and why is the code only adjusting the size of the grey box instead of the entire

Switch the text color of the checkbox option

What is the best way to reference the className within nested SCSS when working with Next.js and React.js?

What is the best way to transform a Bootstrap4 navbar into a mobile-friendly sidebar?

React JS Bootstrap Dropdown Troubleshooting