When to use .jpg or .png? the answer is WebP... sort of [ images on the web | part two ]

Kevin Powell
7 Dec 201809:58

TLDRThis video discusses the best practices for choosing between .jpg, .png, and the emerging .webp image formats for web use. The speaker initially suggests using .webp due to its superior compression and quality, but acknowledges that browser support is not yet universal. The video then compares .jpg, a lossy format suitable for photographs with some quality trade-off for file size reduction, and .png, a lossless format that supports transparency but results in larger file sizes. For simple graphics, text, and line art, .png or .png 8 (with a limited color palette) is recommended. The video also highlights that .webp can be saved with or without compression, acting as a versatile replacement for both .jpg and .png, and demonstrates significant file size savings with .webp. However, due to limited browser support, particularly in Firefox, implementing .webp requires serving it alongside .jpg or .png using the picture element for compatibility. The video concludes with a mention of upcoming content on automating the image optimization process and the use of the picture element for seamless cross-browser compatibility.

Takeaways

  • 📈 **WebP is the ideal format**: It offers the best compression and quality, but it's not universally supported across all browsers.
  • 🔍 **JPEG is a lossy format**: It compresses images, reducing quality, but allows for significant file size reduction with a quality slider.
  • 🎨 **PNG is lossless**: It doesn't compress images and retains all quality, but files are larger, especially without transparency.
  • 🔴 **PNG-8 offers a limited color palette**: It's useful for simple images with a small number of colors, resulting in smaller file sizes.
  • 📊 **JPEG artifacts**: Lower quality settings can introduce visible artifacts, especially in high-contrast areas.
  • 🔧 **Optimal JPEG quality**: A quality setting of 60-65% is often recommended to balance quality and file size.
  • 🖼️ **PNG for transparency**: If an image requires transparency, PNG is the only option among the discussed formats.
  • 📝 **Text and simple graphics**: For text, simple graphics, and line art, PNG is preferred due to its lossless nature.
  • 🔄 **WebP flexibility**: It can be saved with or without compression (lossless or lossy), and it supports transparency.
  • ⚙️ **Browser support for WebP**: While not supported by Firefox at the time of the video, it is supported by Chrome, Edge, and is coming to Firefox.
  • 🚀 **Significant savings**: WebP can offer over 50% file size reduction compared to JPEG, which is beneficial for slow connections or areas with limited bandwidth.

Q & A

  • What is the main topic discussed in the video script?

    -The main topic discussed in the video script is when and why to use different image formats such as JPEG, PNG, and WebP for web images.

  • What is the short answer to when one should use WebP?

    -The short answer is to just use WebP because it's the best option as it serves as a replacement for both PNG and JPEGs with smaller file sizes.

  • What is the main difference between JPEG and PNG formats?

    -JPEG is a lossy format, meaning it compresses images and loses quality, while PNG is a lossless format that does not compress images and supports transparency.

  • Why might one choose to use PNG over JPEG?

    -One might choose to use PNG over JPEG for images that require transparency, text, simple graphics, line art, or when the image has a limited color palette and one wants to avoid compression artifacts.

  • What is the advantage of using WebP over JPEG and PNG?

    -WebP offers the advantage of having both lossless and lossy compression options, supporting transparency, and generally providing smaller file sizes compared to JPEG and PNG, which can lead to faster load times and bandwidth savings.

  • What is the 'picture' element in HTML and why is it needed for using WebP?

    -The 'picture' element in HTML is used to specify multiple versions of an image for different display/device scenarios, allowing the use of WebP for browsers that support it and falling back to JPEG or PNG for those that do not.

  • Which browsers currently support WebP and which major one does not?

    -As of the script's knowledge cutoff, WebP is supported by Chrome, Edge, and other browsers, but Firefox does not support it.

  • What are some big companies that use WebP in production?

    -Some big companies that use WebP in production include Google, Netflix, Amazon, Yahoo, Walmart, eBay, Guardian, Fortune, and USA Today.

  • What is the general rule of thumb for choosing between JPEG and PNG for web images?

    -The general rule of thumb is to use JPEG for photographs and PNG for text, simple graphics, line art, and images that require transparency.

  • What is the process of converting an image to WebP and how can it be implemented on a website?

    -To convert an image to WebP, one needs to use specific tools for the conversion. Once converted, the WebP image can be implemented on a website using the 'picture' element along with a JPEG or PNG version for unsupported browsers.

  • What does the author suggest for those who find using WebP too complicated to set up?

    -The author suggests that they understand the complexity and will be discussing the 'picture' element and automating the image process in upcoming videos, which will help simplify the use of WebP.

  • What is the significance of the file size difference when using WebP compared to JPEG and PNG?

    -The file size difference is significant as smaller files mean faster load times and less bandwidth usage, which is particularly beneficial for users with slow connections or where bandwidth is a concern.

Outlines

00:00

🖼️ Choosing the Right Image Format: JPEG, PNG, or WebP?

This paragraph discusses the confusion around when to use JPEG, PNG, or WebP for web images. The presenter suggests WebP as the best option but acknowledges that it's not universally supported. The discussion includes a comparison of lossy (JPEG) and lossless (PNG) formats, the importance of compression levels, and the role of transparency. It also touches on the use of PNG-8 for limited color palettes and the general rule of using GIFs for animations, JPEGs for photographs, and PNGs for text and simple graphics. The presenter uses Photoshop to demonstrate the visual impact of different formats and compression levels.

05:00

🌐 WebP: The Future of Web Images?

