SharedTutor | Tutorials For Everyone

Find your interesting tutorials in Get your tutorial about Computer, Blogging, Makemoneyonline, Games, Design, and more!

5 Methods To Serve True Responsive Images

Ethan Marcott, the one who coined the definition of Responsive Web Design, stated in his article that Fluid Image is among the ingredients of Responsive Web Design. The problem with Fluid Image, however is always that eventhough the image seems to be responsive and can fit nicely in numerous viewport size, the same image dimension is downloaded from the users no matter the medium the style is being viewed on.

This is detrimental news for users who have a limited data plan but is not prepared, and yes it makes your website seem ‘slow’ in areas with dismal Internet speed connections.

This is probably the most discussed issues among web-developers. And there is a whole lot to do before RWD can be an appropriate end-solution for developing a mobile-optimized website. At the moment there are various emerging techniques and tools that try to solve this hurdle. Let’s have a look at them some of them now.

50 Useful Responsive Web Design Tools For Designers

1. Adaptive Image

Adaptive Image can be a small PHP script that detects user screen size and give you the proper image for that screen size. It does not require the changing of your respective current <img> markup, but the implementation is pretty intimidating at a discount tech-savvy users.

(Image source: AdaptiveImage)

2. Responsive Image Using Cookies

Keith Clark has his approach on serving responsive image with Cookies. It technically detects the screensize by making use of JavaScript and sizes the proper image size using PHP before it's served and loaded around the page.

However, this system has a lot of issues and require even more experimenting before it can become a practical solution. You can read his explanation and also get the code in the article at Clark’s blog, Responsive Image Using Cookies.

3. Src

Sencha can be a mobile development framework that enables us to create a native-looking app with HTML, CSS and JavaScript. If you build your app with Sencha, you can utilize its API, Src, for resizing your images in a very smart way, determined by users device screen size.

The API has a set of functions allowing flexibility on the output. For more technical details, visit this reference.

(Image source: Sencha)

4. HTML5 Picture Element

This looks like it's the future standard of responsive image. A new element called <picture> is proposed to allow for us setting different causes of images, and also to refer to the breakpoint in which the source of image must be served, like so:

 <picture id="images"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> </picture> 

This element, however, is still in the Working Draft stage. It isn't yet applicable. Until then you can use a Polyfill called Picture Fill.

Picture Fill

Picture Fill is really a tiny JavaScript library that is developed by Scott Jehl. It mimics how <picture> works with all the <span> element.

 <span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> </span> 


If you happen to be using WordPress since your publishing platform, you're lucky, as there are several plugins that serve the picture in a way like the <picture> element.

  • PB Responsive Image

  • WP Responsive Image

  • Simple Responsive Image

  • Picture Fill WP

If you utilize Drupal, there is a project called Picture that works the same way.

5. Focal Point

Focal Point is often a framework that permits developers to “crop” images and control the focus on its focal point for responsive design. This technique is purely finished with CSS; the writer simply adds the classes in the element that contains the look.

It will be worth noting though the trick in this system is by using overflow:hidden to disguise part of the look. So the picture is not (technically) cropped, meaning we turn out of downloading the same image size. In addition, this too might not work inside case where the look is not wrapped by having an element.

(Image source: Noupe)

Final Thought

As said, there isn’t yet one implementation that sets an ordinary to answer this issue completely. These techniques and tools although in the list above as solutions, have their own own drawbacks and none may come out because the final solution for every case.

It can be unsure whether or not the new proposed property, <picture> is a recommended solution in the long run. So, until then, it seems that we are tied to Fluid Image.

Related posts:

  1. Freebie Release: “Bare Responsive” - A blank and responsive WordPress Theme

  2. Creating Responsive Websites with Adobe Edge Reflow

  3. How to Create a Responsive Navigation

  4. 30 Responsive Portfolios For Your Inspiration

No comments

Post a Comment