Support for webp image format

Hello,
Looking to create a slideshow using the element so as to be able to degrade from webp to jpg on devices that are not yet webp capable.

I’m seeing that we can add a webp image to the Resources area but can not drag it onto the stage. Nor can we select a .webp file when using the add image area.

Is this something in development or is there a special way to get a webp image on the stage?

We may add support for this image format in the future, but at this time it is not widely supported on the web: https://caniuse.com/#feat=webp

But you can currently use it in your document if it is in your resources library:

<img src = "${resourcesFolderName}/myImage.webp">

Is there a way to use the ‘picture’ element in Hype, specifying multiple images to downgrade in browsers lacking webp support?

Other than the couple browsers that do not support webp (yet), it is becoming more relevant as website performance becomes a more critical metric for SEO.

SEO is so much more competitive today and being able to serve up both different size images based on a viewport size as well as using formats such as webp is becoming critical.

So rather than just focusing on Responsive CSS websites, @media conditional cases and using more efficient image formats is forcing many of us to abandon common prior technogies and search out new methods. Possibly, Hype would want to be one of the options.

On this same topic, we are getting penalized for using traditional lightbox slideshows that use an anchor link to a image over some other method. For example, if you have a website that has many linked slideshows, from an SEO perspective, you might be presenting your website as having a large percentage of links to images which takes away from your other, more critical links. I’m having to use a no-follow attribute but still looking for other resouces which brings me back to Hype.

Sure, it would look like this:

<picture>
  <source srcset="${resourcesFolderName}/dice.webp" type="image/webp">
  <img srcset="${resourcesFolderName}/dice.png" alt="dice">
</picture>

Quick demo: webp.hype 2.zip (113.3 KB)

This example is from: https://css-tricks.com/using-webp-images/

The picture element gives you pretty cool responsive features you can also take advantage of.

How do you know you’re being penalized? Are you looking at your Pagespeed insights score?

1 Like

Yes, your reference from css-tricks is exactly what I use in static applications. Webp is pretty incredible for compressed image formats. I have some other examples here. 1200% improvement over png.

Regarding the SEO it’s not a direct penalty but a notice from SEM Rush on how these links delute other, more relative links. They are noting it may be a sign of poor archtecture but I’m more concerned of taking focus away from intended internal back links. The nofollow attribute helps but then excludes those image from being cataloged. My goal is to come up with a better slideshow where the images are based on a php array so not direct anchor links.

Thank you for the example file.
Does picturefill.js do something special? In the attached file lacking picturefill it seems browsers are happy to accept the @media attribute without the attached js file. The attached file will show either the jpg or webp file based on the viewport size which is useful as well as use the picture tag to enable browsers like safari to degrade to the png version.

webp 2.hype.zip (121.9 KB)

Oh I didn’t mean to have that in there – left it in from some testing. It adds some nice features for responsive images based on media queries. You could pair this markup with Hype’s responsive layouts to speed up image loading for smaller layouts:

<picture>
  <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
  <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
  <img srcset="examples/images/art-medium.jpg" alt="…">
</picture>

In Hype, you may need to run picturefill(); ‘On Prepare for Display’ to ensure it is triggered. But it automatically will run on a browser resize.

DEMO: https://scottjehl.github.io/picturefill/examples/demo-03.html

There’s a few companies that capitalize on the complexity of this stuff (feature detection, image rendering, serving, processing). Cloudinary is one: https://cloudinary.com/documentation/responsive_images / https://cloudinary.com/documentation/responsive_images#automating_responsive_images_with_javascript

1 Like