{"id":2073,"date":"2023-01-02T15:33:22","date_gmt":"2023-01-02T15:33:22","guid":{"rendered":"https:\/\/www.antpace.com\/blog\/?p=2073"},"modified":"2025-08-25T18:02:37","modified_gmt":"2025-08-25T18:02:37","slug":"optimize-your-sites-speed-convert-images-to-webp-format","status":"publish","type":"post","link":"https:\/\/www.antpace.com\/blog\/optimize-your-sites-speed-convert-images-to-webp-format\/","title":{"rendered":"Optimize Your Site\u2019s Speed: Convert Images to WebP Format"},"content":{"rendered":"<p>In a <a href=\"https:\/\/www.antpace.com\/blog\/existing-website-maintenance-audit-enhancement\/\">recent post I discussed auditing existing websites<\/a> for potential performance enhancements. In the process I discovered issues with the AntPace.com Lighthouse estimates (a topic I covered briefly in a <a href=\"https:\/\/www.antpace.com\/blog\/develop-apps-explore-the-world\/\">post about progressive web apps<\/a>).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2075\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2023\/10\/lighthouse-performance-estimate.png\" alt=\"Lighthouse performance estimate\" width=\"1418\" height=\"862\" \/><\/p>\n<p>My performance only scored 50 out of 100. One &#8220;opportunity&#8221; (estimated to save 2.16s) was to &#8220;serve images in next-gen formats&#8221;. AVIF (based on the AV1 video codec) and WebP are considered next generation because of &#8220;<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/uses-webp-images\/?utm_source=lighthouse&amp;utm_medium=devtools\" target=\"_blank\" rel=\"noopener\">superior compression and quality characteristics compared to their older JPEG and PNG counterparts<\/a>&#8220;. I chose to upgrade my images WebP (instead of AVIF) mostly due to greater browser support.<\/p>\n<p>Before I upload images to this site, I usually run them through <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noopener\">TinyPNG<\/a>. Sometimes, I&#8217;ll also do some manual pre-processing in the GIMP, like cropping or scaling images down. I know that there\u00a0 must be a better way to do all of that through a proper CI pipeline &#8211; but for now that is my low tech solution. Now that I need to come up with a new process for next-gen image formats, it might be a good time to explore a more automated solution.<\/p>\n<h2>Properly Size an Image for Your Website<\/h2>\n<p>Site speed is important for user experience and SEO. Having an image with unnecessarily large dimensions eats up bandwidth and leads to slow load times. You can open an image file in the GIMP and use the scale tool to reduce the size while maintaining the ratio. Once it is reduced, you can copy and paste it to it&#8217;s own canvas and save the file.<br \/>\n<iframe loading=\"lazy\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/rClg2hueP1U?si=Hbw5HwA9uTqgihqU\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><\/iframe><\/p>\n<p>I write more about using this image manipulation program in another <a href=\"https:\/\/www.antpace.com\/blog\/design-for-programmers\/\">article about design for programmers<\/a><\/p>\n<h2>Convert multiple images to next-gen WebP file format<\/h2>\n<p>For converting single images, manually, one at a time I could use the GIMP or <a href=\"https:\/\/convertio.co\/\" target=\"_blank\" rel=\"noopener\">an online service<\/a>. I used a command line tool on my mac called <code>webp tools<\/code> to bulk upgrade all of the files in an image directory.<\/p>\n<pre>brew install webp\n<\/pre>\n<p>For a single file I can use this command:<\/p>\n<pre>cwebp -q 80 software-education.png -o software-education.webp<\/pre>\n<p>To hit all of my image files in that folder I ran loops over the existing file formats. You should change this to include any other file formats used in your project.<\/p>\n<pre>for i in *.jpg; do cwebp -q 80 \"$i\" -o \"${i%.jpg}.webp\";done\nfor i in *.png; do cwebp -q 80 \"$i\" -o \"${i%.png}.webp\";done<\/pre>\n<p>I saved them to a new folder, so that I could easily delete all of the old files at once and then replace them. Alternatively, I can save them in the same directory and then run a command to delete all of the <code>.png<\/code> files:\u00a0<em>rm *.png<br \/>\n<\/em><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2077\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2023\/10\/new-folder.png\" alt=\"New folder amongst legacy image files\" width=\"1183\" height=\"574\" \/><\/p>\n<p>My website has been around for a while, so there are unused legacy media files. I manually searched my code base (<em>ctrl + shift + f<\/em>) for the file names listed in the various <code>\/image<\/code> directories throughout my project, and deleted them if I found no references. (Maybe having so many disjointed image folders is part of a bigger problem with this project). If I did find it, I updated the file extension to <code>webp<\/code>. Later, <a href=\"https:\/\/www.antpace.com\/blog\/identify-unused-image-files-in-a-code-project\/\">I wrote a script to automatically find and delete unused image files from a project<\/a>.<\/p>\n<p>This change increased my Lighthouse performance score by ten points (I gained an additional two but upgrading MariaDB from version 10.2 to 10.4). I did this process is a few other directories of my project to complete the upgrade. I was going to convert my Apple touch icon files to a next-gen format too, but the documentation specify the use of the PNG format (good thing I checked).<\/p>\n<h2>WordPress and WebP<\/h2>\n<p>Having adopted WebP as the new standard file format for AntPace.com, I decided to upload <code>.webp<\/code> images to my posts &#8211; starting with this one. When I tried, WordPress complained: &#8220;This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading.&#8221;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2088\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2023\/10\/image-cant-be-processed-by-the-server.png\" alt=\"error from wordpress when trying to upload a next generation image file\" width=\"1375\" height=\"730\" \/><\/p>\n<p>This surprised me. I upgraded WordPress to the latest version (6.3.1 at that time), but it didn&#8217;t help. After further investigation, it looked like the problem had to do with the PHP image module <code>gd<\/code>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2102\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2023\/01\/site-health.png\" alt=\"\" width=\"1245\" height=\"776\" \/><\/p>\n<p>I SSH&#8217;d into my EC2 instance to see what I could do. When I tried to install <code>gd<\/code> for my PHP version 7.4, I got a version mismatch error. It had to due with Amazon Linux 2 (the OS I run on AWS EC2) not supporting PHP 7.4 as it approaching or have passed their <strong>end-of-support dates<\/strong>. Every time I tried to installthe <code>gd<\/code> module, Amazon Linux Extras (the default Amazon Linux 2 package mechanism) would try to pull the version compatible with PHP 7.2. In an attempt to make it work, I manually disabled &#8216;amazon-linux-extras&#8217;, installed the Remi repository and made sure it was prioritized as my package manager. Still, &#8220;<span class=\"s1\">Packages skipped because of dependency problems&#8221;. <\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2111\" src=\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2023\/01\/end-of-life.png\" alt=\"Amazon Linux 2 is at EOL.\" width=\"843\" height=\"305\" \/><\/p>\n<p><span class=\"s1\">The same thing happened when I tried using ImageMagick instead. This made me consider my Linux distribution. Not having <code>gd<\/code> installed what causing other problems when uploading media through WordPress (responsive image sizes are not being generated). <\/span><\/p>\n<p><span class=\"s1\">I had been wanting to upgrade the size of my EC2 instance anyway, so this might be the right time. I am considering Amazon Linux 2023 or a Bitnami image.\u00a0 As you know, I&#8217;ll write a blog post about which I choose and the implementation details<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a recent post I discussed auditing existing websites for potential performance enhancements. In the process I discovered issues with the AntPace.com Lighthouse estimates (a topic I covered briefly in a post about progressive web apps). My performance only scored 50 out of 100. One &#8220;opportunity&#8221; (estimated to save 2.16s) was to &#8220;serve images in &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.antpace.com\/blog\/optimize-your-sites-speed-convert-images-to-webp-format\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Optimize Your Site\u2019s Speed: Convert Images to WebP Format&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3259,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[55],"class_list":["post-2073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-frontend"],"_links":{"self":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/2073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/comments?post=2073"}],"version-history":[{"count":1,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/2073\/revisions"}],"predecessor-version":[{"id":3260,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/2073\/revisions\/3260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media\/3259"}],"wp:attachment":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media?parent=2073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/categories?post=2073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/tags?post=2073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}