Docs | Support | Login

How to easily optimize and compress images for Google Web Stories

Dec 11, 2021 | , read

How-to-easily-optimize-and-compress-images-for-google-web-stories

Users expect to load a story within a fraction of seconds or less. If it takes more than 3 seconds to load, 40% of visitors tend to leave your story page.

The only way to fix this problem is to optimize the images. There are additional resources available that may assist you in increasing your loading speed.

But if you have already done, the rest then image optimization is the best solution to increase your page load speed. You can fix this, and it is easy to do that.

Unoptimized images are the image that restricts image to have a file size of no more than a specified ratio of the image size on the open web space.

You know what, the number one reason why your web story load so slowly are unoptimized images.

According to HTTP Archive, photos make up about 65 percent of the weight of a website. If you do not optimize your website images, your page may load slowly, which will give your visitors a negative impression of your site.

Image optimization is critical for e-commerce, blog, portfolio, travel, and media websites.

What does Image Optimization mean?

Image optimization is a technique for reducing the size of website photos without sacrificing their quality.

It entails delivering the highest-quality photographs in the correct dimension and format while limiting the image size to a minimum.

Benefits of image optimization

  1. Improves website load speed is one of the main advantages of image optimization.
  2. It is possible to preserve server memory and minimize server load.
  3. Increase the number of conversations.
  4. It will Improve the user experience on the site.
  5. Aids in the improvement of an SEO rating.

These benefits will make you understand why it is necessary to optimize your unoptimized images before uploading them on the open web.

Now let talk about how you can optimize and compress images for Google Web Stories. As you all know, web stories are an emerging trend followed on open web space by Google.

Many other platforms like Instagram, Facebook, Youtube are already using this feature, but Google Web Stories are offering is a little different and exciting.

These online stores do not live on Google; instead, they live on your website, just like a typical web page. As a result, it is your responsibility to ensure that all of your on-site consents load quickly.

One of the main drawbacks of image optimization and compression is that it appears to be a very complex subject.

If you Google the issue, you will discover a slew of long essays that make it seem like you will need to become a coder to do it.

But, do not worry, there is nothing like that you do not need to do anything.

Just follow the few tips of Image optimization and see the wonders right away.

  • Should not leave them on a resolution that captured.
  • Discard anything that is not visible on your story page.
  • Choose the suitable image file format that fits your story page.

Pro Tip: If your image is animated, replace it with a video!

Your source image is most likely a GIF if it is animated. GIF files are poor for everything you do on the internet.

So, for a far richer color palette and a much smaller file size, do yourself and your reader a favor and use a video for looping animations.

Continue with a follow-up query if your image is not animated.

Is it a photograph or a painting?

If it is a photo, JPEG or WebP are the best options.

PNG or WebP are the best possibilities if it is not a photo.

All current file formats, like.zip files, use some form of compression to make them smaller.

When you present a digital image of a wall painting, it is composed of pixels. Of course, you could record the color information for each pixel, but there is a good possibility that many of them are the same shade.As a result, saying that the following 15 pixels are all the same is much more efficient.

The basic principle of image compression is this. The actual compression method is far more advanced currently, and it has vastly improved over time.

Each one of today modern picture formats has its own set of benefits and disadvantages, and the more you learn, the better you understand.

But the formats I am going to talk about right now, WebP and AVIF, are two that you may not have heard of before.

WebP

A relatively new file format that is versatile and may use in several circumstances but is not suitable for all applications.

WebP is not even appropriate for other browsers.

AVIF

That is the latest cool kid on the block, and it is even more adaptable than a WebP. Support a wide range of scenarios and reduce photos to a fraction of their original size.

Chrome and Opera are the only browsers that support it right now.

You may wish to leave a portion of an image transparent on occasion. That can be overlaid on top of any other background if the background is transparent.

However, not all file formats offer this feature known as an alpha channel. JPEG does not, which is why it is solely helpful for photos. However, transparency is allowed by PNG, WebP, and AVIF.

To the rescue: Tools that may help you optimize images

If you are using a content management system (CMS) like WordPress or Drupal, there are plenty of free and commercial plugins that can automatically do this process. You never have to bother about it again.

Directly type image optimization followed by the name of your preferred CMS.

If that is not an option for you and You should manually optimize. There are plenty of high-quality free apps available.

TinyPNG, JPEG Optimizer, Optimizilla, Kraken.io, CompressNow, Compressor.io, and many more other image optimization tools are available out there for you to compress or optimize images.
These are free tools that you can use without buying a subscription.

There are Paid tools like EWWW Image Optimizer, Squoosh.app, Imagify, ImageRecycle, and more are also available for image optimization.

Conclusion:

It’s up to you guys, what you’re looking for, and your requirements. Make sure these optimization tools can fit in the chart of your necessity.

To ensure that your websites load quickly and deliver a better user experience, you should optimize your images. Although many image optimization programs are accessible, I tried to condense the list and provide you with the best of them.

Image optimization can help you improve your SEO and drive more traffic to your website.

Subscribe to our blogs

Related blogs

View all
Using-Scrims-for-Google-Web-Stories-in-makestories

Apr 7, 2023

Using Scrims for Google Web Stories

You know those moments when you have to squint your eyes to read text placed on an image or video?

Read
CTA-Link-vs-Tooltip-Link-on-Google-Web-Stories-makestories

Jan 6, 2023

CTA Link vs Tooltip Link on Google Web Stories

Social Media as a marketing tool is very limiting, brands have to engage in follower-increasing strategies to reach new users,

Read
How-to-add-a-Location-Tag-in-Google-Web-Stories

Dec 29, 2022

How to add a Location Tag in Google Web Stories

Did you know you can tag a location on Google Web Stories! Yes, if you are a product or a

Read