Easy Ways to Use Staticaly
CDN on Blogger Images with Javascript - Having previously learned that we can
use Staticaly CDN to improve image acceleration. Now I will share how to easily
use Staticaly CDN on images using javascript.
Why should we try Staticaly
CDN for image acceleration?
Staticaly CDN for images or Staticaly Imgpx is an image
acceleration and modification service for sites that use it. The converted
image is automatically cached and presented from the Staticaly CDN. Images can
be cropped, resized and filtered using a simple API that is controlled by the
GET query argument. When images are delivered with Staticaly Imgpx, images are
delivered very quickly throughout the world.
What made "MUST"
try Staticaly Imgpx is that the Staticaly
Imgpx service now offers unlimited support for WebP image formats . This
feature provides a size reduction of up to 34% for the images presented
compared to JPEGs of an equivalent visual quality level. One thing to remember,
WebP is currently not supported by all browsers, one of them is the Firefox
browser.
Although WebP is not yet
supported on all browsers, there is no need to hesitate to use Staticaly Imgpx.
The trick in presenting the universal WebP format is to automatically detect
which browser supports it, this service is able to detect and serve the best
image format for each browser request.
This project has been
supported by world-class big companies and other large companies in Indonesia,
and will continue to develop the platform in a better and more rapid scope.
To easily use the Staticaly
Imgpx service to source all image CDNs , we can use javascript help. So that we
do not need to edit all images, this javascript will change the URL protocol of
all images to
Save the following javascript code above the </body> code
<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.staticaly.com/img/");
};
//]]>
</script>
Now please inspect all
images to see the URL.
However, this javascript cannot
change the URL of the image displayed using other javascript like the image in
a related post from DTE. The fix must be changed directly to the JavaScript. I
will explain it in the next post.
Javascript above is not only
for Blogger, but can also be used on Wordpress and others.
Good luck and hopefully
useful.