Powerful feature using the Picture...

User 244626 Photo


Registered User
811 posts

If you use the url linking of the source for the picture element or picture link element you can deliver two url sources to display a standard image and then one for higher dpi (retina or hd) in the same field.

Simply first create the src image link at the lower breakpoint which is the one that will be indexed, and then move up to the next breakpoint(s) you want your optional srcsets to be displayed. After linking the first url link for the standard image, you can add a comma and then a space and add another url link for your higher definition image followed by the required "2x" descriptor. This really works to deliver crisper pictures to those devices with displays capable of displaying them.

I am in love with the picture element again.....

Example


<picture><!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 768px)" srcset="https://www.coffeecup.com/images/homepage/RED-responsive-homepage.png, https://www.coffeecup.com/images/homepa … age@2x.png 2x";<!--[if IE 9]></video><![endif]--><img alt="Placeholder Picture" src="https://www.coffeecup.com/images/homepage/RED-responsive-homepage.png">
</picture>
Bootstrap 5 CSS Grid.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.