Are you looking out to build a fully-responsive WordPress website? Are you worried about tweaking your website imagery for varied screens? If your answer is a “Yes” to both these questions then you’ve reached the right post.
What all has been covered in this post?
This is a tutorial which explains you the simplest technique for creating responsive images which need to be included in your WordPress posts/pages.
A brief on the method that will be explained in this tutorial
The method that will be explained here purely relies on CSS height and width properties. That means, it would work well on virtually all devices and browsers. The only concern is that the web design layout needs to be a responsive/fluid layout.
Fundamental concept used for the method
All the variations covered in this tutorial will be based on a fundamental concept wherein CSS will be used for assigning a percentage-length unit to the width property and a value of auto to the height property as shown below:
img {
width: 100%;
height: auto;
}
Since the <img> element available within the container has a width property of 100%, the image’s width will always be equal to its container, no matter what is the viewport’s size. This will make the image fully-responsive. Also, since the value for height is set to auto, the image will scale proportionally.
Creating a Basic Responsive Image
For creating a basic responsive image, you need to have a div which acts as the container of the <img> element. The HTML associated with the same is displayed below:
<div class=”container”>
<img src=”image03.jpg” width=”840″ height=”420″ />
</div>
In the above HTML, container has a width property of 84% ensuring that the image has both, left and right margins. Also, the image has a max-width of 840px, making the layout not wide enough for display on large screens.
Also, the CSS associated with the creation of a basic responsive image is shown below:
div.container {
width: 84%;
max-width: 840px;
margin: 0 auto; /* this will center the container */
}
img {
width: 100%;
height: auto;
}
Here, you need to note that the <img> element will be responsive irrespective of the fixed height and width HTML attributes specified in the markup.
Creating a full-width Responsive Image
In order to have responsive images which are 100% of the viewport’s size(i.e. full-width), you simply need to remove the container’s max-width property i.e. 840px and allot it a new width of 100% as shown below:
.container {
width: 100%;
}
img {
width: 100%;
}
Creating responsive images which display side-by-side in columns
There are situations wherein we want the images to be displayed in the form of thumbnails on a grid. Hence, in order to achieve responsive images in columns, all you need to do is simply reduce the CSS width property and allot <img> elements a particular display property value i.e. inline-block. Here’s an explanation of some layout schemes for display of responsive images:
Two-column Responsive Image Layout
In case of a two-column responsive image layout, you can simply set the CSS width property to about 46% i.e. roughly half of the container’s width. Why I haven’t set it to 50%? Reason is simple. Just to give the images proper margins on the sides.
The HTML for this is shown below:
<div class=”container”>
<img src=”image01.jpg” width=”840″ height=”420″ />
<img src=”image02.jpg” width=”840″ height=”420″ />
</div>
CSS for the same is shown below:
img {
width: 46%;
display: inline-block;
}
Three-column Responsive Image Layout
In case of three-column responsive image layout, the concept is exactly similar to the one followed for a two-column image layout, with only one difference that the width property needs to be set to about one-third of the image container’s width i.e. around 33%.
HTML for this will be as shown below:
<div class=”container”>
<img src=”image01.jpg” width=”840″ height=”420″ />
<img src=”image02.jpg” width=”840″ height=”420″ />
<img src=”image03.jpg” width=”840″ height=”420″ />
</div>
CSS for this will be as shown below:
.three-columns {
width: 33%;
display: inline-block;
}
Incorporating conditional breakpoints in responsive images
By having conditional breakpoints in responsive images(the ones which are displayed in columns), the images don’t get collapsed in case their size is being reduced. For including conditional breakpoints in images, you’ll need to use the media queries.
Below is the HTML and CSS for responsive images which will be displayed in one column on a smartphone, in two columns on smart tablets and in four columns on much larger screens:
HTML
<div class=”container”>
<img src=”image01.jpg” width=”840″ height=”420″ />
<img src=”image02.jpg” width=”840″ height=”420″ />
<img src=”image03.jpg” width=”840″ height=”420″ />
<img src=”image04.jpg” width=”840″ height=”420″ />
</div>
CSS
/* For display on small devices (e.g. smartphones) */
img {
max-width: 100%;
display: inline-block;
}
/* For display on medium devices (e.g. tablets) */
@media (min-width: 240px) {
img {
max-width: 46%;
}
}
/* For display on large devices (e.g. desktops) */
@media (min-width: 640px) {
img {
max-width: 22%;
}
}
That’s it!
Wrapping Up
I’m sure the information furnished in the above post would have motivated you to serve different versions of your site’s images, thereby introducing a visible improvement in the mobile web performance.
About the Author
Samuel Dawson is a expert professional with Designs2HTML Ltd which is one of the top most psd to wordpress conversion service company. He has vast experience in front end development technologies.
