Website speed matters a lot for both users and search engines. One of the best ways to improve performance is by using WebP images instead of traditional formats like JPG and PNG.<\/p>\n\n\n\n
In this guide, you\u2019ll learn how to automatically convert uploaded images to WebP in WordPress using a simple code snippet.
Why Use WebP Images?<\/p>\n\n\n\n
Improved user experience<\/p>\n\n\n\n
Smaller file size compared to JPG\/PNG<\/p>\n\n\n\n
Faster page loading speed<\/p>\n\n\n\n
Better SEO rankings<\/p>\n\n\n\n
We\u2019ll add a custom function in WordPress that converts images into WebP format automatically whenever you upload them.
\/**<\/p>\n\n\n\n
function convert_to_webp_on_upload($upload, $context) {
\/\/ Check if the upload was successful and if it’s an image
if (!isset($upload[‘file’]) || strpos($upload[‘type’], ‘image\/’) !== 0) {
return $upload;
}<\/p>\n\n\n\n
$file_path = $upload['file'];\n$file_type = $upload['type'];\n\n\/\/ Avoid double conversion or converting already WebP files\nif ($file_type === 'image\/webp') {\n return $upload;\n}\n\n\/\/ Load the image based on its type\nswitch ($file_type) {\n case 'image\/jpeg':\n $image = imagecreatefromjpeg($file_path);\n break;\n case 'image\/png':\n $image = imagecreatefrompng($file_path);\n imagepalettetotruecolor($image); \/\/ Preserve transparency\n imagealphablending($image, true);\n imagesavealpha($image, true);\n break;\n case 'image\/gif':\n $image = imagecreatefromgif($file_path);\n break;\n default:\n return $upload;\n}\n\nif (!$image) {\n return $upload; \/\/ Return original if image creation fails\n}\n\n\/\/ Define the new file path with .webp extension\n$webp_path = preg_replace('\/\\.(jpe?g|png|gif)$\/i', '.webp', $file_path);\n\n\/\/ Convert and save as WebP (Quality: 80)\nif (imagewebp($image, $webp_path, 80)) {\n \/\/ Remove the original file to save space\n unlink($file_path);\n\n \/\/ Update the upload array with new file details\n $upload['file'] = $webp_path;\n $upload['url'] = str_replace(basename($file_path), basename($webp_path), $upload['url']);\n $upload['type'] = 'image\/webp';\n}\n\n\/\/ Free up memory\nimagedestroy($image);\n\nreturn $upload;<\/code><\/pre>\n\n\n\n}<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction Website speed matters a lot for both users and search engines. One of the best ways to improve performance is by using WebP images instead of traditional formats like JPG and PNG. In this guide, you\u2019ll learn how to automatically convert uploaded images to WebP in WordPress using a simple code snippet. Why Use […]<\/p>\n","protected":false},"author":1,"featured_media":260,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112,1],"tags":[],"class_list":["post-256","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-it-services","category-technology"],"_links":{"self":[{"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/posts\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/comments?post=256"}],"version-history":[{"count":3,"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/posts\/256\/revisions"}],"predecessor-version":[{"id":262,"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/posts\/256\/revisions\/262"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/media\/260"}],"wp:attachment":[{"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/media?parent=256"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/categories?post=256"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anubhavtiwari.dev\/blog\/wp-json\/wp\/v2\/tags?post=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}