Responsive images: Important rewrite

Amer-Adel commented 11 months ago

MDN URL

https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

What specific section or headline is this issue about?

How do you create responsive images?

What information was incorrect, unhelpful, or incomplete?

— a somewhat easier syntax! It not about easier or harder, the two ways are different depending on the use case, The first way (Resolution switching: Different sizes) we work on the screen size mean large screen display the large image width and versa so the image display size in the different screens is not static, While in the second way we work on the resolution of the screens so my mobile actually request the 640w.jpg but my laptop needed the 480.jpg since the display size of the image is static in the different screens, which is totally different from the previous way.

Also in the art Art direction section the context of using picture for this is wrong we can easily using the first way (srcset, sizes), pictures element should use for the advanced case that when we use deferent images (for the first resolution switching Or art direction) and then will use a also the second way (srcset with x-descriptors) to provide different resolutions for each specific image size. So it should use in its correct case not as a solution for the art direction instead of its easy solution as the first reclusion switching case.

One point more, there is no need to use CSS pixels in the Resolution switching: Same size, different resolutions because the srcset with x-descriptors way take its initial width from the first image source (1x) any way.

What did you expect to see?

Delete this sentence because it lead to wrong related between the two ways, and point the difference between them depending on the specific use case. Also please review the whole two sections (Resolution switching: Different sizes, Resolution switching: Same size, different resolutions) as they become confusing from the title.

Also write the correct solution for the art direction problem, and mention for the advanced case when we need the picture element.

Finally please delete the Note in the art direction section, as its first part wrong depending on the above explains, And the second part just make a mess what will make us use the sizes attribute in the source element... it is allowed at all!

So hope you review and rewrite this whole section gradually until we arrive from using srcset&sizes (which solve art direction Or resolution switching depending on the viewport widths) and srcset&x-descriptors&CSS width (which solve resolution switching depending on the device resolution) to using picture&CSS width (wich allow us to merge the two ways to git better complex result if it needed... so we can change the image size for each viewport and choose the better resolution for this size also depending on the device resolution) which is probably good to use always with the first case instead of just using srcset&sizes without take on mind the resolution side.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

Practical example

MDN metadata

Page report details

* Folder: `en-us/learn/html/multimedia_and_embedding/responsive_images` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/learn/html/multimedia_and_embedding/responsive_images/index.md * Last commit: https://github.com/mdn/content/commit/751d58669499de0c6ea0d5b356e0e1448418c5d3 * Document last modified: 2023-06-30T06:21:35.000Z

Lymah123 commented 11 months ago

Hi, can I work on the issue?

hamishwillee commented 11 months ago

@Lymah123 You can work on any issue that doesn't already have a PR against linked against it. When you create your PR you add text Fixes #29530 in the description of that PR and that will a) create a cross link here so no one else works on it b) means this will be automatically closed if your PR merges.

This issue has not been triaged. I have not looked at this, but sometimes people make issues and when you look at them you realize

that the person is wrong - there is no issue, or
they are right about a problem, but their suggested fix is not appropriate.
they are right, but the perceived issue is too minor to be worth time fixing.
and so on

So before you take this, or any issue, please check that you agree with the issue problem and solution - don't just apply the fix as suggested unless it makes sense to you, and you can't see a better one.

Amer-Adel commented 11 months ago

Please any one do it! I'm want this to be clear for me to move to the next step in my study.

Lymah123 commented 11 months ago

@Lymah123 You can work on any issue that doesn't already have a PR against linked against it. When you create your PR you add text Fixes #29530 in the description of that PR and that will a) create a cross link here so no one else works on it b) means this will be automatically closed if your PR merges.

This issue has not been triaged. I have not looked at this, but sometimes people make issues and when you look at them you realize

that the person is wrong - there is no issue, or

they are right about a problem, but their suggested fix is not appropriate.

they are right, but the perceived issue is too minor to be worth time fixing.

and so on

So before you take this, or any issue, please check that you agree with the issue problem and solution - don't just apply the fix as suggested unless it makes sense to you, and you can't see a better one.

Great! Thanks for the tips @hamishwillee .

Josh-Cena commented 3 months ago

— a somewhat easier syntax!

This is just a remark. It's not saying that the difference between the examples is just the difficulty of the syntax. The different use cases are very well articulated in the paragraph and in the section title already.

Also in the art Art direction section the context of using picture for this is wrong we can easily using the first way (srcset, sizes), pictures element should use for the advanced case that when we use deferent images (for the first resolution switching Or art direction) and then will use a also the second way (srcset with x-descriptors) to provide different resolutions for each specific image size.

img srcset is intended for images with identical content but different intrinsic sizes. Here, we are actually displaying images with different content. That's the entire meaning of "Art direction", is that just adjusting the size is not enough, but we actually need to crop the image differently.

there is no need to use CSS pixels in the Resolution switching: Same size, different resolutions because the srcset with x-descriptors way take its initial width from the first image source (1x) any way.

That's true but:

It only happens after you load the image.
We intend to show how intrinsic sizes interact with CSS pixels here.

Therefore I think this page is acceptable in its current form. There are some details implied, but no critical information is wrong or incomplete.

mdn / content