Need some clarifications about <picture> tag - I'm a beginner

Question

I'm trying to write a tag that lets me to control several aspects of an image like:

• Responsive image sizes
• Art direction
• Partially supported image formats like avif or webp
• Fall backs to common image formats like JPG & PNG

I'm a beginner and I'm still trying to work out way to do this, I know there are many resources around but I haven't been able to find one that covers these at the same time, and I'm not sure how to write it myself. I've tried:

---

                    <picture>
                      <source media="(orientation: landscape)"
                              srcset="land-small-test-image.avif 200w,
                                      land-medium-test-image.avif 600w,
                                      land-large-test-image.avif 1000w
                                      land-small-test-image.jpg 200w,
                                      land-medium-test-image.jpg 600w,
                                      land-large-test-image.jpg 1000w"

                              sizes="(min-width: 700px) 500px,
                                    (min-width: 600px) 400px, 100vw">
                    
                      <source media="(orientation: portrait)"
                              srcset="port-small-test-image.avif 700w,
                                      port-medium-test-image.avif 1200w,
                                      port-large-test-image.avif 1600w
                                      port-small-test-image.jpg 700w,
                                      port-medium-test-image.jpg 1200w,
                                      port-large-test-image.jpg 1600w"
                                 
                              sizes="(min-width: 768px) 700px,
                                    (min-width: 1024px) 600px, 500px">
                       
                      <img src="land-medium-test-image.jpg" alt="Car">
                    </picture>

The values above are just examples, I'd be very grateful if anyone could clarify for me how a tag that covers those aspects should look like when written down properly.

Answer 1

About your approach. It's ok and good work for a first try :). There are a few tweaks you should do though.

• have a source tag for each file format
• if you have 200w as available size in srcset I would say remove the (min-width) in sizes as it's not representative

This point is more information then commenting on your approach

• if your design/client isn't using another image crop/orientation for the image in portrait vs landscape there is no use for it.

About file formats I generally have this approach. Use JPG unless there isn't transparency involved, then naturally PNG. About other file formats, that question can be deep and depend on many factors, things like client/project/budget/tech/region, if it makes sense go for it. Things to consider using

• webp has broader support then avif
• depending on the use case and project (client or not), make sure there is software to generate them.

To the main question. I made a few tweaks to your code as I explained above that should work ok.

There are online tools that can help you with breakpoints if you think that is hard (I do so myself there is nothing wrong with that). Cloudinary has a tool that is ok. Other then that I would recommend watching other large and respected Ecommerce/"regular" sites and inspecting their code.

<picture>
  <source media="(orientation: landscape)" srcset="land-small-test-image.avif 200w,
                                      land-medium-test-image.avif 600w,
                                      land-large-test-image.avif 1000w" sizes="400px, 100vw">

  <source media="(orientation: landscape)" srcset="
                                      land-small-test-image.jpg 200w,
                                      land-medium-test-image.jpg 600w,
                                      land-large-test-image.jpg 1000w" sizes="400px, 100vw">

  <source media="(orientation: portrait)" srcset="port-small-test-image.avif 700w,
                                      port-medium-test-image.avif 1200w,
                                      port-large-test-image.avif 1600w" sizes="600px, 500px">

  <source media="(orientation: portrait)" srcset="
                                      port-small-test-image.jpg 700w,
                                      port-medium-test-image.jpg 1200w,
                                      port-large-test-image.jpg 1600w" sizes="600px, 500px">

  <img src="land-medium-test-image.jpg" alt="A car">
</picture>