How to optimize WordPress with Ubuntu VPS

Ubuntu Virtual Private Server optimized for WordPress

Tag: AVIF image format

  • AVIF image support missing in Backblaze B2 Cloud Storage buckets

    AVIF image support missing in Backblaze B2 Cloud Storage buckets

    The problem with AVIF image is illustrated in a video here

    This video will show you what happens when you link to an AVIF image that is stored in a Backblaze.com B2 Cloud Storage bucket:

    The question concerns programming and software development

    I need help with the code to put into the Backblaze B2 bucket to make AVIF images work when Backblaze B2 is used as a CDN during web development with WordPress.

    WEBP image test working correct

    AVIF image test not working

    WEBP, PNG and JPG are displayed as images in the browser if the images are delivered from a backblaze.com B2 bucket.

    AVIF are not recognised as images by the browser. Instead, the browser will offer to download the AVIF file.

    This has been tested with the latest versions of the following browsers:

    • Microsoft Edge
    • Google Chrome
    • Apple Safari
    • Firefox

    Whether the AVIF images are served directly from the Backblaze.com B2 bucket or using a CNAME record on Cloudflare.com, it is not possible to view AVIF as images in the browser. Downloading is the only option.

    Table of contents

    Backblaze support not helpful:

    I would like to clarify that we in Support cannot assist with adding code to B2 Cloud Storage, or troubleshooting code, as it is outside the scope of our support.
     
    However, we’ll be forwarding everything you’ve sent to the rest of the Backblaze teams in the feature request. We can’t guarantee any timeframes regarding the request, though, but it will be looked at.

    Need some code in the B2 bucket

    According to this Reddit post from 2023, all you need to do is enter code into the B2 bucket and AVIF images will work.

    The challenge is that Backblaze.com B2 cloud storage support is not helpful with such code.

    Read the 2023 Reddit post here:

    Missing og wrong MIME type

    The problem may be related to a missing or incorrect ‘MIME’ type. As a result, AVIF images are not correctly identified by the system.

    "Content-Type": "b2/x-auto"

    and or 

    "Content-Type": "image/avif"

    AVIF to be the standard for online images from August 2024

    In most cases, images in AVIF format are smaller than the same image in WEBP, JPG/JPEG and PNG formats of the same size and quality. This means that the site loads faster. This can lead to better results when the website is tested with Google Lighthouse and similar services. The result may be that:

    • The customer and user of the website get a better experience of the website because the website loads faster on the customer’s and user’s device.
    • Better placement in Google organic search results based on SEO and Google “Structured Data“
    • Better placement in Microsoft Bing and other search engines’ organic SEO-based search results
    • Potentially better Google Ads placement at a lower cost because you have better Google Ad Rank

    Why AVIF image are important for publishing

    AVIF image format is almost always a better format than WEBP, JPG/JPEG and PNG because:

    A.
    All major browsers support AVIF since February 2024.

    B.
    Google “Structured Data” supports AVIF:

    https://developers.google.com/search/docs/appearance/google-images

    C.
    Adobe Lightroom Classic and Adobe Camera Raw support AVIF.

    D.
    Cloudflare.com supports AVIF.

    F.
    WordPress supports AVIF.

    G.

    Friday, August 30, 2024

    Google Search Central Blog

    “Supporting AVIF in Google Search“

    Supporting AVIF in Google Search  |  Google Search Central Blog  |  Google for Developers

    This is why AVIF is a better image format

    To get the best placement in Google.com search and the best placement in Google Ads, getting good results in the Google Light House testing tool is one of the most important tools in your toolbox.
    Google Light House tests all aspects of your website to give you feedback on how to improve the user experience.

    AVIF image load faster

    One of the most important elements of Google Light House is how fast your website and web pages load. The fact that the site loads quickly means that the photos, drawings, and other images on the site are optimized for both quality and size.
    The file format that is best in almost all cases and gives the best results is AVIF image.
    AVIF is supported by all major browsers. As of August 2024, all major Google features will also support the AVIF image file format.

    The bottom line is that if you want the best possible results on Google Light House, you should use AVIF image as your file format in most cases.

    AVIF image support in Backblaze B2

    If you look at the references and resources for this article, you’ll find good documentation on why AVIF is the current file format.
    The challenge is that the Backblaze B2 service does not currently support the AVIF image format.
    In order for WordPress websites to load quickly, you should use a CDN – Content Delivery Network.
    The combination of Backblaze.com B2 cloud storage and Cloudflare.com is one of the best CDN solutions. Today, Backblaze B2 supports image formats like JPEG/JPG and WEBP. These are yesterday’s image formats that often give poorer results and lower scores in the Google Lighthouse test. The current file format that should be used whether you work with WordPress or other CMS – Content Management Systems – is AVIF image.

    AVIF image requires extra code in the B2 bucket

    It is possible to add code to the Backblaze B2 setup to make B2 support AVIF. This code and the procedure to install the code is not available through Backblaze support.

    References and resources