How To Serve Responsive Images On Your Site?

How To Serve Responsive Images On Your Site?

Responsive Web Design (RWD) has now become one of the the most important web design techniques nowadays, and it provide the cornerstone for modern mobile web development. Implementing a few RWD techniques to your blog can give it the edge it needed, nay deserved, to entice its mobile users to visit more often. So while we're on the subject of implementing RWD techniques, let's talk a bit about serving truly responsive images, because there are a couple issues every webmaster faces when dealing with images, responsively speaking.

Usually, Responsive Web Design has to with fluid images, i.e. images that resize themselves depending upon the users' screen size and resolution. They work fine for desktops and tablets, but the biggest problem with fluid images is, no matter what client the user has, the same image size will be sent to them. The user agent then resizes the image according to the specifications at hand. This can be a problem for mobile data connections, and can reduce load time on a mobile. You can, however, use a number of techniques to serve images of different sizes to user agents.

Picture Element in HTML 5

The <picture> element is set to become a standard for responsive images in HTML 5, and it will allow us to use multiple sources for a single image while deciding the source will be done depending on the screen size. The markup looks as follows;

<picture id="my_images">
   <source media="(min-width: 50em)" srcset="large1.jpg 1x, large2.jpg 2x">
   <source media="(min-width: 20em)" srcset="medium1.jpg 1x, medium2.jpg 2x">    
</picture>

Since HTML 5 hasn't been fully finalized, this element is still being proposed, and is in the testing phase. So it can't be used yet. You can, however, use a JavaScript library called Picture Fill to achieve the same effect. It makes use of span tags, and its markup looks something like this;

<span data-picture data-alt="Some ALT text">
        <span data-src="small.jpg"></span>
        <span data-src="medium.jpg" data-media="(min-width: 500px)"></span>
</span>

WordPress Plugins

If you have a WordPress website, then you're in luck, because there are various plugins you can use to do the job for you.

• Picture Fill WP
• Simple Responsive Image
• WP Responsive Image

PHP Scripts

If you somewhat know your way around PHP, then you can use a custom third-party PHP script to deliver resized images to the user depending upon the users' screen size and resolution. This is by far one of the most stable ways to do the job, and is definitely better than using JavaScript to detect user agent, and render image accordingly.

One such script is the Adaptive Image. Adaptive Image is a small PHP script that detects user screen size and deliver the proper image for that screen size. It does not require the changing of your current <img> markup, but the implementation is rather intimidating for less tech-savvy users.

We'll cover the implementation of these PHP scripts in another post. But for now, you can try the other alternatives, and tell us about your experience with these simple, yet effective responsive web design techniques. Cheers :)