Menu
Working on a portfolio for a photographer / videographer and trying to find a good balance between fast load and good image quality on mobile devices. So far, I'm keen to bet on the picture element to load multiple versions of the images based on device max width like so:
<picture> https://stackexchange.com/users/10606791?tab=reputation
<source media="(max-width: 360px)"
srcset="picture_small.jpg">
<source media="(max-width: 640px)"
srcset="picture_medium.jpg">
<source media="(max-width: 1366px)"
srcset="picture_large.jpg">
<img src="picture_original.jpg" width="6000" height="4000"
alt="Really usefull description for each image">
</picture>
My concern is that the "alt" attribute will be ignored all together by user agents for the first 3 versions of the picture and hope of search engines to use it is also a long shot.
650
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
Alt tags provide context to what an image is displaying, informing search engine crawlers and allowing them to index an image correctly. However, not only do alt tags help search engine crawlers, not setting alt tags for your images can have a detrimental effect on the ranking of your web pages.
Alt text provides better image context/descriptions to search engine crawlers, helping them to index and rank an image properly in image search. It also provides search engines with contextual information about the content on the page.
If no alt attribute is present, the screen reader will read the file name for the image instead, which can be a major distraction to those using screen-reading technology.
The <picture> element is a container only. The <img> element is the main part describing its contents. <source> only describes different sources. So the alt remains the same for all of them.
You cannot have a picture element without an img element. alt is a requirement in <img> and is part of its specification in the standard.
114
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
