Use of picture tag

Question

Good afternoon, I have the following structure:

<picture>
   <source media="(min-width:min-width:1440px)" srcset="img/main_banner_info-1440px+.png">
   <source media="(min-width:min-width:660px)" srcset="img/main_banner_info-660px~1439px.png">
    <img src="img/main_banner_info-320px~659px.png" alt="Informações: IdeaBag, central de ideias programadas">
</picture>

However, when running in the browser, only the element <img> is displayed, no matter the size of the page, I checked the url’s and they are all correct, however, they do not work, I tested in the current versions of firefox and Chrome. Why this error occurs, and how can I correct it?

Answer 1

You have written the content of the MEDIA attribute twice, it confuses the functioning:

min-width:min-width:1440px

Correct:

min-width: 1440px

I believe that the MEDIA attribute works equally CSS3, so it follows the same pattern to understand responsive pages and the IMG TAG is if none of this can be loaded or the browser does not support this TAG.

Comment on alternative method:

Source: Tag does not work on mobile phones and IE11

If you want to use alternative Mma is the use of attributes srcset and sizes right on the tag img, where it is possible to specify different images for different resolutions. According to Can I use..., the resource is already widely supported (http://caniuse.com/#feat=srcset).

Example:

<img src="small.png" 
     srcset="large.png 1280w, medium.png 640w, small.png 320w" 
     sizes="(max-width: 500px) 250px, 500px" 
     alt="">

In the srcset, you specify the address of the image and right after its width in pixels (1280w). In the attribute sizes, the browser is indicated the breakpoints using a media querie and the size the image will be displayed. The size (max-width: 500px) 250px, 500px tells the browser "if the viewport is less than 500px, the image will be 250px wide. If larger, the image will be displayed 500px wide. The browser will choose which of those images best fits this situation.