Ads Top

How To Serve Responsive Images On Your Site?




Responsive Web Design techniques






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.







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 :)

No comments:

Categories

adsense adsense optimization adsense tips Animation Announcement Apps Background backlinks Basic blog Blog Design blogger Blogger Design Blogger Hack blogger pages blogger posts Blogger Security Blogger Special Tricks Blogger Templates Blogger Tips Blogger Tips & Tricks Blogger tools blogger tricks Blogger Widgets Blogger Widgets and plugins Blogging Basic Tips Blogging ethics Blogging tips Blogging Tools Blogging Tricks Btemplates 2013 Btemplates 2014 Bugs and Errors click bombing Comments css CSS and HTMLTricks CSS3 Cursors custom domain Design Drop Down Menu Earning Tips Editing emoticons Events Facebook Facebook tricks Featured Content Slider firebug Flash Free Coupons Free Recharge Gadget Generator Google Google AdSense Google Analytics Google Plus Google Plus Tricks Guest Posts Horizontal Menu How To HowTo Tuts HTML Image Image Effects Increase traffic instagram Interesting invalid clicks Java Script javascript jQuery Label labels Link Building Links LOGO Makers Make Money Make Money Online Marketing Menu bar menus Menus for Blogger Multi Tabbed Navigation navigation menu News Numbered Page Optimizing Other Tricks Page Photoshop Pop Out popular posts Post posts presentations Pure CSS Menu recent comments recent posts related posts Responsive Blogger Templates robots Rss Search box SEO SEO Strategy SEO Tips & Tricks sitemap Slide Show slideshows Social Media social media plugins statcounter static pages Style your Blog swf Tab Menu Template Template Designing Template Tricks Templates templates 2016 threaded comments Tips tools Traffic Tips Twitter Unlock modems Vertical bar Video Wallpapers Web Designing web hosting Webmaster Tools Widget Widget Generators Widgets wordpress WordPress Plugins WordPress Themes WordPress Tricks WP Tips
Powered by Blogger.