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.
Don't Forget, Must Follow On Twitter @GoldenWords_UK
0 Comments: