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

Kevin Powell
7 Dec 201809:58

TLDRIn this informative video, the creator discusses the nuances of choosing between .jpg, .png, and the emerging .webp format for web images. The video clarifies that while .webp offers superior compression and quality, it's not universally supported across all browsers. The script provides insights into when to use each format: .jpg for photographs, .png for text and simple graphics with transparency, and .webp when supported for its efficiency. The video also demonstrates the significant file size reduction .webp offers, showcasing a comparison tool and emphasizing its adoption by major companies. It concludes with a teaser for future content on implementing the picture element for serving images in a way that maximizes compatibility and performance.

Takeaways

  • 🔍 WebP is a format developed by Google that can be used with or without compression, and it can replace both PNG and JPEG files.
  • 📉 JPEG is a lossy format that compresses images, leading to quality loss, which can be adjusted with a quality slider.
  • 📈 PNG is a lossless format that supports transparency, but it typically results in larger file sizes compared to JPEG.
  • 🎨 PNG-8 is a variation of PNG that uses a limited color palette, making it suitable for simple images without the need for a wide range of colors.
  • 📌 For images that require transparency or are text-based, simple graphics, or line art, PNG is the preferred format.
  • 📷 JPEG is best for photographs where some loss of quality due to compression is acceptable.
  • 🚀 WebP offers significant file size savings over both JPEG and PNG, which can be beneficial for web performance, especially on slower connections.
  • 🌐 Browser support for WebP is growing, with notable exceptions like Firefox at the time of the video, but support is on the horizon.
  • 🛠️ To implement WebP, you may need to use tools for conversion and the picture element in HTML to serve different formats for different browsers.
  • ⏱️ Large companies like Google, Netflix, and Amazon use WebP for its performance benefits, including reduced load times.
  • 👍 WebP is an excellent format, but due to current browser support limitations, it's not yet universally adoptable as the sole image format.

Q & A

  • What is the main topic of discussion in the video?

    -The main topic is when and why to use .jpg, .png, or .webp formats for images on the web.

  • What is the short answer given for which image format to use?

    -The short answer is to use WebP, as it is considered the best format.

  • What is the main issue with the short answer?

    -The issue is that you can't universally use WebP because not all browsers support it.

  • What is JPEG and what are its characteristics?

    -JPEG is a lossy format, meaning it compresses images and loses quality depending on the compression level.

  • How does the quality of a JPEG image affect its file size?

    -As the quality of a JPEG image is reduced, the file size decreases, but this also introduces more compression artifacts.

  • What is PNG and how does it differ from JPEG?

    -PNG is a lossless format that does not compress images, maintaining quality but resulting in larger file sizes. It also supports transparency.

  • Why would you choose PNG over JPEG?

    -You would choose PNG for images that require transparency, text, simple graphics, line art, or when the highest quality without compression is needed.

  • What is WebP and what advantages does it offer?

    -WebP is a format developed by Google that can be saved with or without compression (lossless or lossy), supports transparency, and generally provides smaller file sizes compared to PNG and JPEG.

  • Which browsers currently support WebP?

    -At the time of the video, WebP is supported by Chrome, Edge, and other browsers, but not Firefox.

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

    -Companies like Google, Netflix, Amazon, Yahoo, Walmart, eBay, Guardian, and USA Today are using WebP for significant savings in load times and bandwidth.

  • What is the suggested method to implement WebP for images on a website?

    -The recommended method is to use the picture element in HTML along with a JPEG or PNG version of the image for browsers that do not support WebP.

  • What additional topics will be covered in upcoming videos?

    -Upcoming videos will cover how to use the picture element, automate the image process, and set up multiple versions of the same image in different formats or resolutions.

Outlines

00:00

📈 Optimal Image Formats for Web: JPEG vs. PNG vs. WebP

The video discusses the best use cases for different image formats on the web, namely JPEG, PNG, and WebP. It starts by suggesting WebP as the best option due to its superior compression and quality, but acknowledges that it's not universally supported. The presenter uses Photoshop to demonstrate the lossy compression of JPEG images and how to balance quality with file size. PNG is highlighted for its lossless compression and support for transparency, making it ideal for text, simple graphics, and line art. WebP is introduced as a versatile format that can be saved with or without compression and supports transparency, potentially replacing both PNG and JPEG. The video also touches on the challenges of implementing WebP due to browser support issues and the need to use the picture element for compatibility.

05:00

🌐 Practical WebP Usage and Browser Support

The second paragraph dives into practical aspects of using WebP, including a demonstration of a web app that allows viewers to compare the original image with compressed versions in real-time. The presenter shows how WebP can be significantly smaller than JPEG while maintaining quality, especially when the quality setting is adjusted. The discussion also addresses the current state of WebP support in browsers, noting that while it's not supported by Firefox, it is used by many major companies like Google, Netflix, and Amazon for performance gains. The video concludes with the mention of tools to convert images to WebP and the use of the picture element to serve images to different browsers. It also hints at future content on automating the image optimization process and integrating WebP into web development workflows.

