Flower.jpg WORK

The &LTpicture>, &LTsource>, and &LTimg> tags, including how they are ordered relative to each other, all interact to achieve this end result.&LTpicture> #The &LTpicture> tag provides a wrapper for zero or more &LTsource> tags and one &LTimg> tag.&LTsource> #The &LTsource> tag specifies a media resource.The browser uses the first listed source that's in a format it supports. If the browser does not support any of the formats listed in the &LTsource> tags, it falls back to loading the image specified by the &LTimg> tag.Gotchas- The &LTsource> tag for the "preferred" image format (in this case that is WebP) should be listed first, before other &LTsource> tags. - The value of the type attribute should be the MIME type corresponding to the image format. An image's MIME type and its file extension are often similar, but they aren't necessarily the same thing (e.g. .jpg vs. image/jpeg).&LTimg> #The &LTimg> tag is what makes this code work on browsers that don't support the &LTpicture> tag. If a browser does not support the &LTpicture> tag, it will ignore the tags it doesn't support. Thus, it only "sees" the &LTimg src="flower.jpg" alt=""> tag and loads that image.GotchasThe &LTimg> tag should always be included, and it should always be listed last, after all &LTsource> tags.The resource specified by the &LTimg> tag should be in a universally supported format (e.g. JPEG), so it can be used as a fallback.Reading the HTTP Accept header #If you have an application back end or web server that allows you to rewrite requests, you can read the value of the HTTP Accept header, which will advertise what alternative image formats are supported:

flower.jpg

041b061a72