Playing with some different image formats to see how they look and perform. Locally they look great, but I have seen too many times images look great on the local machine, but run them through a web server, and they get weird like dark and or fuzzy. I have been researching this to make things look better and load faster, and I have found out that the current image format with all the cool kids is WebP
WebP is an image format developed by Google that uses both lossy and lossless compression techniques. It was designed to be a more efficient alternative to existing image formats such as JPEG and PNG.
WebP images typically have a smaller file size than comparable images in other formats, which can result in faster page load times and reduced bandwidth usage. This is achieved through a combination of image compression techniques, including predictive coding, transform coding, and entropy coding.
WebP supports both lossy and lossless compression, meaning that it can be used for both photographic images and images with sharp edges and text. It also supports alpha transparency, which allows for the creation of images with a transparent background.
WebP is supported by most major web browsers, including Chrome, Firefox, Safari, and Edge, I didn’t dig deep on second tier browsers because I rarely ever see them in my logs, or they are spinoffs of the browsers listed above, so why bother. It was not easy finding image editing tools, since it is not yet as widely supported as other image formats, which means that it may not be the best choice for all applications.
Here are some additional details about the WebP image format:
- WebP was first introduced by Google in 2010 as an alternative to JPEG and other image formats. It was designed to be a modern, high-performance format that could deliver high-quality images with smaller file sizes.
- WebP uses a combination of lossy and lossless compression techniques to achieve smaller file sizes. In lossy mode, the image quality is reduced to achieve a smaller file size. In lossless mode, the image quality is preserved, but the file size is still smaller than other formats.
- WebP supports both 8-bit and 24-bit color, as well as alpha transparency. This means that it can be used for a wide range of image types, including photographic images, illustrations, and graphics.
- I have yet to find many image editors that support WebP file creation, but files can be created using a number of converter apps that will do other things along with the conversion of RAW files to WebP. There is allegedly a WebP plugin for Adobe Photoshop, I don’t own photoshop, so I couldn’t confirm.
- WebP is supported by the primary web browsers, including Chrome, Firefox, Safari, Edge, and all their offspring and variants.
- WebP can offer significant benefits for web developers, including faster page load times and reduced bandwidth usage. However, it’s important to consider the level of support for the format in the target audience and the intended use case of the images before deciding to use WebP.
All the images on the page are WebP, and to me, they look the same on a browser as they do locally. I don’t think I need to add any steps to my workflow, I just need to modify one step to change the converter program I use to go from RAW to JPG and resize, and add a watermark. I wish there was a way to change the images that I have already uploaded because that would save some space, I guess if I start running low on drive space I can do some retroactive conversions.