Mirrored: 6th of December 2024, 15:02 Settings: Loading the mirror... Original: medium.com Views: 31, 31 today
#[1]Medium [2]alternate [3]Open in app (BUTTON) Sign up [4]Sign in ____________________ [5] Write (BUTTON) Sign up [6]Sign in (BUTTON) Converting Your Images To WebP With ImageMagick [7] Andrew Solomon [8]Andrew Solomon � [9]Follow 3 min read � Mar 6, 2017 -- (BUTTON) 4 (BUTTON) Listen (BUTTON) Share Using [10]ImageMagick, [11]cwebp, and OSX, we can convert any image format to WebP. Today we will convert this YellowFlower.jpg to a YellowFlower.webp and shave off over a 3rd of the file size without much loss in quality. Format: JPEG Resolution: 600x400 Size: 90kb WebP WebP is an image format that was created in 2010 and is currently being developed by Google. WebP can handle both lossless and lossy image formats like PNG and JPEG respectively. WebP lossless image files are 26% smaller than PNGs, and the lossy variant can be anywhere from 25% to 34% smaller than a JPEG. WebP is only available in Google Chrome and Android browsers, but both Safari and Firefox are [12]experimenting with the format. ImageMagick and cwebp ImageMagick is a CLI tool that is widely used in the industry today for image formatting. Today we are going to use ImageMagick and the cwebp tool in order to convert any image into a WebP file. Download and Install ImageMagick Macports is the easiest way to install ImageMagick on OSX sudo port install ImageMagick The port command downloads ImageMagick and many of its delegate libraries (e.g. JPEG, PNG, Freetype, etc.) and configures, builds, and installs ImageMagick automagically. But it doesn't come with a library for WebP, so by default ImageMagick doesn't know how to handle WebP formats. This is where cwebp comes in handy. If you prefer to build from source just follow these commands from [13]ImageMagick for MacOs. Download and Install cwebp We must first install libwebp library in order to use the cwebp encoder tool. The libwebp library provides tools for WebP encoding( cwebp ) and decoding( dwebp ). 1. Download libwebp-0.6.0.tar.gz from the [14]libwebp repository. 2. Untar the package. This creates a directory named libwebp-0.6.0/: tar xvzf libwebp-0.6.0.tar.gz 3. cd libwebp-0.6.0/ and run the following commands: ./configure make sudo make install This builds both the cwebp and dwebp command line tools. Now that we have all of our prerequisites out of the way, we are now ready to convert our image to WebP. Convert JPEG to WebP Our YellowFlower.jpg has an image resolution of 600x400 and a file size of 90kb. Let's see what happens when we convert our image to WebP using lossless image compression. convert YellowFlower.jpg YellowFlower--WebP.webp WebP also does a great job image quality reduction. By converting our image to WebP and decreasing the quality by 50% we can see even more savings in file size, without a great loss in quality. convert YellowFlower.jpg -quality 50 YellowFlower--WebP.webp There is a small, but noticible reduction in image quality when we convert JPEG to WebP, and an even more significant change when we use 50% quality compression. Deciding on whether to convert to WebP all depends on your art direction. If you or your team have a priority in preserving optimal image quality then using the good old JPEG format is your best bet. But if retaining perfect image quality isn't a must, and you want to cut a 3rd of your file size, then simply converting your images to WebP is your best option. For even more savings play with quality compression( -quality ) when converting your images to WebP using ImageMagick and cwebp. You can use the HTML [15]source and [16]picture elements to create a fallback to your original JPEG, just in case the client doesn't have support for WebP. [17]Web Development [18] Images [19] Imagemagick [20] Webp [21] Jpeg -- -- (BUTTON) 4 (BUTTON) [22] Andrew Solomon [23] Andrew Solomon (BUTTON) Follow [24] Written by Andrew Solomon [25]87 Followers �[26]314 Following doing manly things... Like wrestling bears and taking out the garbage (BUTTON) Follow Responses (4) (BUTTON) See all responses [27] Help [28] Status [29] About [30] Careers [31] Press [32] Blog [33] Privacy [34] Terms [35] Text to speech [36] Teams References Visible links: 1. https://medium.com/osd.xml 2. android-app://com.medium.reader/https/medium.com/p/a9c56cf6b579 3. https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2Fa9c56cf6b579&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderUser&source=---top_nav_layout_nav---------------------------------- 4. https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&source=post_page---top_nav_layout_nav-----------------------global_nav----------- 5. https://medium.com/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav----------- 6. https://medium.com/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&source=post_page---top_nav_layout_nav-----------------------global_nav----------- 7. https://medium.com/@andysolomon?source=post_page---byline--a9c56cf6b579-------------------------------- 8. https://medium.com/@andysolomon?source=post_page---byline--a9c56cf6b579-------------------------------- 9. https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F4d9aea29b30a&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&user=Andrew+Solomon&userId=4d9aea29b30a&source=post_page-4d9aea29b30a--byline--a9c56cf6b579---------------------post_header----------- 10. http://www.imagemagick.org/ 11. https://developers.google.com/speed/webp/docs/cwebp 12. http://caniuse.com/#feat=webp 13. https://www.imagemagick.org/script/download.php#macosx 14. https://storage.googleapis.com/downloads.webmproject.org/releases/webp/index.html 15. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source 16. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture 17. https://medium.com/tag/web-development?source=post_page-----a9c56cf6b579-------------------------------- 18. https://medium.com/tag/images?source=post_page-----a9c56cf6b579-------------------------------- 19. https://medium.com/tag/imagemagick?source=post_page-----a9c56cf6b579-------------------------------- 20. https://medium.com/tag/webp?source=post_page-----a9c56cf6b579-------------------------------- 21. https://medium.com/tag/jpeg?source=post_page-----a9c56cf6b579-------------------------------- 22. https://medium.com/@andysolomon?source=post_page---post_author_info--a9c56cf6b579-------------------------------- 23. https://medium.com/@andysolomon?source=post_page---post_author_info--a9c56cf6b579-------------------------------- 24. https://medium.com/@andysolomon?source=post_page---post_author_info--a9c56cf6b579-------------------------------- 25. https://medium.com/@andysolomon/followers?source=post_page---post_author_info--a9c56cf6b579-------------------------------- 26. https://medium.com/@andysolomon/following?source=post_page---post_author_info--a9c56cf6b579-------------------------------- 27. https://help.medium.com/hc/en-us?source=post_page-----a9c56cf6b579-------------------------------- 28. https://medium.statuspage.io/?source=post_page-----a9c56cf6b579-------------------------------- 29. https://medium.com/about?autoplay=1&source=post_page-----a9c56cf6b579-------------------------------- 30. https://medium.com/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----a9c56cf6b579-------------------------------- 31. https://medium.com/@andysolomon/[email protected]?source=post_page-----a9c56cf6b579-------------------------------- 32. https://blog.medium.com/?source=post_page-----a9c56cf6b579-------------------------------- 33. https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----a9c56cf6b579-------------------------------- 34. https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----a9c56cf6b579-------------------------------- 35. https://speechify.com/medium?source=post_page-----a9c56cf6b579-------------------------------- 36. https://medium.com/business?source=post_page-----a9c56cf6b579-------------------------------- Hidden links: 38. https://medium.com/?source=---top_nav_layout_nav---------------------------------- 39. https://medium.com/search?source=---top_nav_layout_nav---------------------------------- 40. https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fa9c56cf6b579&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&user=Andrew+Solomon&userId=4d9aea29b30a&source=---header_actions--a9c56cf6b579---------------------clap_footer----------- 41. https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fa9c56cf6b579&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&source=---header_actions--a9c56cf6b579---------------------bookmark_footer----------- 42. https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fa9c56cf6b579&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&user=Andrew+Solomon&userId=4d9aea29b30a&source=---footer_actions--a9c56cf6b579---------------------clap_footer----------- 43. https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fp%2Fa9c56cf6b579&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&user=Andrew+Solomon&userId=4d9aea29b30a&source=---footer_actions--a9c56cf6b579---------------------clap_footer----------- 44. https://medium.com/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2Fa9c56cf6b579&operation=register&redirect=https%3A%2F%2Fmedium.com%2F%40andysolomon%2Fconverting-your-images-to-webp-with-imagemagick-a9c56cf6b579&source=---footer_actions--a9c56cf6b579---------------------bookmark_footer----------- 45. https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--a9c56cf6b579--------------------------------