The second paragraph dives deeper into WebP, a format developed by Google that can be saved with or without compression, thus serving as a potential replacement for both PNG and JPEG. The presenter shows a web app that allows viewers to compare the original image with a WebP compressed version, highlighting the significant reduction in file size with minimal quality loss. Despite WebP's advantages, browser support is not yet universal, with Firefox notably lacking support. However, many large companies, including Google, Netflix, and Amazon, are already using WebP due to the substantial savings in file size and load times. The presenter also discusses the need for tools to convert images to WebP and the use of the picture element to serve different formats to different browsers. The paragraph concludes with a teaser for upcoming videos on integrating WebP into workflows and automating the image optimization process.

Mindmap

Keywords

💡JPEG

JPEG is a commonly used method of lossy compression for digital images, particularly for photographs. It is widely supported and often used for web images due to its ability to achieve high compression ratios. In the video, it's discussed as a format that compresses images with a loss in quality, which can be adjusted using a quality slider in Photoshop. The example given shows a significant reduction in file size with a moderate quality setting.

💡PNG

PNG stands for Portable Network Graphics and is a lossless image format that supports transparency. It is used for images that require a high-quality, uncompressed state, such as logos, text, and simple graphics. The video mentions two types of PNG: PNG 24, which does not compress the image, and PNG 8, which uses a limited color palette for smaller file sizes. The script illustrates that PNG files are generally larger than JPEGs, even at 100% quality.

💡WebP

WebP is an image format developed by Google that supports both lossy and lossless compression, including transparency. It is designed to provide superior quality at smaller file sizes compared to JPEG and PNG. The video explains that WebP can serve as a replacement for both JPEG and PNG, offering significant file size savings. However, its adoption is hindered by limited browser support, notably the lack of support in Firefox at the time of the video.

💡Lossy Compression

Lossy compression is a method of compressing data by reducing its quality. In the context of images, this means some image data is discarded to achieve a smaller file size. The video demonstrates this with JPEG images, where higher compression levels result in more noticeable artifacts and a lower-quality image, especially in high-contrast areas.

💡Lossless Compression

Lossless compression is a method that allows data to be compressed without any loss of quality. It is used in formats like PNG to maintain the original image quality even after compression. The video contrasts lossless compression with lossy, showing that while PNG files are larger, they do not suffer from the quality degradation seen in lossy-compressed JPEGs.

💡Transparency

Transparency in digital images refers to the presence of a fully or partially transparent background. This is particularly important for logos and other graphics that need to be superimposed over other elements without a visible background. The video discusses how PNG supports transparency, which is a key factor in choosing between JPEG and PNG for certain types of images.

💡Artifacting

Artifacting is a term used to describe the visual anomalies that can occur in images as a result of lossy compression. These can include blockiness, blurriness, or other distortions that were not present in the original image. The video shows how reducing the quality of a JPEG can lead to increased artifacting, especially in darker areas of the image.

💡File Size

File size is a critical consideration for web images, as larger files can slow down page loading times and consume more bandwidth. The video emphasizes the importance of balancing image quality with file size, showcasing how different formats and compression levels can significantly impact the size of an image file.

💡Browser Support

Browser support refers to whether a web browser can correctly display or use a particular technology, such as an image format. The video discusses the limited browser support for WebP, noting that while it is supported by Chrome and Edge, Firefox did not support it at the time of recording. This lack of universal support is a factor in deciding whether to use WebP for web images.

💡Picture Element

The picture element is an HTML element that allows web developers to serve different versions of an image depending on the browser's capabilities. It is used to provide fallback options for browsers that do not support newer formats like WebP. The video suggests that using the picture element in conjunction with WebP, JPEG, and PNG can help ensure compatibility across different browsers.

💡Bandwidth

Bandwidth refers to the maximum rate of data transfer across a given path. In the context of the web, it is related to the speed at which web pages and their assets can be loaded. The video highlights that using more efficient image formats like WebP can lead to significant bandwidth savings, especially for users with slow connections or in areas where bandwidth is a premium.

Highlights

WebP is the best image format but can't be used universally due to browser support issues.

JPEG is a lossy format which compresses images at the cost of quality.

PNG is a lossless format that supports transparency and is better for text, simple graphics, and line art.

PNG 8 uses a limited color palette and can be a good choice for certain images without the need for many colors.

WebP can be saved with or without compression, acting as a replacement for both PNG and JPEG, with smaller file sizes.

WebP offers significant savings in file size, which can be crucial for users with slow internet connections.

Despite its benefits, WebP is not supported by all browsers, notably Firefox at the time of the video.

Large companies like Google, Netflix, and Amazon use WebP for its efficiency and smaller load times.

To use WebP, tools are needed for conversion, and the picture element should be used for compatibility with unsupported browsers.

The choice between JPEG and PNG depends on the specific needs of the image, such as whether animation or transparency is required.

JPEG is generally used for photographs, while PNG is used for images that require transparency or are text-based.

The video provides a demonstration of how WebP can maintain quality even at very low quality settings.

WebP's lossless option preserves transparency and can be a direct replacement for PNG in certain scenarios.

The use of WebP can lead to over 50% savings in file size, which is significant for image-heavy websites.

The video discusses the upcoming support for WebP in Firefox and its current support in other major browsers.

The presenter plans to cover the use of the picture element and automating the image conversion process in future videos.

WebP is a powerful tool for web developers looking to optimize image load times and bandwidth usage.

Master Any Task with Onion AI！

Access powerful tools in one place—write, research, and create faster than ever.

Master Any Task with Onion AI！Try It Now