Page speed plugin confusion

0
votes

so I get this for my website, https://gettysburgconnection.org when I run Google pagespeed insights.

Serve images in next-gen formats 17.1 s Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. Learn more. WordPressConsider using a plugin or service that will automatically convert your uploaded images to the optimal formats.

OK, but I also know that adding plugins is not ideal. How should I (easily) convert my images going forward to .webp?

1
pagespeedgoogle-pagespeedpagespeed-insights
The WebP Express plugin is the best and free. It does all the conversions for you, alters the HTML and creates new WebP images the moment you upload them. It loads no js or css on the front end only in the admin side. It does however require command line linux tools for the image conversions. - MitchellK

1 Answers

0
votes

A plugin is your best option for WordPress unless you don't mind manually converting all your images to .webp.

However if you are against plugins (and I understand why given that they tend to cause endless issues and security holes) and you don't mind converting your images over using a custom or command line utility etc. there is an easy way to serve webP images.

What we do is use .htaccess to tell the server to look for the header that says a browser accepts webp images and redirect all requests for .jpg / .jpeg to the .webp version.

In case you have other formats you want to convert I have included conversion of .png files as well (RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp ) so that you can see how to add other image types using the | character in the regular expression.

For the following to work your .webp images must be placed in the same folder and named the same.

.htaccess for serving webp images

AddType image/webp .webp

<IfModule mod_rewrite.c>
  RewriteEngine On

  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} -f
  RewriteCond %{REQUEST_FILENAME}.webp -f
  RewriteRule ^/?(.+?)\.(jpe?g|png)$ /$1.$2.webp [NC,T=image/webp,E=EXISTING:1,E=ADDVARY:1,L]

  <IfModule mod_headers.c>
    <FilesMatch "(?i)\.(jpe?g|png)$">
      Header append "Vary" "Accept"
    </FilesMatch>
  </IfModule>
</IfModule>

It isn't ideal

The problem with the above is that it will serve webP images, but they will still have the .jpg extension.

They will render just fine as the browser will look at the mime type but it could cause some confusion if people try to save any images from your website.

Short answer is - find a decent and secure plugin to do this for you as the good ones will actually rename the files correctly and do all of the conversion for you.