{"id":5807,"date":"2021-04-29T10:22:30","date_gmt":"2021-04-29T10:22:30","guid":{"rendered":"https:\/\/shortpixel.com/blog\/?p=5807"},"modified":"2021-04-29T14:14:23","modified_gmt":"2021-04-29T14:14:23","slug":"shortpixel-image-optimizer-the-only-wp-plugin-that-creates-avif-images","status":"publish","type":"post","link":"https:\/\/shortpixel.com\/blog\/shortpixel-image-optimizer-the-only-wp-plugin-that-creates-avif-images\/","title":{"rendered":"ShortPixel Image Optimizer: The only WP plugin that creates AVIF images"},"content":{"rendered":"\n

AVIF images are the next big step in image compression, and we have already been talking about it<\/a>. AVIF promises images 50% smaller than JPG<\/strong>, and still keeping the same image quality. In comparison, WebP makes the image about 30% smaller, so it’s easy to see why you will want AVIF.<\/p>\n\n\n\n

Starting with version 4.22, ShortPixel Image Optimizer (SPIO) is able to generate AVIF images<\/strong>! No need to use any hacks or manually upload them to your site. You just need the good old ShortPixel Image Optimizer<\/a>.<\/p>\n\n\n\n\n\n\n\n

How to generate AVIF with ShortPixel<\/h2>\n\n\n\n

The process to generate AVIF images is as easy as always:<\/p>\n\n\n\n

  1. Install ShortPixel Image Optimizer from the WordPress repository: Step-by-step guide to install and use ShortPixel Image Optimizer (SPIO)<\/a><\/li>
  2. Go to Settings > ShortPixel > Advanced<\/li>
  3. Look for the “Next Generation Images” section and activate the option “Also create <\/strong>AVIF versions<\/strong><\/a> of the images<\/strong>“
    \"\"<\/li>
  4. Start optimizing!<\/li><\/ol>\n\n\n\n

    Notice that, for now, the creation of AVIF and\/or WebP files with ShortPixel is dependent on the optimization<\/strong> of a file. This means that you must optimize an image in order to create its AVIF\/WebP counterpart.<\/p>\n\n\n\n

    However, we are happy to share with you that we are working on a feature to generate AVIFs and WebPs independently <\/strong>of the optimization. Our aim is to have it ready for the next major version 5.0. We will keep you updated!<\/p>\n\n\n\n

    How to deliver AVIF with ShortPixel<\/h2>\n\n\n\n

    If you want to serve AVIF files with ShortPixel, you can do that as well. Simply go to Settings > ShortPixel > Advanced (same place as before) and activate the option “Deliver the next generation versions of the images in the front-end<\/strong>“. <\/p>\n\n\n\n

    \"AVIF\"<\/figure>\n\n\n\n

    You will see that you have two different methods<\/strong> to deliver the AVIF files. To learn more about them, click here<\/a>.<\/p>\n\n\n\n

    It is important to know that the second method (without altering the page code, via .htaccess<\/strong>) will not work on NGINX servers. If your site is running on NGINX, and you do not want to use the first method (using the <picture> tag syntax), you will need to manually update your NGINX configuration files. For more information, we created a small tutorial on how to do that here: How to configure your web server to deliver AVIF images<\/a><\/p>\n\n\n\n

    How much does it cost?<\/h2>\n\n\n\n

    Even though the generation of AVIF files is very CPU intensive<\/strong> and takes up a lot of resources, it will cost only 1 credit per AVIF file created<\/strong>. Take into account that depending on your theme and plugins, you will have a certain number of thumbnails<\/a> attached to each image. Each of these thumbnails will also have an AVIF counterpart and will cost an additional credit.<\/p>\n\n\n\n

    Starting May 10th 2021, the same will apply to the generation of WebP files: each WebP file will cost 1 additional credit. To know more about why the WebP generation is not free anymore, check out this article<\/a>.<\/p>\n\n\n\n

    Also, remember that as always, if an image cannot be optimized by at least 5 percent<\/strong> when using the Lossy or Glossy methods, its optimization will still be free of charge<\/strong>.<\/p>\n\n\n\n

    Separating features to save credits<\/h3>\n\n\n\n

    Now, if you were already a ShortPixel client, you may remember that until now you were not able to deliver your WebP files without creating them first. Well, good news! With the most recent update we have separated the two features: you can now create your AVIF and\/or WebP files with any other tool and choose to deliver them with ShortPixel.<\/strong> This way you will not spend any additional credits.<\/p>\n\n\n\n

    \"\"<\/figure>\n\n\n\n

    The process you need to follow is easy: <\/p>\n\n\n\n

    1. Disable <\/strong>the options “Also create AVIF versions<\/a> of the images” and “Also create WebP versions of the images”<\/li>
    2. Enable <\/strong>the option “Deliver the next generation versions of the images in the front-end” and choose a delivery method.<\/li>
    3. Upload <\/strong>your own WebP and\/or AVIF files and if they have the same filename as the original image, but with the .webp\/.avif extension (please also take into account all thumbnails!), then ShortPixel will deliver them<\/li><\/ol>\n\n\n\n

      We are here to help you out if you have any questions, so feel free to send us a message<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"

      AVIF images are the next big step in image compression, and we have already been talking about it. AVIF promises images 50% smaller than JPG, and still keeping the same image quality. In comparison, WebP makes the image about 30% smaller, so it’s easy to see why you will want AVIF. Starting with version 4.22, ShortPixel […]<\/p>\n","protected":false},"author":9,"featured_media":5832,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5807","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-world-of-wordpress"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5807","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/comments?post=5807"}],"version-history":[{"count":7,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5807\/revisions"}],"predecessor-version":[{"id":5831,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/posts\/5807\/revisions\/5831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media\/5832"}],"wp:attachment":[{"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/media?parent=5807"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/categories?post=5807"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/shortpixel.com\/blog\/wp-json\/wp\/v2\/tags?post=5807"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}