Here is what MDN says about Images.
In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn’t too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble
<img>element, used to embed a simple image in a webpage.
To display a simple image on a webpage, we use the
<img> tag and write the source of the image in the
srcattribute. Here is an example to add a simple image file in your HTML page
Or maybe this
That is it! It is just that easy to add a basic image in a web page.
But for advanced websites with lots of content and imagery, adding images to a page will bring about two main considerations:
- Choosing the correct format for your image content
- Optimisation of images
To start off, let’s consider the available web image formats. Here are some of the popular ones. These are the most well-known and most-used image formats: JPEG, PNG, GIF, BMP, TIFF, etc.
Let’s dive into the three big widely-used image formats (JPEG, GIF, PNG). And then we shall take a look at Google’s webP image format!
The Good: Versatile small file size
The Bad: Loss of details / quality
The Usage: Colorful photographs, images lacking details
The Good: Small file sizes, animation
The Bad: Loss of quality
The Usage: Icons, Logos, line drawings, and other simple images that need to be small.
For photographs, PNG is not as good as JPEG, because it creates a larger file. PNG is the best format for screenshots and most computers will save screenshots automatically as a PNG because most screenshots are a mix of images and text.
The Good: Versatile, supports transparency
The Bad: Larger file size
The Usage: Graphical elements
And then comes the WebP !
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
WEBP (pronounced as “Weppy”) is an image format developed by Google. This format was designed to be used specifically on the web. WebP uses features of both lossy and lossless compression algorithms which greatly reduces the file size while retaining the quality of the original image.
WebP takes the best parts of both the lossy JPG format and the lossless PNG format and makes them available in a compact file! It can be used on a number of graphical and translucent images and allows the user to adjust the degree of compression to make a trade-off between file size and picture quality. It is currently supported in Chrome and Opera browser.
So, how does one go about using this awesome image format? The answer is a two-parter.
Part 1: Converting images to the WebP format
- WebP’s Documentation provides access to pre-compiled utilities, libraries as well as a framework for converting PNG and JPEG images to a WebP image.
- Adobe Photoshop Plugin
- Android Studio
- A CLI tool for image formatting like ImageMagick
- An online converter
Part 2: Checking support for WebP format and then rendering successfully
- Polyfills — Here is a small WebPJS polyfill that supports WebP images without changing the syntax of image tags in the code.
- Another polyfill called Picturefill, allows using
<picture>element in unsupported browsers.
All in all, it is very easy to convert images to the WebP format and start using them immediately.
The Good: Versatile, smaller file size, good quality images,
The Bad: Low browser support, under development, need backup images
The Usage: For almost everything!
In conclusion, the potential for WebP is huge!! WebP is such a versatile format that it can work its magic on all kinds of existing image formats to give smaller, good quality images. They help in loading the images on the web much faster, reduce the render time for the web pages and greatly improve the user experience with fast loading websites having beautiful pictures. The scope for enhancing user experience on mobile browsers using WebP images is tremendous!