Mindmap

Keywords

💡JPEG

JPEG is a commonly used method of lossy compression for digital images, particularly for photographs. It is widely supported across the web and is known for its ability to significantly reduce file sizes, which is crucial for web optimization. In the video, the creator discusses the trade-off between image quality and file size when using JPEG, noting that higher compression leads to more noticeable artifacts in the image.

💡PNG

PNG stands for Portable Network Graphics and is a lossless file format that supports transparency. It is often used for images with text, simple graphics, and line art, where preserving every detail and allowing for transparency is important. The script mentions that PNG files are generally larger than JPEGs, but they do not lose quality due to the lossless compression.

💡WebP

WebP is an image format developed by Google that supports both lossy and lossless compression, including transparency. It is designed to provide efficient compression, resulting in smaller file sizes compared to JPEG and PNG. The video explains that while WebP is a powerful format, its adoption is not universal due to limited browser support, particularly with Firefox at the time of the video.

💡Compression

Compression in the context of the video refers to the process of reducing the size of an image file, which can be done either with lossy methods (like JPEG) that sacrifice some quality, or lossless methods (like PNG) that retain all quality. The level of compression is adjustable and directly impacts the balance between file size and image fidelity.

💡Transparency

Transparency in image files allows for parts of an image to be see-through, which can be essential for certain types of graphics, especially those designed to overlay on other content without a background. The video highlights that PNG supports transparency, which is a key feature not available in standard JPEG files.

💡Artifacting

Artifacting refers to the visual anomalies that can occur in compressed images, particularly with lossy compression like JPEG. These can include blockiness, blurriness, or other distortions that become more noticeable as the compression level increases. The video demonstrates the effects of artifacting at different quality settings.

💡Browser Support

Browser support is critical for the adoption of any web technology, including image formats. The video discusses the varying levels of support for WebP across different web browsers, noting that while it is supported by Chrome and Edge, Firefox did not support it at the time of the video's recording.

💡Picture Element

The picture element is an HTML element that allows developers to serve different image formats to different browsers depending on their support. This is particularly useful for WebP, as it can provide a fallback to JPEG or PNG for browsers that do not support WebP. The video suggests that using the picture element is necessary for implementing WebP while maintaining compatibility.

💡File Size

File size is a critical consideration for web images as it directly impacts loading times and data usage. Smaller file sizes are desirable for faster load times, especially on slow connections or for users with data caps. The video emphasizes the significant reduction in file size that can be achieved with WebP compared to JPEG and PNG.

💡Lossless Compression

Lossless compression is a method of compressing data in a way that allows the original data to be perfectly reconstructed from the compressed data. In the context of the video, PNG uses lossless compression to maintain image quality, while WebP offers a lossless option that also supports transparency.

💡Lossy Compression

Lossy compression reduces file size by removing some data in a way that cannot be perfectly reconstructed, accepting a trade-off of quality for size reduction. JPEG uses lossy compression, which is why the video discusses the need to find a balance between acceptable quality and file size reduction.

Highlights

When deciding between .jpg and .png, WebP is often the best choice due to its superior compression and quality.

WebP is a versatile format that can be saved with or without compression, making it a potential replacement for both .jpg and .png.

JPEG is a lossy format, which means it compresses images at the cost of some quality.

PNG is a lossless format that supports transparency, but it tends to have larger file sizes compared to JPEG.

PNG 8 uses a limited color palette, which can result in smaller file sizes for images with simple colors.

WebP files can be significantly smaller than their JPEG and PNG counterparts, leading to faster load times and bandwidth savings.

For images requiring transparency, WebP's lossless option is a suitable alternative to PNG.

WebP is not yet supported by all browsers, with Firefox being a notable exception.

Despite limited browser support, major companies like Google, Netflix, and Amazon use WebP for its efficiency.

To implement WebP, developers often use the picture element in HTML to serve different image formats to different browsers.

Converting images to WebP format requires the use of specific tools, which will be linked in the video description.

WebP can offer more than 50% savings in file size compared to JPEG, which is significant for image-heavy websites.

The decision between JPEG and PNG often 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 better for text, simple graphics, and line art.

The video provides a demonstration of WebP's compression capabilities using a web app provided by Google.

WebP's smaller file sizes can greatly benefit users with slow connection speeds or limited bandwidth.

The video will cover the use of the picture element and automating the image conversion process in future content.

The presenter encourages viewers to ask questions and suggest future video topics in the comments section.

Casual Browsing

How To Download Webp Image as a PNG or JPG Without Software

2024-04-21 20:15:01

How To Convert .WebP to .JPG | How to open or save webp file in Photoshop

2024-04-21 20:25:01

JPEG, PNG, SVG, OR WEBP? How the Right Image Format Makes Your site FASTER!

2024-04-21 20:15:01

How to convert WebP to JPG image file

2024-04-21 19:55:01

How to convert WebP to JPG image file

2024-04-21 20:10:01

Soup, Salad, or Breadsticks? Jessica Kirson Knows the Answer

2024-05-16 20:45:02