Responsive images made easy
In this era of ‘Responsive Web Design’ where websites need to function well on smartphones and tablets as well as desktop computers, finding a solution for a website’s images can be tricky.
As Chris Coyier of CSS Tricks writes, there is much to consider when choosing a method for making images responsive on modern websites.
The solution that I use is semantic, utilises valid code, will not crop images, doesn’t rely on the <picture> element nor JavaScript and doesn’t use double-requests. Some might argue that this method utilises additional bandwidth compared to some solutions, so users would need to assess whether this method is suitable for their purposes. Regardless, I believe that this solution is easy to implement for those coding new sites.
This methodology makes use of the <figure>, <img> and <figcaption> elements and will re-size images with the browser window up to their maximum size (ie there will be no stretching or pixellation). This methodology will also centre images in the middle of the page (or their containing div). If you wish to alter this, adjust your CSS accordingly.
Step 1: Set-up the basics
Follow all of the steps in my previous article called ‘Getting Started with Responsive Web Design‘. In particular, pay attention to steps 3-6.
Step 2: CSS
The following CSS will format the <figure> and <figcaption> elements:
figure {
display: block;
width: 100%;
text-align: center;
}
figcaption {
font-size: 0.8em;
text-align: center;
line-height: 1.6em;
padding: 1em 0 2em 0;
}You can format your <figcaption> styling further as you see fit to work with your design.
Step 3: HTML
Implement responsive images on your website with the following code for each image instance. Note that there is no height or width specification: This is very important to prevent stretching or distortion.
<figure>
<img src="/path/to/image.jpg" alt="alternative text">
<figcaption>Figure caption</figcaption>
</figure>Voilà! Your images should now be responsive and resize with the window up to their maximum size.
This solution will work in all browsers from IE7+.
Can this be implemented in WordPress sites?
Absolutely! Some more CSS formatting is required for WordPress sites to account for legacy content and the default CSS classes that WordPress uses for positioning images. In your CSS at /wp-content/themes/(your-theme)/style.css, include the following code, making sure that you have followed all of the other steps above for your theme. If you can’t edit out the old CSS descriptors related to image formatting from your CSS file, at least make sure that this code placed at the end of your CSS file so it will override them.
.aligncenter, div.aligncenter, img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
img.alignleft, img[align=left] {
float:left;
margin: 2px 10px 5px 0px;
}
.alignright {
float: right;
padding-top:3px;
padding-right:13px;
color:#bbb;
}
img.alignright, img[align=right] {
float:right;
margin: 2px 0px 5px 10px;
}Without having to re-code your images, you should find that this solution works well for most of your existing blog pages (even if they have size attributes specified). I implemented this methodology recently when I updated my personal blog (and the Coding Blog) and it worked like a charm.
Here’s a demonstration:
Comments
3 responses to “Responsive images made easy”
This is a great post! But is there a way – using CSS only – to wrap the figcaption not to exceed the image’s size?
Btw, I also like your thick headline font.
Please let me know if there’s a solution to the above.
Many thanks,
Imre
By the way, I think you need to apply img { max-width: 100%; } to force images wider than your container not to exceed the container size.
Doesn’t solve serving images based on pixel density.