How to Convert Images to Webp on the Command Line (PNG and JPG)

Tony Teaches Tech
21 Sept 202010:22

TLDRIn this informative video, Tony from Tony Teaches Tech guides viewers on how to convert images from PNG and JPEG formats to the more modern and efficient WebP format, developed by Google. The process is demonstrated on a Linux server running Ubuntu, but the commands are applicable across various operating systems. Tony shows how to download and install the necessary WebP utilities from developers.google.com, using the 'cwebp' command for conversion with a quality parameter set to 80 for a good balance between size and quality. The video includes a practical demonstration where an 8.2 MB JPEG image is converted to a 2.4 MB WebP image with minimal quality loss, and a 209 KB PNG thumbnail is compressed to a 39 KB WebP file, resulting in an 81.5% size reduction. Tony also experiments with different quality settings to show the impact on file size and image quality, advising viewers to use a quality setting of 80 for optimal results.

Takeaways

  • 🌐 The WebP image format is a modern, next-gen image format created by Google that excels at compressing images.
  • 🛠️ The conversion process can be done on Windows, Mac, or Linux, and the tutorial focuses on Linux using Ubuntu.
  • 📚 Google provides the source code and pre-built binaries for the WebP conversion on developers.google.com.
  • 📥 To get started, download the WebP library using `wget` for Linux from the specified location.
  • 📄 Extract the downloaded tar file with the command `tar -xzvf filename.tar` to get the pre-built binaries.
  • 🔧 Use the `cwebp` command to convert images to WebP format, and `dwebp` to convert from WebP to other formats like PNG or JPEG.
  • ⚙️ For conversion, use the command `./bin/cwebp -qXX inputfile.jpg -o outputfile.webp`, where XX is the quality level.
  • 📉 A quality level of 80 is standard and provides a good balance between file size and image quality.
  • 📈 The WebP format offers significant file size reduction, with minimal perceptible loss in image quality.
  • 🔍 Lowering the quality further can lead to smaller file sizes, but with noticeable quality degradation at very low settings.
  • 📝 The tutorial provides a step-by-step guide, including commands to copy and paste for ease of use.
  • 📌 For further questions or resources, check the video description for links and additional information.

Q & A

  • What is the webp image format?

    -The webp image format is a modern, next-gen image format created by Google, known for its efficient compression of images.

  • What are the advantages of using the webp format over other formats like PNG or JPEG?

    -The webp format provides superior compression, leading to significantly smaller file sizes without a noticeable loss in quality, which can improve webpage load times and save bandwidth.

  • Which operating systems can the conversion tools for webp be used on?

    -The conversion tools for webp can be used on Windows, Mac, or Linux operating systems.

  • How can one obtain the webp conversion utilities?

    -The webp conversion utilities can be obtained from developers.google.com, where the source code and pre-built binaries are available for download.

  • What command is used to extract the downloaded webp utilities on a Linux system?

    -The command to extract the downloaded webp utilities on a Linux system is `tar -xzvf `.

  • What is the command used to convert images to the webp format?

    -The command used to convert images to the webp format is `cwebp`, which is part of the webp utilities.

  • What is the significance of the '-q' parameter in the cwebp command?

    -The '-q' parameter in the cwebp command sets the quality of the webp image. A lower value results in higher compression and smaller file size, but may also reduce image quality.

  • What is the default quality value for webp conversion that is widely accepted?

    -The default quality value that is widely accepted for webp conversion is 80 out of 100.

  • How much file size reduction was achieved when converting the YouTube thumbnail from PNG to webp?

    -The file size reduction achieved when converting the YouTube thumbnail from PNG to webp was approximately 81.5%.

  • What is the file size reduction when converting a JPEG image of 8.2 megabytes to webp with a quality setting of 80?

    -The file size reduction when converting a JPEG image of 8.2 megabytes to webp with a quality setting of 80 is approximately 70%.

  • What can one do if they want to convert a webp image back to a PNG or JPEG format?

    -If one wants to convert a webp image back to a PNG or JPEG format, they can use the `dwebp` program, which is part of the webp utilities.

  • How can viewers get more information or ask questions about the webp conversion process?

    -Viewers can ask questions in the comments section of the video and refer to the resources and blog post provided in the video description for more information.

Outlines

00:00

😀 Introduction to WebP Conversion

Tony, the host of 'Tony Teaches Tech', introduces the topic of converting images from PNG or JPEG to the WebP format, a modern image format developed by Google known for its high compression efficiency. He presents two images, one a large rice paddy photo and the other a smaller YouTube thumbnail, as examples for the conversion process. Tony outlines that the tutorial will focus on using command line utilities on a Linux operating system, specifically Ubuntu, but the process is applicable across different operating systems. He guides viewers to the official Google Developers website for the latest version of the WebP conversion tools and demonstrates the initial steps for downloading and extracting the necessary libraries.

05:01

📚 Converting Images to WebP Format

