How to properly Format and Compress large images on my blog to speedup load time?


#1

My homepage has got very low speed score because of the large number of images shown. I have reduced the number of posts on homepage to 2 (which helps a lot), but still the homepage loads slow. This is mostly because of the large number of labelled posts (which I’m not willing to remove or reduce). I need a script which will compress the images before delivering it to my homepage. The current process is-

HD picture in original post ->>> HD picture downloaded by browser ->>> Then browser resizes the picture when displaying it in homepage.

This means that a large picture is downloaded and a small resized picture is shown. I want a script which compresses the images before delivering it to the client’s browser. Pagespeed insight suggests that it will save me nearly 500kBs

Take a look here -

Chrome dev tools can be used to see the downloaded (natural size) and size of resized image.

This is a screenshot of chrome dev tools output for an image of my blog

The third screenshot is from my website, see how a 1030x770 pixels image is downloaded and only 200x148 pixels image is shown. I have made some changes to my blog since this image was taken but most of the current images in my homepage have the same problem. It’d be great if some expert were to answer.

PS: Take a look at my blog here

Also, the template I’m using has been heavily modified by me, and I would modify it even further if you can provide any suggestions that will increase speed.


#2

I think there is no solution of compressing images in blogger platform so you’ll be migrated to wordpress if you want this feature :smile:


#3

Use online tool to compress image :smiley:

Or use Photoshop :smiley:


#4

Hello @Shashwat_Chaudhary

First of all I would really like to tell tell you that your blog is really awesome. I’ll suggest you to change you template slightly and take a litle much of dark kind of theme. As hackers and specially Kali Linux hackers will relly love it and then you can have more fan following and followers. :smile:

Now comming to you query. I searched google and asked my other bloggers friends also that is there any way to reduce the size of a picture in a realtime interface (any online script which will automatically do your work), but sorry I could found out nothing more than picture resizing scripts and online picture compressing. I found out few resources on the net which according to me can help you.

So just take a look at them, as follows:-

How to Resize All Images Automatically in Blogger.

You can simply do that by adding this style to your stylesheet

.post-body img {
width: 100%!important;
height: auto!important;
margin:5px; }

Shrink Pictures

If you wanna go with mannually shrinking the images or if anytime in future you want to compress any image and don’t have any software like Photoshop, you can visit this website and can shrink your images for free. HERE

To resize your images it is as simple as 1, 2, 3, 4, 5!

  1. Browse your computer and select your image/photo to resize
  2. Select the new size for your picture - use a preset or choose a custom size
  3. Optionally, add an effect to your image
  4. Select output image/picture quality Lower quality means a smaller file
  5. Click “Resize” and wait for the processed images to be displayed

How to Massively Reduce Your Images for a Faster WordPress Site

Now as @Mr_Raja said

If you ever wanted to switch to wordpress. You can read this post on wpmudev HERE .This one was really well detailed post and will actually help you out of your problem, IF YOU ARE ON WORDPRESS.

So for any futher help you can send me private message or just drop me a line at naman@outlook.in

Like this if you find it helpfull ! :smiley:


#5

Thanks for the detailed reply. It was quite helpful. While the compression problem isn’t really solved, your opinion helped fortify my own conclusion, there is no way to dynamically compress and deliver those images to homepage (in blogger at least). Now, I will still wait for @Mohammad to give the task a try and see if there is anything that can be done (he is more resourceful than us and it might be possible that he finds something that we could not).

Also, I’m looking a the wordpress post right now, and will try to see if I am capable of making a script which works as the equivalent of the wordpress plugin smushit that is mentoned in the post (I have only recently started to delve in javascript and am unsure if I’m capable of doing anything of that sort yet, but after my board exams and JEEs are over, I would give it a shot).


#6

Yeah, I too agree that @Mohammad is seriously a well resourced person and might be he can actually help you. Best of luck for your JEE exam. Hope you’ll get into IIT.


#7

I must say you asked quite a useful question which I was waiting to answer.

What Demotivates Developers From sharing scripts

In 2011 my best buddy Aneesh Joseph of blogger plugins shared his script of JSON API that sent a pull request to blogger FEED for retrieving items such as

  1. Post title
  2. Description Snippet
  3. Comment Count
  4. Image Thumbnail
  5. Date and Time

This is the five basic requests you can sent to Blogger JSON API to retrieve objects from the Feed RSS XML file. And this is the same script which is used by Cheap developers on themeforest and all those template sharing sites to create fancy magazine templates without giving any credits to the script developer Aneesh and sadly this bad practice of script violation is on its peak everywhere and this is one reason why we also stopped sharing scripts on MBT because no credit is given to the actual developer.

Why your Blog Loads slow with a PageSpeed score 59?

Now coming back to your question. Your homepage shows around 35 thumbnail image requests alone without including the avatar images on your Google+ and Facebook widgets. This is why your score for Desktop view is 59 and for mobile it is even low i.e. 50. All these requests are made using a JSON call which fetches the image URLs from the FEED XML file. The jSON call is surely a time-delaying method because it involves several http requests and looping through several xml entries. So it is quite obvious that your load time would be quite slow.

You can not significantly reduce the load time even if you try Image Compression technique or Auto Sizing the images. You need a new method that is widely practiced every where today especially on Wordpress sites and it is called the Lazy Load plugin which can easily be installed on blogger and I will write a tutorial on it as soon as I get time.

Reducing Load Time on sites using the JSON API

I strongly recommend that you install the following lazy load script on your blog

