Last Updated on
What, did you think JPEG would live forever?
It was introduced in 1992, more than twenty-five years ago!
The modern generation of web developers uses WebP for images, not the archeological specimen that is JPEG.
Here’s a quick introduction to WebP, SVG, and why they’re better.
They’re way smaller, producing faster, and more responsive websites.
Let’s get started!
The WebP standard is something of a meta image format, including several modes under one heading.
It’s both a file extension (.webp) as well as a compression algorithm.
To use the language of video encoders, WebP is both a container format and a codec.
Because the compression algorithm can save images both lossily and losslessly, describing an image as a “WebP” doesn’t really make as much as sense as calling an image a “jpeg”.
It’s like saying it’s a file: that can mean so many things that the word isn’t vastly useful, except in the most general of terms.
To illustrate, here are some of WebP’s feature highlights.
- Lossless compression
- Lossy compression, similar to JPEG
- Lossless transparency/alpha layers
- Compressed transparency/alpha layers
- Animated images, similar to WebM
It’s also related to the WebM standard, which is used for moving images.
In fact, the WebP compression algorithm uses the intra-frame encoding algorithm of the VP8 video compression algorithm.
As with VP8, it is a block-based transformation scheme with eight bits of color depth and a YUV 1:2 chroma subsampling ratio (YCbCr 4:2:0), which is the same as the default chroma subsampling ratio on MPEG2 and MP4.
WebP also features one of the more trendy features of modern encoding algorithms: predictive encoding.
Using complex mathematical formulas, the encoding algorithm will try to “predict” the value of the next block.
Good prediction can remove redundant or unnecessary data.
Most importantly, it works especially well on the most common types of images.
That makes it a valuable tool in compression, where it can save considerable space over non-predictive algorithms.
What is SVG?
An SVG is a vector graphics file.
Rather than saving the pixel values as an image would, a vector saves the mathematical relationship between the points defining shape or design.
In that way, the design can be infinitely scaled and endlessly edited, all without loss of data.
Whereas images tend to degrade each time they are processed, an SVG will always be flawless.
This is because compression algorithms often save space by using a type of destructive rounding called lossy encoding.
Because SVG stores the exact mathematical values of the point relationships, there is no data to round off and destroy.
An SVG image is actually completely defined via text in an XML document.
All the features of SVG are triggered by XML tags, meaning that any text editor can also be a fully-featured SVG image editor.
This also means that SVGs take up very little space.
The text descriptions of SVG files take up far less space than a JPG or PNG showing an equivalent image.
The downside is that SVG completely falls down when trying to save a photograph. But of course, it does.
The standard is designed to process and save mathematically-calculated point relationships in somewhat regular two-dimensional polygons, which are famously absent in photographs.
That’s exactly what WebP is good at, making SVG a natural companion to the jack-of-all-trades image format.
For geometric designs and illustrations—logos, especially—SVG is the perfect format.
They scale infinitely, just like vector images. One SVG of your company’s logo can be losslessly scaled to any size necessary and displayed anywhere on the website, at any pixel scale or display density.
And because all web browser is also native SVG pre-processors, your image will show up flawless in every web browser.
SVG gets some flack for being a bit of a Hunchback of Notre Dame: it’s ugly and misunderstood by the masses, but pure of heart and earnest if you give it the time of day.
Don’t let that prejudice stop you!
In our war of image formats, WebP and SVG make up one army.
Every other image format is on the other side.
Because with SVG and WebP, you can save and display just about all graphical content you can imagine.
There both well-supported by browsers, space-efficient, and fully-featured enough that you won’t regret implementing them.
That said, there are some perks of being on the “everyone else” team.
First, JPG is the single most widely spread file format.
More than PDF, more than DOC, more than any other file format, JPG is essentially the lingua Franca of the file processing world: everyone speaks it.
So, naturally, WebP isn’t as widely supported as JPG: yet.
It’s becoming more popular as Google pushes it harder, and is already supported by something like 80-percent of web browsers.
Mobile is the big hold out: Apple doesn’t include support for WebP/WebM in either version of Safari, preferring to push their preferred HEIC/H.265 standards instead.
As in any standards war, it’s the consumer who loses while the companies duke it out.
With one should I choose?
Every image format can be categorized as either “lossy” or “lossless,” and these terms mostly explain themselves.
Lossy compression cuts down on file sizes by permanently deleting information about a file, making it smaller but also degrading the quality.
Lossless compression just rearranges the data in such a way that it takes up less space but can be packed and unpacked (or unzipped!) without any damage to the file.
Raster vs. Vector
When you think “image format,” you’re probably thinking of a raster.
has nothing to do with Bob Marley – it just means that the file is essentially a grid of colored pixels that make a picture.
JPG, PNG, GIF, TIFF, and most other photo files are rasters.
The only information they have is what color the pixels are, so enlarging or stretching them will generally just result in a more pixelated image.
Vectors, though, are designed to be scaled forever. SWF, EPS, and PDF files store images not as pixels, but as math equations that can be rendered as points and lines.
The image can get as big or as small as you need without taking a quality hit, but these extensions are not as common around the Web since vectors are not as readily compatible as raster images.
JPEG – Lossy Raster
The JPEG file is named after the group that created it and dominates the world of web images due to its near-universal compatibility and small size.
Your eye probably couldn’t tell a lightly-compressed JPEG from a higher-quality image without a few seconds of scrutiny, and it loads fast, so it’s good enough for most of the Web.
JPEG-2000 is the updated version that has some improvements over the original, but it’s never really taken off, so you’re unlikely to see this format in many places.
Great for: putting photos on the Web, saving and sending small image sizes, general use, printing out pictures.
PNG – Lossless Raster
This format has become the go-to for high-quality web graphics, especially if you need a transparent background.
PNG was originally designed as a GIF alternative, but it supports way more colors and is more flexible about transparency settings.
The file size is generally bigger than either GIF or JPEG, but PNG preserves quality better and is more flexible,
You may also run across PNG-8 and PNG-24 in some programs.
These will still export as normal PNGs, but PNG-8 only supports 256 colors and doesn’t allow partial transparency, netting you a smaller file size than the more full-featured PNG-24.
Great for: web graphics, high-quality photos where size isn’t an issue, transparency.
GIF – Lossless Raster
The predecessor to PNG, the GIF format is now most famous for enabling the short video loops that you can’t stop watching on social media.
The debate over whether to pronounce it as “gif” or “jif” is fairly heated, but if you want to make both sides angry, try pronouncing it as “jeff.”
GIFs only support 256 colors, which makes them a poor choice for high-quality photos, but their compression is excellent, so it can downsize simple images without a huge quality hit.
Pixels can also be made transparent, but must be either on or off, not in-between.
Great for: simple graphics, animations, icons.
TIFF – Lossless Raster
You may not have run into a TIFF personally, but if you’re into photography or work much with print media, you may recognize them as the large, but high-quality, format often favored by publishers.
Also, no one argues about the pronunciation.
Great for: printing high-quality photos, scanning high-quality images, anything where size isn’t an issue.
SVG – Vector
If you’ve ever tried to save an image of the Internet and instead gotten the “save as a webpage” option, you may have seen an SVG.
These are possibly the most widely-supported vector graphics out there, and their ability to maintain good quality and scalability at low file sizes makes them popular for logos, site graphics, and anywhere else that a vector would come in handy.
Great for: business graphics, scalable graphics, logos.
WordPress by default is not compatible with SVG images if you need to use SVG images on your WordPress site – Check out How to Safely Enable WordPress SVG Support (2 Simple Clicks)
High Efficiency Image Format (HEIF)
HEIF is essentially JPEG but with higher quality and smaller file sizes.
This is now the default picture format on iOS 11 and later.
According to Wikipedia, a High-Efficiency Image File Format (HEIF), also known as High-Efficiency Image Coding (HEIC), is a file format for individual images and image sequences.
It was developed by the Moving Picture Experts Group (MPEG).
The MPEG group claims that twice as much information can be stored in a HEIF image as in a JPEG image of the same size, resulting in a better quality image.
HEIF also supports animation and is capable of storing more information than an animated GIF at a small fraction of the size.
HEIF image files are stored with filename extensions .heif or .heic.
WebP is Google’s format, and it does pretty much everything: better compression than JPEG, better animations than GIF, and transparency on par with PNG.
It’s supported by several browsers and is currently being used by YouTube, Facebook, and a few other sites if you visit them using a supported browser.
P.S. I know you want to groove your SEO.
Google loves you when you: use Google services, and when your WordPress site is fast like a Rocket.
If your WordPress site is slow, check out our ultimate guides to optimize WordPress:
Why So Many Formats?
It’s unlikely that there will ever be one format to rule them all since different fields have different image needs.
General internet browsers don’t really need to think beyond JPEG and PNG (and maybe WebP and HEIC in the future), but for business and publishing applications, having options like TIFF and SVG makes life easier.
And, if you haven’t already, you should think about choosing a side in the GIF debate before the format disappears. Be part of history.
That’s all we know for now :3
Remember that we constantly update this post like the others.
Hope this post helped you someway.
Thanks for reading.
Remember to share this post with your preferred social network and tell your followers how you find it.
Need help? comment below this post and we will contact you soon if possible.