{"id":12691,"date":"2021-12-07T04:18:58","date_gmt":"2021-12-07T04:18:58","guid":{"rendered":"https:\/\/linuxways.net\/?p=12691"},"modified":"2021-12-07T04:18:58","modified_gmt":"2021-12-07T04:18:58","slug":"how-to-convert-png-jpeg-to-webp-in-ubuntu-also-webp-to-png-and-jpeg","status":"publish","type":"post","link":"https:\/\/linuxways.net\/de\/ubuntu\/how-to-convert-png-jpeg-to-webp-in-ubuntu-also-webp-to-png-and-jpeg\/","title":{"rendered":"How to Convert PNG, JPEG to WebP in Ubuntu? ( Also WebP to PNG and JPEG )"},"content":{"rendered":"<p>Webp is an open-source image format in Linux which supports lossless and lossy compression for images on the web. One of the best practices to optimize the website performance is using compressed images. This article will cover how to use webp image format for creating compressed and quality images for the website.<\/p>\n<h2>Installation<\/h2>\n<p>The <strong>webp<\/strong> package is already available in the official ubuntu repositories. Run the command below to update the Ubuntu repository to the latest index and install webp package.<\/p>\n<pre>$ sudo apt-get update<\/pre>\n<pre>$ sudo apt install webp<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"388\" class=\"wp-image-12692\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-49.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-49.png 1080w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-49-300x108.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-49-1024x368.png 1024w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-49-768x276.png 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/p>\n<p>Also, you can install the webp package from Google\u2019s repository as:<\/p>\n<pre>$ wget <a href=\"https:\/\/storage.googleapis.com\/downloads.webmproject.org\/releases\/webp\/libwebp-0.6.1-linux-x86-32.tar.gz\">https:\/\/storage.googleapis.com\/downloads.webmproject.org\/releases\/webp\/libwebp-0.6.1-linux-x86-32.tar.gz<\/a><\/pre>\n<p>Extract the tar file and move to the extracted directory.<\/p>\n<pre>$ tar -xvzf libwebp-0.6.1-linux-x86-32.tar.gz<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1080\" height=\"440\" class=\"wp-image-12693\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-50.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-50.png 1080w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-50-300x122.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-50-1024x417.png 1024w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-50-768x313.png 768w\" sizes=\"auto, (max-width: 1080px) 100vw, 1080px\" \/><\/p>\n<pre>$ cd libwebp-0.6.1-linux-x86-32<\/pre>\n<pre>$ cd bin<\/pre>\n<pre>$ ls<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"843\" height=\"116\" class=\"wp-image-12694\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-51.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-51.png 843w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-51-300x41.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-51-768x106.png 768w\" sizes=\"auto, (max-width: 843px) 100vw, 843px\" \/><\/p>\n<p>In the directory, you can see the precompiled binary files which are usable for various webp utilities such as:<\/p>\n<p>anim_diff : This tool can be used to find the difference between animation images<\/p>\n<p>anim_dump: This tool is usable to dump the difference between animation images<\/p>\n<p>cwebp : This tool can be used for webp encoding<\/p>\n<p>dwebp : This tool is used for webapp decoding<\/p>\n<p>vwebp : This tool is used to view webp files<\/p>\n<p>webpinfo : This tool is usable to view information about a webp image file<\/p>\n<p>To find all the options provided by the webp utility tool, use the following command.<\/p>\n<pre>$ webp -longhelp<\/pre>\n<p>Now add the directory ~\/<strong>libwebp-0.6.1-linux-x86-32\/bin <\/strong>to the <strong>PATH environment variable<\/strong> in the ~\/<strong>.bashrc<\/strong> file to run the <strong>webp<\/strong> utility tools without writing the absolute path.<\/p>\n<pre>$ sudo vi ~\/.bashrc<\/pre>\n<p>Copy the following line at the end of the file.<\/p>\n<pre>export PATH=$PATH:~\/libwebp-0.6.1-linux-x86-32\/bin<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"769\" height=\"213\" class=\"wp-image-12695\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-52.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-52.png 769w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-52-300x83.png 300w\" sizes=\"auto, (max-width: 769px) 100vw, 769px\" \/><\/p>\n<p>Save the file and exit. Open a new terminal and use webp utility tools like other system commands.<\/p>\n<h2>Converting image to webp format<\/h2>\n<p>Using the <strong>cwebp <\/strong>tool, an image can be converted into <strong>webp<\/strong> format. Run the <strong>cwebp <\/strong>command with option <strong>-q<\/strong> to define the quality of image and <strong>-o<\/strong> to define the output file. In this example, I have used image file <strong>linux.png<\/strong> and l<strong>inux.jpeg<\/strong> file to convert in webp format. You can choose your image name accordingly.<\/p>\n<pre>$ cwebp -q 60 linux.png -o linux.webp<\/pre>\n<pre>$ cwebp -q 60 linux.jpeg -o linux1.webp<\/pre>\n<p>Output:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"812\" height=\"541\" class=\"wp-image-12696\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-53.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-53.png 812w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-53-300x200.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-53-768x512.png 768w\" sizes=\"auto, (max-width: 812px) 100vw, 812px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"726\" height=\"148\" class=\"wp-image-12697\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-54.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-54.png 726w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-54-300x61.png 300w\" sizes=\"auto, (max-width: 726px) 100vw, 726px\" \/><\/p>\n<p>In the output, you can see that the size of the image has been comparatively decreased.<\/p>\n<p>Run the following command to open the <strong>webp<\/strong> format images. In this example, I have used a previously converted linux.webp file.<\/p>\n<pre>$ vwebp linux.webap<\/pre>\n<h2>Converting webp image to png and jpeg format<\/h2>\n<p>In the previous step, we converted jpeg and png images to webp using cwebp utility tool. Now we will use the <strong>dwebp<\/strong> tool to convert <strong>webp<\/strong> images into png and jpeg format.<\/p>\n<p>Use the <strong>dwep<\/strong> command with the option<strong> -o<\/strong> to create png and jpeg image format from <strong>webp<\/strong>. In the example, image.webp is used for the conversion.<\/p>\n<pre>$ dwep image.webp -o image.png<\/pre>\n<pre>$ dwep image.webp -o image.jpeg<\/pre>\n<p>Output:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"787\" height=\"145\" class=\"wp-image-12698\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-55.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-55.png 787w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-55-300x55.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2021\/12\/word-image-55-768x141.png 768w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/p>\n<p>It can be seen that the size of the image has been comparatively increased after decoding the webp image format.<\/p>\n<p>In this way, we can convert png and jpeg format images to webp format and vice versa.<\/p>\n<h2>Conclusion<\/h2>\n<p>This article covered how to convert PNG, JPEG format to WebP in Ubuntu. Also, we learned how to convert WebP to PNG and JPEG.<\/p>\n<p>&nbsp;<\/p>","protected":false},"excerpt":{"rendered":"<p>Webp is an open-source image format in Linux which supports lossless and lossy compression for images on the web. One of the best practices to optimize the website&hellip;<\/p>","protected":false},"author":1,"featured_media":12790,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[645,644,31,737],"class_list":["post-12691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ubuntu","tag-jpeg","tag-png","tag-ubuntu","tag-webp"],"_links":{"self":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/12691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/comments?post=12691"}],"version-history":[{"count":0,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/12691\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media\/12790"}],"wp:attachment":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media?parent=12691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/categories?post=12691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/tags?post=12691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}