In this PHP tutorial we will understand how we can create, convert or simply display images into a WebP file format using simple and a small piece of PHP code. It also helps the webmasters to maximize the image loading speed and UXP by displaying PNG, JPEG and other images into WebP in the browser.
Why Do The Webmasters Need to Change Image Formats to WebP?
WebP is the best image file format to represent the image data served in lossless and lossy compression to the web surfers. Besides, this is the best way to make websites much faster and provides webmasters an edge who can use WebP image format to serve images in smaller size and better quality in every way.
Difference Between WebP, PNG and JPEG File Formats
The WebP are lossy so the webmasters do not have to compromise on image quality for serving the images in WebP
- PNGs Vs WebP – As we mentioned earlier WebP is a lossless image file format that means when the images are converted to WebP they become 26% smaller than PNGs in size which is also a file format that serves images in smaller sizes.
- JPEGs Vs WebP – When we convert JPEG to WebP file format, the images become 25-34% smaller in size against JPEGs at Structural Similarity Index Measure (SSIM).
- When the image sizes are converted into WebP the web speed increases and the pages load at a lightning speed as compared to the previous load time while using JPEGs and PNGs.
JPEG to WebP
Since we have understood why it is better to convert the file formats, we are going to understand how to code JPEGs into WebP images file formats. We will use PHP to do that.
We will take the following steps to code our JPEG to WebP and walk you through each code-wise as well
- We need to specify the path of our original JPEG that we are going to convert by using $ImagePath
- Then we need to create an image object by using imagecreatefromjpeg of our old JPEG
- After that it’s necessary to define the path and filename for our newly generated WebP file format that we use to save it, you will notice below the same path is used. But we will change the file extension from jpg to webp.
- For the image quality we will set 1-100 that you can change if you want to compress the image even more you need to reduce the number accordingly.
- Then we will use the “imagewebp” function to create the new WebP version of our JPEG.
Now Let’s Code it
//The file path of the image has to be
$imagePath = cat.jpg';
//Creating an image object
$im = imagecreatefromjpeg($imagePath);
//The path for saving our generated webp file to.
$newImagePath = str_replace("jpg", "webp", $imagePath);
//Quality of the new webp image. 1-100
//Reduce this to compress the file
$quality = 100;
//Create the webp image.
imagewebp($im, $newImagePath, $quality);PNG to WebP
For our PNG image file format into WebP we will just change the piece of code we used for JPEG conversion.
We will need to change the two things:
- Change the file extension from jpg to PNG
- How we created the image object above using the imagecreatefromjpg PHP function to imagecreatefrompng
Let’s code these changes now:
//The PNG file path
$imagePath = cat.png';
//Creating an image object
$im = imagecreatefrompng($imagePath);
//Replace "png" file extension with "webp".
$newImagePath = str_replace("png", "webp", $imagePath);
//Quality of the new WebP 1-100
$quality = 100;
//Create the webp image.
imagewebp($im, $newImagePath, $quality);This will work the same way it did for our JPEG image object and it can be used for all other image file extensions as well. We need to change just these two things for them as well.
Displaying Images in WebP Extension/Format In The Browser
If we just want to show images in WebP file format in the browser for better user experience we do not need to create a new file and we can do that by just changing the code a bit at the end:
- By specifying the Content-Type header
- Setting up second parameter of imagewebp to NULL
//The quality of our new webp image. 1-100.
$quality = 100;
//Set the content-type
header('Content-Type: image/webp');
//Setting the second parameter to NULL for the image in the browser
imagewebp($im, null, $quality);
//Clean up / Destroy the image object.
imagedestroy($im);After implementing this PHP code-piece you will notice that the images are displayed in the browser in WebP directly without making massive changes. This is what every other webmaster is using it for converting image file formats to WebP for the best UXP on the internet.