The video continues with a demonstration of how to convert the provided images to WebP format using the 'cwebp' command, which stands for 'compress webp'. Tony explains the use of the '-q' parameter to set the quality level of the compression, with 80 being the standard quality value. He walks through the conversion process for both the YouTube thumbnail and the rice paddy image, showing the significant reduction in file size while maintaining high visual quality. The video also explores the impact of varying the quality setting from 80 down to 50 and even 1, to observe the differences in image quality and file size. The results show that even at lower quality settings, the WebP images retain a good level of detail, with a substantial decrease in file size.

10:03

📝 Conclusion and Next Steps

In the final part of the video, Tony summarizes the process of downloading and installing the WebP utilities and using the 'cwebp' binary to convert PNGs and JPEGs to the WebP file format. He invites viewers to ask questions in the comments section if they have any and provides resources for further information, including a download link and a blog post with detailed instructions. Tony encourages viewers to like the video, subscribe to the channel for more content on image optimization and web hosting, and looks forward to meeting them in the next video.

Mindmap

Keywords

💡Webp

WebP is a modern image format developed by Google that offers superior compression for images compared to traditional formats like PNG and JPEG. It is designed to provide a balance between file size and image quality, making it an excellent choice for web use where both speed and visual fidelity are important. In the video, Tony demonstrates how to convert PNG and JPEG images to the WebP format, highlighting its efficiency in reducing file size without significant loss in quality.

💡Command Line

The command line is a text-based interface for interacting with a computer's operating system. It allows users to execute commands and perform tasks by typing specific instructions. In the context of the video, Tony uses the command line to download and install the WebP utilities, and to perform the image conversion process from PNG/JPEG to WebP, showcasing a powerful and efficient way to manage computer tasks.

💡Compression

Compression refers to the process of reducing the size of a file, image, or data set to save storage space and improve loading times. In the video, the WebP format is praised for its ability to compress images significantly while maintaining a high level of quality. Tony demonstrates this by converting images and comparing their original and compressed sizes, showing the substantial reduction in file size.

💡Quality

In the context of image formats, quality refers to the visual clarity and detail of an image. The WebP format allows for adjustable quality levels, which can affect the balance between file size and image fidelity. Tony discusses using a quality setting of 80 (out of 100) for the conversions, which provides a good compromise between size and quality, and also experiments with lower quality settings to observe the effects.

💡Conversion

Conversion in the video script refers to the process of changing one type of file or format into another. Specifically, Tony is converting PNG and JPEG images into the WebP format using command line tools. This process is important for web optimization as it can lead to faster load times and reduced bandwidth usage.

💡Google

Google is referenced as the creator of the WebP image format. As a leading technology company, Google has developed various tools and formats to improve the performance and efficiency of the internet. In the video, Tony credits Google for creating a next-gen image format that aids in better image compression and optimization for the web.

💡Ubuntu

Ubuntu is a popular open-source operating system based on Linux. In the video, Tony uses Ubuntu to demonstrate the process of converting images to the WebP format. Ubuntu is chosen for its widespread use and compatibility with the command line utilities required for the conversion process.

💡wget

wget is a command-line utility used for downloading files from the internet. In the video, Tony employs wget to download the WebP libraries from the developers.google.com website, which is a crucial step in the process of installing the necessary tools for image conversion.

💡tar

tar is a command used in the Linux command line for concatenating and creating archives of files, which can then be compressed for efficient storage or transmission. In the video, Tony uses the tar command with the 'xzvf' options to extract the downloaded WebP library files from the tar archive.

💡Cwebp

Cwebp is a command-line tool provided by Google as part of the WebP utilities. It is used to compress images into the WebP format. In the video, Tony uses the Cwebp tool with a specified quality parameter to convert PNG and JPEG images into WebP format, demonstrating its usage for web optimization.

💡Dwebp

Dwebp is another command-line tool from the WebP suite, used for decompressing WebP images back into a more common format like PNG or JPEG. Although not directly used in the conversion process shown in the video, Tony mentions it as the counterpart to Cwebp for situations where a WebP image needs to be converted to a different format.

Highlights

Tony teaches Tech demonstrates how to convert images from PNG or JPEG to the WebP format.

WebP is a modern image format created by Google, known for high compression efficiency.

The tutorial covers the conversion process on a Linux operating system using Ubuntu.

Google provides the source code and pre-built binaries for image conversion on developers.google.com.

The command line utility used is applicable across various operating systems, not just Linux.

The video shows a practical example of converting two images hosted on a web server.

The CWebP program is used for compressing images into WebP format.

DWebP is the program used for decompressing WebP images back into formats like PNG or JPEG.

The quality parameter (-q) is set to 80 by default, which is considered standard.

The first image converted is a YouTube thumbnail, with an 81.5% reduction in size.

The second image, a rice paddy photo, is reduced from 8.2MB to 2.4MB with a quality setting of 80.

Lowering the quality to 50 results in a file size of 1.4MB with minimal noticeable quality loss.

At the lowest quality setting of 1, the image is still recognizable despite being only 350KB.

The video provides a direct comparison between the original and converted images at various quality settings.

The tutorial concludes that using a quality setting of 80 for WebP conversions is optimal for most cases.

The video offers resources for downloading the necessary tools and a blog post for further guidance.

The conversion process is shown to be straightforward and effective for image optimization.