This plugin surely delays loading of images in long web pages such as yours. Images outside of viewport or browser view are not loaded until user scrolls down. As a result instead of loading 35 images it once, your blog will load just 5 images that appear above the fold. :alarm_clock:

Which means a dramatic change in load time!

This is the same plugin we are using on MBT to load images as user scrolls down. I have applied this script to all thumbnail images on homepage, footer and also the related posts that appear below posts.

Visit mbt homepage to see it in effect. This script improved our page speed score by 10 units. MBT now scores 71 on desktop and 61 on mobile.

This is the most sincere advice and most recommended one I could give. :innocent:


#8

Add this script before the </head> tags in blogger HTML Editor:

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/*
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2009 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.5.0
 *
 */
(function($) {

    $.fn.lazyload = function(options) {
        var settings = {
            threshold    : 0,
            failurelimit : 0,
            event        : "scroll",
            effect       : "show",
            container    : window
        };
                
        if(options) {
            $.extend(settings, options);
        }

        /* Fire one scroll event per scroll. Not one scroll event per image. */
        var elements = this;
        if ("scroll" == settings.event) {
            $(settings.container).bind("scroll", function(event) {
                
                var counter = 0;
                elements.each(function() {
                    if ($.abovethetop(this, settings) ||
                        $.leftofbegin(this, settings)) {
                            /* Nothing. */
                    } else if (!$.belowthefold(this, settings) &&
                        !$.rightoffold(this, settings)) {
                            $(this).trigger("appear");
                    } else {
                        if (counter++ > settings.failurelimit) {
                            return false;
                        }
                    }
                });
                /* Remove image from array so it is not looped next time. */
                var temp = $.grep(elements, function(element) {
                    return !element.loaded;
                });
                elements = $(temp);
            });
        }
        
        this.each(function() {
            var self = this;
            
            /* Save original only if it is not defined in HTML. */
            if (undefined == $(self).attr("original")) {
                $(self).attr("original", $(self).attr("src"));     
            }

            if ("scroll" != settings.event || 
                    undefined == $(self).attr("src") || 
                    settings.placeholder == $(self).attr("src") || 
                    ($.abovethetop(self, settings) ||
                     $.leftofbegin(self, settings) || 
                     $.belowthefold(self, settings) || 
                     $.rightoffold(self, settings) )) {
                        
                if (settings.placeholder) {
                    $(self).attr("src", settings.placeholder);      
                } else {
                    $(self).removeAttr("src");
                }
                self.loaded = false;
            } else {
                self.loaded = true;
            }
            
            /* When appear is triggered load original image. */
            $(self).one("appear", function() {
                if (!this.loaded) {
                    $("<img />")
                        .bind("load", function() {
                            $(self)
                                .hide()
                                .attr("src", $(self).attr("original"))
                                [settings.effect](settings.effectspeed);
                            self.loaded = true;
                        })
                        .attr("src", $(self).attr("original"));
                };
            });

            /* When wanted event is triggered load original image */
            /* by triggering appear.                              */
            if ("scroll" != settings.event) {
                $(self).bind(settings.event, function(event) {
                    if (!self.loaded) {
                        $(self).trigger("appear");
                    }
                });
            }
        });
        
        /* Force initial check if images should appear. */
        $(settings.container).trigger(settings.event);
        
        return this;

    };

    /* Convenience methods in jQuery namespace.           */
    /* Use as  $.belowthefold(element, {threshold : 100, container : window}) */

    $.belowthefold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).height() + $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top + $(settings.container).height();
        }
        return fold <= $(element).offset().top - settings.threshold;
    };
    
    $.rightoffold = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).width() + $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left + $(settings.container).width();
        }
        return fold <= $(element).offset().left - settings.threshold;
    };
        
    $.abovethetop = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollTop();
        } else {
            var fold = $(settings.container).offset().top;
        }
        return fold >= $(element).offset().top + settings.threshold  + $(element).height();
    };
    
    $.leftofbegin = function(element, settings) {
        if (settings.container === undefined || settings.container === window) {
            var fold = $(window).scrollLeft();
        } else {
            var fold = $(settings.container).offset().left;
        }
        return fold >= $(element).offset().left + settings.threshold + $(element).width();
    };
    /* Custom selectors for your convenience.   */
    /* Use as $("img:below-the-fold").something() */

    $.extend($.expr[':'], {
        "below-the-fold" : "$.belowthefold(a, {threshold : 0, container: window})",
        "above-the-fold" : "!$.belowthefold(a, {threshold : 0, container: window})",
        "right-of-fold"  : "$.rightoffold(a, {threshold : 0, container: window})",
        "left-of-fold"   : "!$.rightoffold(a, {threshold : 0, container: window})"
    });
    
})(jQuery);

//]]>
</script>

<script charset='utf-8' type='text/javascript'>

$(function() {

   $(&quot;img&quot;).lazyload({placeholder : &quot;http://4.bp.blogspot.com/-wRaPvE0Jqrs/USIW4erewNI/AAAAAAAAFNk/TXDOtgYUGlc/s1600/grey.gif&quot;,threshold : 200});

});

</script>

I’ve tried it today and got 74 page speed that was previously 70 before applying this. :frowning:

Note: If anyone has jquery script added in the site than remove this line from the above script:

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/>

#9

Thanks for the replies. I have done work to do tomorrow. Hopefully I’ll end tomorrow by making a post here saying the site speed score is >70.

Used the lazy load script. PageSpeed score is now 72 for Desktop and 61 for Mobile. :smile: