This week Google announced that it now supports the AVIF file format, making the format eligible to be shown in Google Search and Google Images. Now that the search engine can index and display the popular file format, it will likely become the standard for lightweight high-quality images online quickly.
What Is The AVIF File Format?
AVIF (AVI Image File Format) is a relatively new open-source file format used for images, that can deliver the same quality images as JPEGs or PNGs in remarkably smaller file formats (up to 50% smaller than a comparable JPEG).
Notably, the format seems to combine all the most notable features of other popular image formats. AVIF supports the use of transparency like PNG and even has a higher dynamic range level, allowing for deeper blacks in images. Like GIFs, also allows for the creation of animated images.
What About WebP?
Another newly popular image file format, WebP, might seem like a competitor to AVIF but both formats offer their unique benefits which make them suited for specific needs.
WebP is an ideal format for lossless images – typically used when an image must be of the absolute highest quality possible. On the other hand, WebP is not nearly as small as AVIF, so it is not ideal for those focused on maintaining fast loading speeds.
Why The AVIF File Format May Help SEO
Over the last few years, Google has increasingly emphasized website speed as a major factor it considers when ranking websites.
The search engine has begun using a selection of metrics that measure different aspects of site speed, known as Core Web Vitals.
Because the AVIF file format allows for smaller image sizes, it can help reduce loading speeds on web pages and potentially improve your online rankings.
In an environment where any edge against the competition can be the difference to help you get the top spot, sites will quickly be moving to adopt the format now that Google supports it.
https://www.tulsamarketingonline.com/wp-content/uploads/2024/08/Google-Images.png4201200Taylor Ballhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTaylor Ball2024-08-30 19:59:072024-08-30 19:59:09Google Now Supports The AVIF File Format Making It The Best Format For SEO
With internet speeds constantly increasing, smartphones becoming the primary way to get online, and people’s attention spans getting shorter than ever, it is absolutely crucial that your website loads quickly. Visitors will not hesitate to click the ‘back’ button and Google has slowly made loading times one of the most important ranking signals it uses.
At the same time, users have come to expect stylish, high-quality images from any website they visit. They don’t just want to find the best information. They want the best information in the most enjoyable package.
This creates a catch-22 for website owners. Users want to see a page filled with great images, but they don’t want to wait for it. Unfortunately, these high-quality pictures have the tendency to slow down how quickly websites load.
Thankfully, there are ways to mediate this by optimizing your images to make loading your web pages as efficient and quick as possible – as Alan Kent, Google Developer Advocate, shares in a recent video:
The video gets pretty in-depth at times and leans into technical details, so we will try to collect the most important tips and info below:
Google’s 6 Tips For Optimizing Online Images
1. Eliminate Image Cumulative Layout Shift (CLS)
Don’t let the jargony name intimidate you. You have no doubt encountered CLS before, and it probably frustrated you.
CLS is where text or images move as each individual component loads. Because of this, you might have text which refuses to stay in place as you try to read it, have new images popping into place where a link was visible seconds before, or potentially open an entirely different page because a link appeared right where you were trying to swipe.
Though this issue can affect any type of content on a webpage, images are frequently a leading culprit because of the amount of space they fill on a page.
2. Keep Your Images Only As Large As Needed
It can be tempting to upload images in the largest size possible, to guarantee every little detail will be included without pixelation or artifacting. Some web designers see this as “future-proofing” their site or ensuring the best quality no matter how large an image is shown.
The problem is that this can be overkill. Even when rendering an image for smaller resolutions, browsers have to download the original image and compress it to render correctly. This slows things down, as larger images take a longer time to be downloaded and rendered in the proper size for the display it is being shown on.
The complication is that displays can range wildly in size and resolution – from tiny smartphones to gigantic monitors. That makes it hard to identify exactly when an image becomes “too large.”
The easiest way to find this out is by checking out the Opportunities section in the PageSpeed Insights report, under ‘properly sized images’. Here you’ll see which images are larger than they need to be so you can replace them with more properly sized alternatives.
3. Use The Best Image Format
Which file format you choose to save your images in might seem like a minor choice, but it can have major effects on loading speeds. At the same time, choosing the right image format isn’t always as simple as choosing the one which outputs the smallest file.
While formats like JPEG or webP tend to deliver smaller file sizes from the same initial image, they do so by compressing the image. This compression subtly degrades the quality of the image to minimize file size.
On the other hand, larger file formats like PNG can preserve fine details to maintain the original quality of an image, though this results in larger files.
In many cases, your visitors may not notice the difference between a PNG or JPEG, making the smaller file the obvious choice. However, more complex images or very large images may look noticeably worse in small formats.
To identify images that may not be in the most efficient format for your site, check out the ‘serve images in next-gen formats’ section of the PageSpeed Insights report.
4. Compress Images Properly
While file formats have a big impact on how large your image files are, most formats allow you to dictate just how much compression occurs. If you’d like, you can prioritize preserving detail while receiving a slightly larger file, or you can prioritize getting the smallest file at the cost of the image quality.
To figure out what is best for your website, you can explore the ‘encode images efficiently’ section of the PageSpeed Insights report. Here, you’ll find details about images that may benefit from being compressed and how much this might shrink image files.
5. Cache Images In The Browser
Caching is a process browsers use where they temporarily store images or details from your website to s[eed up the loading process on related pages or if they return to your site.
If you do this, however, it is important for you to tell the browser how long it should keep these cached images This is done through an HTTP response header containing guidance on how to handle cached files and images.
If you’re unsure whether you’ve properly configured this header, you can also find details about this in the PageSpeed Insights report, within the ‘serve static assets with an efficient cache policy’ section.
6. Correctly Sequence Image Downloads
By default, web browsers wait to load details until they are absolutely needed. This is a practice called “lazy loading” that allows browsers to focus on the details you’re most likely to be focused on at the moment. This is not always the best process for loading larger files like images or videos, though.
To get around this, Google recommends establishing the sequencing order some parts of your site are downloaded and rendered by browsers.
Specifically, Google recommends using the following sequencing order:
“Hero Images” at the top of the page
Above the fold images
Images just below the fold
After this, Kent says most other images can be lazy-loaded without an issue.
Again, you’ll be able to find an assessment of how efficiently you are loading images on your website within the PageSpeed Insights report, under ‘defer offscreen images‘.
Facebook is changing how videos and photos appear on mobile devices, with new aspect ratios for visual posts and less accompanying text in the mobile news feed.
This means you’ll have to make some changes when optimizing for Facebook’s mobile news feed if you want everything to appear properly in your posts.
What’s Changing
In the past, images on Facebook were optimized for a taller 2:3 aspect ratio to a more square 4:5 aspect ratio.
Anything taller than that will be cropped out in preview images within the news feed, only actually viewable to those who tap to see the full image.
At the same time, the platform is reducing the lines of text accompanying these posts – going from 7 lines of text to just 3 lines.
Anything longer than that will be hidden behind a prompt to show additional text.
Both of these changes will be put into effect starting on August 19th, giving you a few weeks to make adjustments to your upcoming posts.
In turn, the company says the new post format will increase the impact of mobile ads and make it easier to use the same content across both Facebook and Instagram.
https://www.tulsamarketingonline.com/wp-content/uploads/2018/12/facebook-76536_640.png359640Taylor Ballhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTaylor Ball2019-07-23 17:53:332019-07-23 17:54:09Facebook Changes Image Sizes and Text Lengths in Mobile News Feeds
High quality images are one of the best ways to make a website look great, but they pose a problem. No matter how nice a website looks, if it takes too long to load, your audience won’t stick around to see it. Images are one of the biggest slow downs on a websites loading time, but there are ways to optimize your images so that they don’t kill your speed.
Gisele Muller found a few tools that help lessen your images’ load on your site. They all are mostly simple, like TinyPNG which uses smart lossy compression techniques to make your PNGs smaller without destroying the quality of the image. Most function by removing the unnecessary information included in every photo, such as color profiles or comments.
No matter what, if you want a gorgeous site, you are going to want to use quite a few images. If you want people to actually use your site, you will have to find ways to optimize those images so they don’t slow you down and hold you back.
https://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.png00TMOhttps://www.tulsamarketingonline.com/wp-content/uploads/2018/07/TMO-Logo.pngTMO2013-02-12 12:02:042013-02-12 12:02:04Tools For Optimizing Your Images For The Web