Support Modern Image Formats With Fallback Picture

On 3 minutes, 22 seconds read By Edward

HTML Fallback For Modern Image Formats

All modern major web browsers support modern image formats such as WebP and AVIF.

HTML provides a way to support modern image formats with a fallback option.

HTML Picture Tag

Picture Support
Name Type Year
Chrome Web browser 2014
Opera Web browser 2014
Edge Web browser 2015
Firefox Web browser 2015
Safari Web browser 2016
Websites Recommend if applicable 2024

Glossary:

Element

Defined by a start tag, content and end tag. A void element does not have a closing tag.

Tag

Simple instructions telling a web browser how to format content.

Attributes

Additional values that configure elements or adjust them to meet user criteria.

Type

Specifies the MIME type and optionally a codec parameter.

Srcset

URLs of media resource separated by commas.

Sizes

List of source sizes separated by commas.

Media

CSS media query for responsive design.

Height

Intrinsic height of image in pixels.

Width

Intrinsic width of image in pixels.

Picture Element:

<picture>
	<source srcset="ojamboservices-banner-wide.png" media="(min-width: 800px)" />
	<source srcset="ojamboservices-banner-medium.png" media="(min-width: 600px)" />
	<img src="ojamboservices-banner-narrow.png" alt="OjamboServices.com Banner" />
</picture>

Screenshots:

OjamboServices.com App Development
Modern Web Image Version Of OjamboServices.com Application Development Banner

If you need help to convert to WebP or AVIF for SEO or space reasons then contact Ojambo Services. Also if you want to learn programming to “do it yourself” then try Learning PHP which is an online ebook. The only requirement is a web browser. You can use the built-in Web IDE to view your code and compile it online to view the result. You pay once for the online book and get access to the book at anytime without extra costs.

OjamboShop.com Online Learning PHP
Modern Version Of OjamboShop.com Learning PHP Interactive Banner

Conclusion:

Take this opportunity to learn PHP programming language by making a one-time purchase at Learning PHP. A web browser is the only thing needed to learn PHP in 2024 at your leisure. All the developer tools are provided right in your web browser.

References: