We help IT Professionals succeed at work.

Sanity Check for "Serve images in next-gen formats" from Google Insights

After running the Google PageSpeed Insights several times, one of the first things I get "dinged" on is "Serve images in next-gen formats".

I read the directions: I took the image into Photoshop and saved as JPEG 2000 but when I replace that image in my HTML, no images show. This is true for both my local machine and in Production.

Aside from:

  1. Changing the File format from .jpg to .jpf (in Photoshop)
  2. Replacing the HTML (e.g. image2.jpf)

Is there something I am missing?

Thanks for your help.

...
Comment
Watch Question

Top Expert 2016
the browser has to support the new file format... It also requires code modification
<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg"> 
<img src="image.jpg" alt="my image" width="100" height="100">
</picture

Open in new window

https://premium.wpmudev.org/blog/serve-images-next-gen-formats-webp/
TessandoIT Administrator

Author

Commented:
Thank you, David. I was able to find a decent plugin that will output a WebP format in Photoshop. I now have a .JPF file and a .WEBP file in addition to the original .JPG file.

It must be late on a Monday, as my brain can't seem to fit what the <picture> tag would look like in the following:

<div class="slider-item js-fullheight" style="background-image: url('images/ExerciseAndEating-25.jpg');"> 

Open in new window


How could I write that so that the new generation file formats are chosen? Would I be using the .JPF extension for the JPEG2000, as illustrated in your example above?

Thanks for your help.