When you choose regular old WebP for your lossy images, though, you’ll get something like this: The WebP Lossy Configuration Dialogue When you save images using the WebP Lossless format with the Photoshop plugin, you’re given no prompts. Use WebP Lossless when you’re converting your PNGs. Use regular old WebP when you want to convert your JPEG images. JPEGs are lossy, and PNG images are lossless. What’s the difference between the two? Think of it as being a lot like the differences between JPEG and PNG images.
Webp converter npm install#
After you install it, you’ll be able to use the Save As option (not Save For Web!) and select either WebP or WebP Lossless from the format dropdown. If you’re familiar with Photoshop, the easiest way to get a taste for WebP is to try out the WebP Photoshop Plugin. Let’s optimize! Converting your Images to WebP This is the nature of developing for the web: Have your Plan A ready for browsers that can handle it, and have your Plan B (and maybe Plan C) ready for those browsers that are less capable.Įnough with the disclaimers.
It’s a format you can serve to browsers that can use it, but you should keep older image formats on hand for other browsers. It’s important to remember, though, that WebP is not a replacement for JPEG and PNG images. If you had the chance to make your website faster for over two-thirds of your users, would you pass it up? I think not. These browsers make up a significant portion of users worldwide, however, meaning that nearly 70% of browsers in use support WebP at the time of this writing. Since WebP is a Google technology, support for it is fixed to Blink-based browsers. So the next question, of course, is “what’s the browser support?” Not as slim as you might think. Not too bad, especially when you consider that the visual quality between the two is comparable. The JPEG version on the left weighs in at 56.7 KB, and the WebP version on the right is nearly a third smaller at 38 KB. In the above example, the visual differences are nearly imperceptible, yet the differences in file size are substantial. Below is a comparison of a lossy WebP image and a JPEG image: Can you tell the difference? (Hint: the WebP version is on the right.) WebP’s visual quality is often comparable to more ubiquitous formats. It supports encoding images in both lossless and lossy formats, making it a versatile format for any type of visual media, and a great alternative format to both PNG or JPEG. WebP is an image format developed and first released by Google in 2010.
Let’s begin! What is WebP, and Why Should I Even Care? Such a topic can easily be its own book, but the focus of this post will be very specific: Google’s WebP image format, and how you can take advantage of it to serve images that have all the visual fidelity your images have now, but at a fraction of the file size. Many techniques exist for slimming down unruly images, and delivering them according to the capabilities of the devices that request them. The solution to this dilemma is not one dimensional. The challenge is in walking the tightrope between visually rich content, and the speedy delivery of it. Images are expressive tools, and they have the ability to speak more than copy can. This is a problem, because images represent a significant portion of what’s downloaded on a typical website, and for good reason. You’re suddenly reminded of the bad old days of dial-up. On a doddering mobile connection, you can even see these images unfurl before you like a descending window shade. These images tug at your senses, and for content authors, they’re essential in moving people to do things.Įxcept that these images are downright huge. We’ve all been there before: You’re browsing a website that has a ton of huge images of delicious food, or maybe that new gadget you’ve been eyeballing.
0 kommentar(er)
