On the internet we love to see pictures. We learn faster and absorb more with an image or video. On the outside we take the technology for granted most of the time, but on the inside, there are some important image technology differences. JPG or WEBP or PNG or GIF. Which image type is really better?
The motivation of this article stems from several discussions with web developers and other website owners that question the silliness of WordPress Plugin programmers that push the "new" so hard - without consideration for the facts. I am not sure what drives it, but it certainly discredits the companies that do it.
While I don't have the proof, I really think ignorance on both sides - the programmers (or team management), and the customers - is the real cause. While I know many website creators do not really understand images, I feel like some education would be better than promoting ever greater ignorance.
I suppose the real issue is that I dislike it when companies use their credibility to promote something that is not really true. In the case of images like JPG or WEBP or PNG or GIF, there is not a clear "always". The situation should dictate the best image technology, not the other way around.
Examining Image Technology Differences
In the earlier days of the internet - back when dial-up was the way to access it - web page size was king. To have a good website the total size (in kb) had to be small. We wrote everything in the most efficient HTML, and the images were as lightweight as practical. GIF images were everywhere because they offer a small size, and the ability to control parameters like how many colors (limited to 256) - which affects file size. And, animation to add a fun flavor.
JPG images don't have the color limits, but the compression technology can make images fuzzy. Fortunately, you can choose the compression level, but less compression means larger image file sizes.
PNG is kind of the sweet spot between GIF and JPG in that it honors the pixel (no fuzzy compression), and it also allows file size control with number of colors - but without the limit of colors. Another advantage of PNG over JPG is the transparent pixels, like to remove a background. PNG offers high quality, or low quality, and something between. On the other hand, PNG is not usually a smaller file size than a similar GIF or JPG, nor does PNG offer animation like GIF.
The latest tech is WEBP. These have a different compression which does not offer control. Under some circumstances they offer greater compression, and it is supposed to be "lossless". One other effect is WEBP images are harder to copy, and harder to modify. That makes them attractive on the internet, BUT there are easy ways around it, so I am not sure what value it has?
Of course, there is a lot more to each image technology than I will mention here. This much, however, will suffice for now.
What Defines "Better" For Images?
We ask the question often - Which is Better? Yet, What do we mean by "Better"?
If we step away from the image content and personal preferences of the image and look only at the final output - then we are considering the differences in image technology. In other words, if we take the exact same source, and output it as JPG or WEBP or PNG or GIF, then examine differences. Now what do we mean by "Better"?
That can certainly mean image quality - like is it fuzzy, clear, etc. It can mean the visual effect, like is it stunning, or do color reductions degraded the image? For our purposes, Better can also mean file size. A smaller file size helps web pages load quicker, and that has advantages.
In the world of the internet, even though we have fast speeds, file size of the website - including all the images - still matters. Large images can really slow down a website. So, to me, "Better" is the balance of visual image quality, and the file size for delivery.
It is easy to make files small - just by making the image small. A tiny image like this 
will always be a smaller file size than a big one like those below. That means "Better" is also a balance of the visual effect - like can I use an image of the size I want on the web page without making the files size too huge?
To me, "Better" is a subjective balance of many factors, and the answer is different for each situation.
Why Do Some Software Vendors Push WEBP So Hard?
One of the plugins I use for Cache also pushes hard on the WEBP - as if it is magic. When I have messed with it, the WEBP are almost always larger file size than the originals - even when they make them in various sizes. Their images - normally - need to be 1/4 the pixel count to get down to the same file size as the original.
I don't know know what the algorithm is doing with the images, but I absolutely know I don't want their one-size-fits-all programming to touch my images.
I find it a bit insulting that they push this lie so hard. Let's examine some image samples to see.
Which Is Better? JPG or WEBP?
Here are 2 images - well, actually the same photo output with two technologies. Which is Better?
For these samples, the images are both made to an acceptable visual presentation level - IMHO. We can compress them more, or make them visually smaller to reduce file size, but I want it to be a fair comparison. (Image from the Mechanical Elements article on U-Bolts.)
Which image is better? The first? Or the Second?
The first image is WEBP, file size 68kb.
The second image is JPG, file size 29kb.
If we blindly go with the strongly recommended WEBP image technology, we end up with an image that takes 2.3 times longer to display. For one image that might not matter too much, but for many, it adds up. Why are they pushing us to have a slower website?
Which Is Better? WEBP or PNG?
Let's look at another example. Which image is better? WEBP or PNG?
Which image is better? (Image from Synthesis article on Joining Beams.)
The first image is JPG, file size 13kb. Sorry I had to throw in a curve ball even though we are comparing WEBP or PNG.
The second image is PNG, file size 16kb.
The third image is WEBP, file size 16kb.
In this case the image technology between WEBP or PNG does not matter so much. PNG allows a transparent background, that WEBP does not. Maybe that is important to you, or maybe not. It depends on the situation.
However, I put the JPG image also in this group to highlight one of the pitfalls. When there are large areas of a single color (in this case white by gray), the image quality degrades quickly with JPG. Another image technology like PNG or GIF will respect the pixel, so they don't degrade at the transition between colors. To me, this JPG image with all the "fuzz" is not acceptable.
Another Comparison: JPG or WEBP or PNG or GIF
Here is one more example. This one a line art image. Which image is better? JPG or WEBP or PNG or GIF?
Which image is better? (Image from Synthesis article on Joining Beams.)
From what we say above, can you pick out the JPG image? That should be pretty obvious.
In this case, the largest file size image looks the worst. The others have a similar appearance, so we look at file size. The next largest file size is the WEBP. If this is the one the software systems seem to push, how is that better? Actually, the automatically generated is not the best.
The best looking ones are the smallest file sizes. This will will help the webpage be fast, and provide a better viewing experience. I think that makes it best.
The first image is GIF, file size 10kb.
The second image is WEBP, file size 13kb.
The third image is PNG, file size 8kb.
The fourth image is JPG, file size 14kb.
For this type of image, JPG or WEBP both fail. The winner here is one of the old technologies - GIF or PNG. In the 3rd example of the trailer sketch, the PNG looks the best to me, and it is also the smallest. Hence, it fits my definition of better.
Many online website critique apps will give this website a lower score because I choose to optimize for the customer rather than rely on the misleading automatic tools. That is so sad - because it shows their lack of sophistication in knowing about the technologies. Oh well. On the other hand, they usually rate this website good for speed. I always wonder why they don't understand that one done well leads to the other. It is NOT just the image technology.
Anyway, I am more concerned about delivering a fast website to you, with good images, than about the critique apps.
So Which Image Technology Is Better?
In my opinion, it is not a matter of which image technology is better, rather which technology works best for the image. In the examples above, we see a photograph (with a million colors), a CAD image (with the shading has thousands of colors), and a drawing (with a few hundred colors). It looks black and white, but with the Anti-Aliasing, there are actually many gray colors.
The best tech for busy photographs is different than the best image technology for a line drawing.
Here are the rules of thumb that I usually use:
- For photographs, JPG is the go-to image technology. With proper care in compression level, they are almost always better images at a smaller file size than WEBP.
- For images with large areas of the same color, like the CAD or drawing images above, JPG is almost never the best choice. Image quality compromises and larger file size - don't make a good combination.
- For images with large areas of the same color, like the CAD image above, it is a toss-up with WEBP or PNG. With color reduction for PNG, the file size is often a little smaller, though if color count is high, then WEBP can be better. Either way, they are usually pretty close in file size. PNG gives more control over the final image, crispness, etc., however, so I often use PNG.
- For sketch images, like the line drawing image above, PNG or GIF will almost always win.
- If the images are massive, like right from your camera - and you refuse to size them properly for a website - then WEBP offers some advantages. Since this is such a common problem with website contributors, I think that is why WEBP is pushed so hard. Unfortunately, they are also attempting to trap those of us who take the time to create right-size, good-quality, optimized images. Oh Well.
The Best Technology, Hands Down, By Far, Every Time —
There is one image technology we have not yet discussed. It is the best in every situation. It gives the highest quality images and the lowest practical file size.
What am I talking about? The practical application of common sense.
Your brain is the greatest super computer ever created! It is NOT Artificial Intelligence, it's the Real Thing!
Take the time to make your images the right size for your website. Decide how big they need to be based on the value they bring to the page. Optimize them for the need, then experiment just a little to find the right balance of image file size, versus visual appeal. I do it with the help of a pretty cheap program called Paint Shop Pro. Other image software will do the same.
Yes, Using your brain is still the best technology available, because it is not just about the image, it is also about all the things surrounding it as well.
Summary
Of course, I am not an expert in image technology, nor of website design. (That is evident in this website.) However, my experience says most of the time WEBP is a poor choice.
Why then do the software developers push it so much? To appease the least common denominator of website creators. At least that is how it appears. It could be they just don't have anything better to do.
My Soapbox: I really dislike being bullied by the least common denominator. Personally, I think if you can't figure out how to do something well, then you should suffer the consequences of your refusal to learn. I am in that basket too. While I am all for technology advances, I find it exceptionally annoying when I must do a lot of extra work to keep from being flushed with the least common denominator. Make the tech, sure, but don't punishing those who take the time to learn and do.
Truly, my website is slower and performs worse because of the bloatware intended to help people that choose to be ignorant. I am not an expert, but still, I have to find and turn-off the stupid stuff (as much as they will allow me), to stop the silliness - the bloat - that is there for those who refuse to learn. Unfortunately, image technology is just one of the pieces. Don't get me started on the stupidity baked into WordPress.
That is my soapbox on the subject.
I am an engineer by trade, so maybe that is part of the reason I want to examine, then challenge the silly norms. It is also one of the reasons that I bristle at technology that is sold as "Wonderful" when it is actually quite mediocre.
In the case of Image Technology, and especially as we compare WEBP or JPG or PNG or GIF results, it becomes quite obvious that education wins. Learn how to make your images wonderful, and that is so much better.
Good Luck With Your Image Creation!