1. Webponize Download
2. Webponize

Image file sizes in the above example:

I was developing an application of macos called webponize, which converts the image of webponize to webp with drag and drop, and it was originally delivered using github release and homebrew cask, but I decided to deliver it from the app store. 2 alternative and related products to WebPonize. MacOS application that converts images to WebP. MacOS application that converts images to WebP. Developer Tools. Smartlook Qualitative Analytics. Understand everything about your web and mobile app users.

• JPEG, Standard Resolution, 381 KB
• JPEG, Retina x2 Resolution, 942 KB
• WebP, Standard Resolution, 193 KB
• WebP Retina x2 Resolution, 477 KB

You can see from the above stats how WebP consistently has the smallest file size, versus the JPG formatted image. And yet the WebP image has a greater colour depth and sharpness when viewed on a calibrated monitor.

Setup

To use WebPStack stack, follow these instructions carefully..

1. Download the .zip file of WebPStack using the link above. Uncompress the download on your computer. Drag and drop the Stacks4Stacks-WebPStack.stack file onto your RapidWeaver dock icon. Confirm you want to install WebPStack. Restart RapidWeaver.
2. Open a project file in RapidWeaver or create a new one. Add a Stacks page type to your website if it does not already have one.
3. Open your stacks library and search for the newly installed WebPStack.
4. Drag and drop a copy of the WebPStack stack into your page.
5. With the WebPStack stack selected in edit mode, open the Stacks side panel to access the settings for WebPStack.
6. Specify the links to your WebP images. Then set the links to the JPG, PNG or GIF fallback images. You can use images added as resources in RapidWeaver or images you store online already in a publicly accessible location.
7. You must provide an ALT attribute. The ALT or 'alternative text' is a short sentence describing what the image is about; used by assistive devices and search engines indexing your website pages.
8. A tooltip title and enclosing link are optional. Only setup these if you need them.
9. Preview your webpage to make sure the WebPStack is displaying either your WebP or fallback JPG / PNG / GIF image. Export or publish your website when done.

Like most of our stacks, all settings in WebPStack display informational tooltips, if you hover your mouse over them. These give you more details about what each setting does.

Image resolution and responsiveness

What is the difference between 1x and 2x images? 1x images are standard resolution images. The 2x images you have the option to use are what we would ordinarily class as retina-display optimised images. These images remain 72 dpi, but are double the width and height of your standard images. On high resolution screens, these retina-display optimised images will be used instead of the standard resolution images. Retina-display optimised images will give a sharper and higher quality appearance on high resolution screens. If you are publishing photographic material or artwork that demands the best possible image quality, it is well-worth creating standard and retina resolution copies of your images. Retina versions typically include the @2x flag between the file name and its extension (e.g. summer-flowers@2x.webp).
The WebPStack will scale images responsively all the time. This basically means the image will expand to its maximum width and its height will remain in proportion. On smaller screens (or if you put WebPStack in a small space, like a grid column) the image will reduce in size proportionately. The WebPStack is also compatible for use in theme ExtraContent containers and FreeStyle banners.

WebP, or unofficially pronounced as weppy, is an image format introduced by Google Developers around 5 years ago. if you are a web designer, or a developer who strives to reduce and optimize your image file size, what WebP is capable of should put a smile on your face.

In brief, here are some of the important stuff you need to know about this not-so-new-but-still-cool image format:

• WebP goes by the file extension of .webp.
• WebP adopts both lossy and lossless compression.
• WebP lossy images are potentially 25-34% smaller than JPEG.
• WebP lossless images are potentially 25% smaller compared to PNG.
• WebP supports lossless transparency, i.e. PNG with alpha channel.
• WebP supports animation. i.e. animated GIFs.

In a nutshell, WebP is capable of significantly reducing JPEG, GIF, PNG’s image file size. Here’s a refresher on WebP you should check out before we go into the fun stuff.

An Experiment

The best things about claims on the Web is that we can always run experiments to check out the truthfulness and authenticity. Here are some experiments I did to find out how small an image can potentially get after they are converted from various image formats (JPEG, PNG and GIF) to WebP.

1. JPEG – Lossy Image

Here’s a random JPEG image I grabbed from Pexels.Original filesize – 165kb. ↓

Image is optimzed with JpegMini. New filesize – 101kb. ↓

Finally, the same image is converted to WebP format. Final filesize –
70kb. ↓

On a side note: Here are the different filesizes if the same image was converted to the following formats:

• GIF – 285kb
• PNG 8 – 241.2kb
• PNG 24 – 657.6kb

2. PNG – Lossless Image

Now, let’s try with PNG with transparency. (Source). Original filesize – 587kb. ↓

Here’s the image optimized with tinypng. New filesize – 278kb. ↓

