Replace a .jpg image with .webp
and vice versa
The usual static image file format for web pages is .jpg. An original .jpg can be optimised in a program like Adobe Photoshop but only by losing some image quality. JPEG images are 'lossy' – they lose information when compressed and when they are compressed too much, the result is not acceptable. The point of optimising (compressing) a .jpg image is to reduce its file size (number of kilobytes) so a browser loads it faster along with the rest of the web page, and that's a good thing as long as the image still looks ok.
Significantly smaller file sizes can be achieved by using images with the .webp file format.
Wikipedia: WebP is an image file format developed by Google intended as a replacement for JPEG, PNG, and GIF file formats. It supports both lossy and lossless compression as well as animation and alpha transparency.
By now, the vast majority of web browsers support WebP so things are moving on. A .webp image file must be deployed differently however, inside the HTML picture element along with a .jpg. At it's simplest:
<picture> <source type="image/webp" srcset="img/filename.webp"> <img src="img/filename.jpg" max-width="1200px" height="auto" alt="" class="name" loading="lazy" decoding="async"> </picture>
In the example above, when the browser supports WebP the .webp file is loaded, otherwise the .jpg is. The CSS class applied to the .jpg image automatically applies to the .webp image. The source type : srcset line (and therefore the .webp image) is not styled directly but the containing HTML picture element can be.
Getting a WebP .webp image
Below, you are probably seeing a WebP image (assuming your browser pupports WebP, which is likely). If not, you are seeing the original JPEG version. The WebP was made just by saving the JPEG in Photoshop as a 'lossless' .webp. The JPEG filesize is 279 kB and the WebP is 174 kB – a worthwhile reduction.
Here is the JPEG:
Maybe the JPEG is a tiny bit sharper, or maybe it isn't. The difference in quality (if there is one) is barely noticeable. QED.
If you don't have Adobe Photoshop you can easily convert JPEG to WebP (free) on various websites. Squoosh is just one example.