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 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;
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;
Post a Comment