And lastly, the image converted to WebP format. Final filesize – 112kb. ↓

3. Animated GIF

When converted to WebP, a JPEG image went from 165kb to 70kb, while a PNG image went from 587kb to 112kb.

Let’s see how an animated GIFs fare:

• Original filesize – 6.8mb
• WebP filesize – 6.3mb

Summary:

Webponize Download

Here’s a table to summarize the entire experiment: Draw download for mac.

Lossy (JPG)	Lossless (PNG)	Animated-GIF
Original	165kb	587kb	6.8mb
Optimized with tools	101kb	278kb	–
WebP format	70kb	112kb	6.3mb

Without dwelling much in mathematical calculations, those figures indicate substantial reduction of file sizes, and judging from the images, you can’t really tell the difference in terms of clarity and resolution. Smaller, lighter file sizes with the same level of image quality, WebP is definitely worth looking into.

Converting to WebP with Tools

If you’re already on board and would like to start releasing images in WebP format, let’s dive in and look at how you can convert your images easily to this format. All the methods mentioned below vary in terms of controls, ease to use, and conviniency. Pick your poison.

WebPonize for Mac

WebPonize is probably the simplest and fastest way to convert images to WebP format on the Mac. All you need to do is just drag and drop your images into WebPonize and it’ll do the conversion. You will receive the ouput, the before-size, after-size and the % of reduction of the original file. [Download WebPonize]

Webpconv for Windows

If you’re running Windows, Webpconv is the app you should install. It also comes in portable version so you can run it independently on your flash drive. [Download Webconv]

Converting with Command Lines

If you are feeling geeky, you may probably want to excute the conversion using command lines. cwebp converts your JPEG, PNG, or TIFF images into WebP format and dwebp converts them back to PNG format. Let’s see how this works.

Note: The following guide it for Mac OS X. For Windows and Linux users, click here.

Webponize

Setting up MacPorts on Mac OSX

First up, make sure you have Xcode installed, then follow these steps:

1. Download and install MacPorts. If you already have MacPorts installed in your Mac, proceed to step 2.
2. Launch Terminal.
3. Type “sudo port selfupdate” and hit enter. This will update your MacPorts to the latest version.
   
4. Next, type “sudo port install webp” and hit enter. This will install libwebp (WebP Library).
   

That’s it. Now let’s take a look at how to convert images to WebP using command line.

Commands to Convert/Revert

Here are the commands to:

I – Convert JPEG / PNG image files to WebP format

Format:
cwebp -q [image_quality] [JPEG/PNG_filename] -o [WebP_filename]

Example:

II – Covert WebP image files back to PNG

Format:
dwebp [WebP_filename] -o [PNG_filename]

Odin for mac android. Example:

More: If you perfer conversioni via other means, here are instructions for using Grunt and Gulp tasks to convert JPG/PNG files to WebP.

Convert With Online Tools

If you’re not looking at installing any applications on your operating system to perform this task, opt for these online tools instead. Here are a few that I’ve come to know:

Tip: If you google convert webp online , you will probably find more options.

Photoshop Plugin

You may be glad to know that there is also a Photoshop Plugin that allows you to save images to WebP format via Photoshop. This plugin supports Mac OS X (CS 2- CS 6) and Windows (32 bit & 64 bit). [Download the plugin here.]

Note: Just thought you should know that I tried it on Photoshop CC. Didn’t work there.

WebP Browser Support

Lastly, let’s talk about compatibility. Currently, you can view WebP format images on the following browsers (ref):

• Chrome / Chrome for iOS
• Opera / Opera Mini

Not so much luck for FireFox and Safari, which still do not support WebP format natively. However, you can use WebPJS Javascript library to convert WebP images into dataURI string on the client site.

Fall back to other image formats

It’s always a good idea to use a fallback to avoid showing image errors due to unsupported browsers. In this case, the fallback will be to the image in JPG or PNG format. Here’s how you do it.

For this code, example.jpg will be loaded if the user used Firefox or Safari.

Previewing WebP images

You can preview WebP images on Chrome and Opera browers. But if you want to do it locally on your machine, you will need a few tools.

Mac Users can use WebPQuickLook to preview WebP format images using the Quick Look function (with the image selected or highlighted, press the spacebar).

For Windows Users, WebPCodec will display a thumbnail preview of WebP images in File Explorer. Both the WebP and JPEG equivalents will be shown. On certain supported Window OS (Vista, 7, 8), the WebP image can be shown on the Windows Photo Viewer as well.

More:ReSCR.it delivers images in WeBP format automatically and it’s available if you store your images with MaxCDN. (Read more)

Further references

The post Complete Guide to Using WebP Image Format appeared first on Hongkiat.