Responsive Images

Hello fellow readers,

As a programmer we are constantly tasked with many different problems to solve. Most of the time, a lot of these problems are quite similar. So in my opinion the best practice when tackling any problem is making sure that the solution is always as dynamic as possible. This way, it can be easily/quickly modified to become the solution for other problems. You will find that the next few blogs posted by me will be about different types of scripts I have been working on to be able to do what I have stated.

One of the main things now about websites is that they are just as much visited by people on phones and tablets as they are seen on a desktop screen. What this means is that the website needs to be visually appealing in pretty much any size, in other words “responsive”. One of the issues that arises with making a site that functions and loads quickly on all devices is the size of the files. The type of file I'm going to focus on in this blog in particular is images.

Take for example the background image on a desktop screen, in order for it to stretch across its entirety it needs to be of certain dimensions. The thing is, in order for it to stretch across a tablets screen, the dimensions of the image can be far less. The less an image is in dimension, the less it will be in overall file size. More so when you get to mobile - you might not even want this image to be loaded at all.

Now of course there are a few options for doing this for a site. One could be that you create your image tag and give it the source to your photo and then use CSS to shrink it for tablet and hide it on mobile. The issue with this is that you are still loading the full sized image on all devices, meaning long load times for tablet and mobile. Another option would be to pull in an image with PC dimensions or one with tablet dimensions using the “background” CSS style and looking at the screen size with a media query.

That could work if you knew every image that was going to be on the site - but what if you’ve allowed the user the ability to upload their own photos for the background, or where ever else. Well this is where the script I have been developing comes to good use I think. The first thing to do would be to include the script file where ever you plan on using it (you will be provided a link to the script at the end of this blog). Once included you need to specify the screen size for PC and tablet.

Example: $.ImageCall(860, 500);

“ImageCall” is the name of the function that will begin loading in your images. The “860” tells the function that if the window size is greater than 860 to load in the large version of the image. The 500 tells it that if the window is greater than 500 and less than or equal to 860 to load in the medium sized image. Of course if it is less than or equal to 500 to load in the small image.

For it to know which images you want the script to actually be in charge of populating all you have to do is set up your “img” tag as follows:

Example: <img src="" name="social_google.png" data_location="images/">

So you would leave the “src” blank so that images won't be initially loaded until the script decides which size best suites the window to make sure you are getting the smallest file required. The “name” tag will specify the name of the image saved on the server so the script will know what file it is looking for. The “date_location” tag tells the script what directory to look in for the image.

The other thing that would have to be setup for this script to work is that inside the “images” folder you have three other folders; one named “large”, one named “medium” and one named “small”. You would store your differently sized images accordingly.

Another option that is provided with this script is when it should not try to load in an image. For example: if you had a background image that would display on PC and tablet, but you don't want it loaded in on mobile so as to decrease load time, you’d type the following.

Example: <img src="" name="social_google.png" data_location="images/" class=”no_mobile”>

The class of “no_mobile” will tell the script that there is no image to be loaded in for a user viewing the site on a mobile device. Also if you wish it not to load in an image for tablet you set the class as “no_tablet” and for PC the class would be “no_large”.

I hope you found this blog as well as the script helpful, any feed back and thoughts would also be much appreciated!

Best Regards,
Jason Mackey (a.k.a Ifking)

url: http://www.marketingblendz.com/examples/image_call.1.4.js