The drawback with this method is (apart from having to write the code) that the actual conversion will take some extra time and cause some loading delay when uploading images. If you are unable to find a plugin or third-party service that fits your needs, it is also possible to build your own file conversion that is used for whenever a CMS user uploads an image. Note that to see if the plugin is working, you will have to check the image the file type in the DevTools network tab since the plugin does not change the image URL filename ending. #Web optimize using xnconvert freeThe drawback with using one or more plugins and/or external services is that most might not be free, so you would have to research which setup would make the most sense based on your specific use case.Ī popular WordPress plugin is “webP Converter for Media”, which apart from being free to use also hints about being able to support an even newer (and slimmer) image format called avif in the future. One solution is to use a plugin or combinations of plugins to create the webP images and corresponding fallback solution for older browsers.ĬDNs like Sirv or Cloudflare also offer webP format images as part of their services. #Web optimize using xnconvert updateUse the class (“no-js”) to set the appropriate image: /* CSS */ĭ("no-js") Ĭreating and managing webP images using the previously described methods is probably alright if you are a developer or a dedicated web administrator.įor clients that occasionally update their own websites, adding even more steps to a process they might already find cumbersome is not appreciated even if it will improve their website’s performance. Use CSS to target each case, setting the appropriate image: /* CSS */įor users that have disabled JavaScript in their browsers, add a specific class (“no-js”) to a wrapping element, and a script to remove the class for browsers that have enabled JavaScript. Add classes to a wrapping element indicating if support is present or not. One strategy is to use JavaScript (like Modernizr) to find out if the browser supports webP or not. WebP images can be used as background-images, but creating fallbacks for non-supporting browsers requires a little more work than for using the image in HTML. If you need support for older browsers, Picturefill also supports webP which is great. The picture element with source and srcset seems to be the easiest way of using webP with fallbacks. If you prefer using the command line, there is also the official CwebP command line encoder.Įven if browser support is pretty good among modern browsers ( 96% at the time of writing), note that it is only available in Safari for iOS users who have updated to Big Sur. There are multiple online converting services, for example: Online-Convert, and Google backed Squoosh. It is possible to work with webP images in Adobe Photoshop using the Google backed plugin WebPShop.Ĭonverting images in other file formats to webP is however also possible through the following suggestions. The cross-platform app XnConvert is free to use and allows batch image conversions. #Web optimize using xnconvert softwareImage editing software Sketch (Mac only, subscription needed) as well as GIMP (free, cross-platform) can export to webP. The image format supports both lossy and lossless compression – essentially different ways of making the image file weight smaller.Ī webP image has the potential of being around 25% to 33% smaller than its jpeg counterpart, and around 25% smaller than a png.īoth transparency as well as animation is supported, making webP able to also replace animated GIFs.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |