Image Optimization In Blogger Using CDN Statically To Speed ​​Up Your Blog Loading

Image Optimization In Blogger Using CDN Statically To Speed ​​Up Your Blog Loading

In this article, we are going to talk about how to speed up blog loading speed by using CDN Statically in blogger.
After reading the post title you have some questions about what is statically.io, CDN & Image Optimization, so Let's remove your doubt and make it clear.

What is CDN & Statically.to?

A content delivery network (CDN) refers to a geographically distributed group of servers that work together to provide fast delivery of Internet content.
A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. The popularity of CDN services continues to grow, and today the majority of web traffic is served through CDNs, including traffic from major sites like Facebook, Netflix, and Amazon
Statically offers optimization and CDN for open-source static assets.

What is Image Optimization?

I don't go into brief details about Image Optimization, but in simple words, Image Optimization means to image your images/Photos quality which you use in your blogger's blog posts.

Let's give you a short idea of optimization is that,
compress image size, Remove meta information from images, Maintain aspect ratio of images, Use a proper naming convention for image name (Like using hyphen sign for instead of space and giving post related image name, etc), Image alt text in images, etc.

We don't discuss the above topics right now, for that I will make a separate post, but here we are going to see about CDN statically which is very useful for speed up your blog's loading by doing image optimization.

For bloggers who are always busy with tutorial posts, How-to posts, tech-guide posts, they always feel uncomfortable with the screenshot image inserted in their post which is too heavy to load their blog also other heavy images.
But now you don't need to worry about high-size images, now you can optimize them with the help of CDN Statically.
With CDN Statically, images that should be very heavy to load on a blog, now they load very quickly without using any applications.

How to apply this method on a blog?

The method is very easy, if you upload an image via blogger, usually you will get an image URL that is more or less like the following.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9VXLyRZw7kqPRCQCL-HrHsez764KIIlhi4UOVAsMiznW9CjUOltR10oWsM2powIse4DKGmkfK4E6EQIPGsYHIjZddavYdgvqfozUsguX3MU2KlDw-VELx0C4Cvy-u67ztjfoU85d6q1_/s1600/cdn-staticaly.png

You just change https:// with https://cdn.staticaly.io/img/ so it becomes like the following.

https://cdn.staticaly.io/img/2.bp.blogspot.com/-pB5sVdkn88o/W6rkzskMGYI/AAAAAAAAEC8/sGWln4I5jhc1GL-p1JXYXus-hc8xUVIZwCLcBGAs/s1600/cdn-staticaly.png

The above method is manually so you have to change the image URL in every post's images.
But I have an automatic method for making your work easy by using javascript.
Implementing below javascript code just above the code </body>

<script>
  //<![CDATA[
  var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    images[i].src = images[i].src.replace(/.*?:\/\//g ,
    "https://cdn.statically.io/img/");
  };
  //]]>
</script>

By using the above script, it will make all images on the blog statically automatically. so, choose any method whether you want to use the manual or automatic method.