How to optimize blog images with a CDN Statically

Optimized your images with CDN Statically

Images on a website or blog certainly play an important role as illustrations and clarify the intent of the contents of the article itself. Especially if the article needs a lot of image support

Even though images play an important role, they can be a factor in decreasing site performance and speed performance if they are not optimized properly.

Because of that, image optimization is needed so that speed, user experience and site performance continue to work well.

How to Optimize Blog Images

In optimizing images there are many ways you can do it, starting from choosing the best image file format, compression, responsive images and taking advantage of free CDN services.

In this article, we will share how to optimize blog images by utilizing free Content Delivery Network (CDN) services using CDN Statically.

Blog Image Optimization Steps Using CDN Statically

To use the Image Statically CDN we simply change the image URL to point to the Statically content network.

Examples such as the following Blogger Images URL :

https:// blogger.googleusercontent.com/img/.../your-image.png

https:// www.yourdomain.com/wp-content/uploads/.../your-image.jpeg

https://cdn.statically.io/img/blogger.googleusercontent.com/img/.../image.png

https://cdn.statically.io/img/www.yourdomain.com/wp-content/uploads/.../your-image.jpeg

The practice above can certainly be tiring if you have to change all image URLs on your blog manually.

To make it easier and faster to optimize images with CDN Statically, you can use JavaScript or the available plugins.

Automatic Blog Image Optimization With CDN Statically

For Blogger users , of course, it's not possible to use statically plugins, because implementing it using JavaScript is an easy practice.

Following are the steps to changing all blogger image URLs using CDN Statically using javascript 

• Login to blogger > Tema>Edit HTML
• Copy the following code and paste it just above the tag </body>

var images = document.getElementsByTagName('img');

  for (var i = 0; i < images.length; i++) {

  images[i].src = images[i].src.replace(/(http|https):\/\//, 'https://cdn.statically.io/img/') + '?f=webp';

};