Be lazy when loading your images!
I always say that I’m going to do posts about simple web developing things so that you can learn and be aware of the new stuff but I never do. the fact is that the technology, specially the web developing world changes really fast and it is almost impossible for me to keep up with everything and write about it as often as I would like.
The other day, my dear business partner showed me an incredible food blog (she’s the one who got me into baking) and besides it having a gorgeous design, it loaded extremely fast despite it having really big, high quality pictures.
I immediately did what I always do and decided to check out the source code to see if I could find out how her images had that nice fade in effect. Enter the jQuery Lazy Load plugin!
When you have a web page, all the images load at the same time when you open it. If you have big images, high quality ones or just images that have big file sizes, then the loading time can take a loooong while. Most of the users don’t like that and they will say that your website is too slow and things like that, that you sure don’t want to hear and might not know how to fix without compromising the quality of your images or your beautiful blog design.
I did a little diagram to explain how this little piece of code works.

As I said before, usually the web page will load every single image that it can find, even if you can’t really see it at first glance. In reality, when you open a website you can only see whatever it fits inside your browser window. This area of visibility is called a view port.
The jQuery Lazy Load plugin only loads the images that are localized inside this view port and as you are scrolling down, it loads the rest. It has some cool effects like fade-ins and things like that. I love how images just appear as I scroll down and it is very smooth about it.
I’ve been using this plugin for at least 2 weeks now and I don’t regret doing it. My website is much faster and I can take care of taking better quality pictures without compromising my reader’s time. I totally recommend this for blogs that are very image heavy.
Ok, I’m sold. How do I install it?
For self-hosted WordPress blogs, the only thing you have to do is install the jQuery lazy load plugin from your dashboard and activate it. I should note that if you have a LightBox plugin installed, it will not work.
For Blogger, the process is a little bit trickier since you have to edit your template file. Simply go to the Template tab on your dashboard, then click Edit HTML, say continue to the warning. Now, using Ctrl (Command) + F search for “</head>”. Above that paste this code:
<script charset='utf-8' src='http://ajax.googleapis.
<script src='https://sites.google.com/
<script charset='utf-8' type='text/javascript'>
$(function() {
$("img").lazyload({
});
</script>
Click save and you will be done. This code was found here.
If you try it, please let me know how it worked out for you and also tell me if you would like more posts like this one.
Kisses!




Bokeh!













