7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.6 Other Solutions

The solution we used in the last couple of lessons is probably the best one since it’s semantic and the elements are part of the official specification.

However, there are a few solutions that address the problem of responsive images from a different angle. Let’s see what those are.

Related Links

3.6 Other Solutions

The solution we used in the past couple lessons is probably the closest one to our ideal solution so far, because it has very simple markup. It's easy to use and even though it's supported in very few browsers, this will change in the near future plus there is a polyfill available. However, there are a few solutions that address the problem of responsive images from a different angle. The first one is called HiSRC. This is a jQuery plugin that allows you to load three versions of an image, depending on the network speed and retina readiness. Basically, you specify a low, medium and a high resolution image source and the script will pick the right one for you. To use it, you first need to download the script and reference that in your document along with jQuery, then add your images using simple img tags. And for the source, specify the smallest or lowest quality image. Then using some custom data attributes, like data-1x and data-2x, specify the sources for the medium and high-quality images. Finally, you need to initialize hisrc with a simple function call. Reference the images you used via jQuery and then call the highest RC function. You can either call this on all images, which is not recommended or use a simple class and target those images specifically. Once you do this, the browser will load the first image. The one with the SRC attribute, then the browser checks if you're on a mobile data plan or a mobile connection, then it's gonna keep that image. Otherwise, if it detects a fast connection, it will download the 1x image. If you have a retina screen and a fast connection, it will download the 2x image. Now this solution also addresses the arc direction problem, because there is basically, nothing stopping you from loading a crop of the image in the SRC and that will always be loaded on mobile devices and that's how it works. It's a pretty simple solution, but it still has a few problems. First of all the small image is always loaded and sometimes, it's replaced by a higher quality image. So, it's a double download, but that only happens on fast connections. So, you know, it's not that bad. Second, it depends on jQuery and third there's some extra markup involved. Ultimately, it's up to you. Now this next solution does things a bit differently and it's actually more user friendly. It's called resrc.it or resrc.it. This is a third party solution that will get an image URL, you provide use an app on their own servers and then deliver an image that's suited for you. So, all that resizing, cropping, optimizing is done on the resource servers. Apart from these three operations, you can also apply effects to an image, like gray-scale and sharpen and you can also rotate or flip an image. This is pretty cool and it will definitely benefit the less tech savvy people that just want to optimize their website, their images and are looking for a very simple solution. Simple as it may be, this is after all a paid software. There is a 30 day trial and all of that stuff. But ultimately, you will have to pay and depending on how image heavy your website is and how many visitors you have, you could end up paying a lot of money. But in the end, if this optimization gets you more clients and you make more money, then it might be worth it. It's again, up to you. Another drawback is the dependency on a third party or resource. So, if for example, their servers were to go down for some reason, you could end up with a website with no images and, you know, that’s not really good. So, all in all, after all, this is a very good solution, so I encourage you to go to their website and learn more about what it can do. A similar solution comes from responsive.io. Same story. You link to your images and their app will return resized or cropped versions that match your device. Definitely worth considering. Finally, there's another solution. And I actually left this for last, because it is the most complicated of these four. It is called adaptive images and it is mostly a server side solution. The way it works is pretty simple. When the server gets a request for an image, it will look at the screen size and depending on your media query break points, it will rescale the image accordingly and send it to you. So you're not working locally here, you're not picking an image from predetermined list. Everything happens on the server. That's probably an added benefit, because the markup is really simple. The drawback is that you have to install a couple of things, like you have to copy an HT access file along with another PHP file to your website's redirectory and also you need a server that runs Apache2 and PHP5 Plus. The upside this, as I was saying is the markup. You don't need any unnecessary markup, you just use a simple img tag and you're all set. Plus, an added benefit is the fact that you don't need any additional JavaScript libraries. The downside is you have to point to images that are on your server. It won't work with images from any other source, because the actual work is done on your server. Another problem is the art direction issue, because images using the script are only rescaled. They can't be cropped. So you're stuck with basically the same image. I won't go into much detail on how to install this. If you go to adaptive-images.com, you'll find all the information you need to get started and also a more in depth explanation of how the entire thing works. And that's basically it for alternative solutions. There are few more out there, but I think these four are the most important. Now, in the final lesson of this course, I'd like to share some thoughts on performance. So, I'll see you there.

Back to the top