Responsive Images with Picturefill 2.0

Responsive Web Design seems to be the way that the majority of websites will be developed in the near future. For a while, everyone was creating a separate website that catered to mobile devices in addition to the main website that desktop browsers were able to access. Web Developers and UX Designers quickly discovered that this was a less than ideal approach as it required maintaining two separate websites, and the mobile website tended to remove data that was visible on the desktop version of the site.

HTML 5 has allowed Web Developers to be a bit more efficient at optimizing the web browsing experience for visitors of all display resolutions. With Responsive Web Design, current browsers allow you to customize non-image elements with CSS Media Queries. Unfortunately up until recently, there was not a standardized way to handle responsive images such that a device with a 320x480 screen does not receive an image that is 1200x600, but instead receives a smaller version of the image.

The first rule of website performance is to limit the number of bytes that must be downloaded to display the website. Thankfully, the <picture> element has been somewhat standardized and is starting to be implemented in Chrome and Firefox, while Internet Explorer continues to lag behind in new functionality implementation. However, there is a working polyfill for the <picture> element that works with all major browsers. The Picturefill polyfill is the major polyfill out there that is known to work across browsers and is supported by the Filament Group. Using this polyfill simply requires the developer to add the script to the head of the html, and make sure the <picture> elements adhere to the standard and a slight workaround for IE9.

Images tend to make up the majority of the download size for any website and this will allow web developers to limit the image sizes that will be downloaded by clients. Take this polyfill and experiment with it and start utilizing Responsive Images today.

Tags:

Related Posts

Apr 24, 2014
2 minutes

Optimize Magento Time To First Byte

When looking at the performance of your site, waterfall charts are one of the first places you should investigate. The first thing that is represented on these charts is that the HTML for the website is the first resource that is downloaded every time.

As a result of being the first resource downloaded every time, this is the logical first place to look to improve the performance of your Magento website. There are a few ways to make sure that the page downloads more quickly, and they all involve making sure that the file size is as small as possible.

#magento #performance
Read More
May 12, 2014
2 minutes

Mobile Web Development Is the New Internet Explorer 6

Developing a website that works well across devices and browsers is an excersize in playing Whack-A-Mole. Once you get one browser working on a desktop browser, you go to the next browser and find that not everything works the same way. In 2014, it seems that there aren’t that many differences in functionality between desktop browsers, but that all changes once you start making a responsive website that must handle mobile devices as well as it does desktop browsers.

#internet-explorer #responsive-web-design #rant
Read More
Apr 28, 2014
2 minutes

Improve jQuery Performance With $().addClass()

When looking at things that make a website seem sluggish, you might assume that the most popular JavaScript framework out there always does things in the most efficient manner. However, as I have found, jQuery does not always produce the best performance due to it having to support many different browsers with version 1.x. As a general rule, instead of setting CSS attributes directly on the selected nodes, I prefer to instead add and remove classes on those nodes instead, as it seems to perform much better.

#jquery #performance
Read More