A Modern Image Format
WebP is an image format by Google. WebP images are about 50-70% smaller on disk for the same visual quality as a PNG or JPEG.
CodeKit can automatically export WebP versions of PNG, JPEG, and GIF images—including animated GIFs. It can also optimize existing WebP images.
Can I Really Use It?
Yes. WebP is supported natively in Chrome, Firefox and Windows. Apple added support in iOS 14 and macOS Big Sur. You'll need to provide a PNG/JPEG/GIF fallback for the next couple of years, but WebP is ready for production use. The size savings make the hassle worthwhile.
The Image Inspector
Select one or more WebP images in CodeKit and you'll see the Image Inspector:
WebP Options
The WebP optimizer uses "Presets", which are simply pre-populated sets of options. CodeKit ships with several built-in Presets, which cover most types of images:
- Default: A good starting point for all image types
- Photo: Best for outdoor images with natural lighting
- Picture: Best for indoor photos and portraits
- Drawing: Best for hand drawings or line art with lots of contrast
- Icon: Best for small, icon-sized images with color
- Text: Best for images that contain mostly text
RGB Quality
This controls how aggressively the WebP Optimizer changes RGB pixel data in the image. Lower values produce smaller files at the expense of image quality. 80% is a good starting value.
The Lossless Preset
If you select the "Lossless" Preset, image quality will not be reduced. However, you're unlikely to see much file size savings.
When Lossless is selected, the "RGB Quality" slider becomes "Compression" instead. This controls how much time the Optimizer spends trying to find the best compression method for this image (with no changes to the actual pixel data). Higher values yield slightly smaller files, but can take a long time.
The "Do Not Create a WebP Image" Preset
CodeKit can automatically export a WebP version of PNG, JPEG, and GIF images in your project. If you do not want a WebP version, select this option. This is the default option; you must opt in to having WebP images created. You can do that on a file-by-file basis, or for all files of a given type at once (PNG, JPEG, GIF) in Project Settings > Languages.
Note: this Preset is not available when you select a WebP image. If you do not want a WebP image optimized, simply change its Output Action.
Custom Presets
For fine-grained control over WebP, you can add your own Presets. Open Project Settings > WebP and then click the "add" button in the "Custom Presets" section.
Rename the Preset by clicking it. Then, adjust the available options. There are MANY of them. For full details, see the official WebP documentation.
Your custom Presets will appear next to the built-in ones in the pop-up menu. If you want your Presets to be available for all Projects, add them in the Defaults For New Projects area.
How Do I Use WebP?
The "picture" element loads WebP images when a browser supports them and fallbacks to a PNG, JPEG, or GIF when it does not:
<picture>
<source srcset="img/image.webp" type="image/webp">
<source srcset="img/image.png" type="image/png">
<img src="img/image.png" alt="Alt Text">
</picture>
For ancient browsers that don't even support the <picture> element, the above snippet still works because the img element has a "src" attribute set. To use WebP in CSS and other places, see this CSS-Tricks article.
Image Comparison
If your project uses a Build Folder, you can easily compare the original and optimized images. Select the image in CodeKit's list of files, then press the spacebar. Alternately, double-click the image thumbnail in the inspector.
The new window shows the original image on the left and the optimized version on the right. Drag the slider to compare details.
If there are multiple output images (e.g. PNG + WebP), you can pick the one displayed in the window. Use the pop-up button in the top right corner.
Note: You will not see the image comparison window if your image optimizes "in-place", because the optimized version overwrites the original file.
Other Details
A Note About "Initial Size"
This is how large an image was the first time CodeKit ever saw it. The value never changes. So, if you start with a small image (say, 50x50 px) and then replace it with a bigger one (say, 5000x5000 px), it's possible that the current size may be larger than the initial size, even after optimization. In this case, the initial size isn't really accurate because it was set when a smaller file occupied the path.
Output Path & Action
These options apply to files of all types. They are explained in Setting Output Paths & Actions.
Normally, CodeKit will not copy or process a file if its output path is the same as its input path. The exception to this is images.
Why Don't Images Optimize Automatically When I Add Them?
They will if your project uses a Build Folder. If not, CodeKit won't automatically optimize images as you add them to a Project because that's a destructive action—without a build folder, the optimized image overwrites the original one.