Serve Images in Next-Gen Formats

Hey Tim, 

Yea, but we'd need to support legacy formats as well.  Can you let me know how you want to implement it in a page and benefits? (the why)?

In general I think I'd like to build/find a separate image thumbnailer/processor.   Let me know some more details on what you want to do.

Thanks!

Hi Dave.

I guess I would see it working that every standard image created from the upload (original + thumbs + crops) would have 2 versions - the original format plus the WebP.  Then allow the browser to choose which image format to use.

So, the code generator would output the various different images as usual, ut with the alternates as well.

I would use something like the following in the page code:

<?php foreach ($record['thumbnail'] as $index => $upload): ?>

<picture>
<source srcset="<?php echo htmlencode($upload['urlPath_webp']) ?>" type="image/webp">
<source srcset="<?php echo htmlencode($upload['urlPath_jpg']) ?>" type="image/jpeg">
<img src="<?php echo htmlencode($upload['urlPath_jpg']) ?>" alt="Alt Text!">
</picture>

<?php endforeach ?>

Here's a good summary of benefits and use: https://css-tricks.com/using-webp-images/ 

Hey Tim, 

There's a neat library here that dynamically redirects .png/jpg image urls for supporting browsers and generates .webp images:
https://github.com/rosell-dk/webp-convert/blob/master/docs/webp-on-demand/webp-on-demand.md

We couldn't potentially build something as well.  

That certainly looks easier to implement on my side :)

Hey Jesus.

I never went further with this - although it's something that keeps raising it's head wanting attention.

Hey Jesus, 

That library is now part of WebP Convert, which you can find here:

https://github.com/rosell-dk/webp-convert/

Cheers,

Hi Greg, thank you.

I'm still lots with the library as I don't need to convert files on the fly or similar. I've already my jpg and webp images properly located in the proper folder but I'm trying to figure it out how to call the proper image using the <picture> tag

<?php foreach ($record['imagen'] as $index => $upload): ?>
	<picture>
		<source type=“image/webp” srcset=“image.webp”>
		<source type=“image/jpeg” srcset=“<?php echo htmlencode($upload['urlPath']) ?>”>
		<img src="<?php echo htmlencode($upload['urlPath']) ?>"
	</picture>
<?php endforeach ?>

I uploaded the webp images manually to the same folder where I've my current CMS images.

or should I create a new upload field and then upload the webp image from the CMS and then try to use an IF statement to load the proper image (jpg or webp)?

Thanks for pointing me to the right direction

Jesus

Hey Jesus, 

Personally, I'd have a separate upload field in the section that stores only the WebP images. So there is one upload field that stores the jpeg images and one upload field that stores the webp images.  I'd ask CMS users to ensure that the webp images are in the same order as the jpeg images in the upload fields to make displaying them easier.

Then, on the front end of the site, I'd loop through the set of jpeg uploads and display the linked webp images together inside of a picture tag.

The great thing about this method is that if you were to build a plugin that automatically converts the images from jpeg to webp in future, you wouldn't need to update the front end code or the CMS sections. You could make it so that the plugin converts the jpeg image to webp, then saves it in the webp upload field.

Cheers,

Greg