In this modern age world, there are a lot of techniques for building responsive images. However, the techniques are not same due to variations in browser support and complexities. One can make use of the srcset attribute, but it is a complex way of implementing responsive images as it demands several images, markups and the new HTML attributes (not well supported outside modern browsers).
There are lot of people that go for HTML to WordPress conversion so as to make intuitive websites for their business on all
kinds of devices irrespective of the size and its orientation.
However, in this article, we will simply work on height and width of
CSS, which will further make it independent from the browsers
property and thus will work on all browser and CSS. However, it will
require a fluid design layout for your website. The concept behind
this is to use CSS to make images a percentage length unit or any
relative unit for making their width re-sizeable and give auto value
to the height property.
img {
width: 100%;
height: auto;
}
What's
a Responsive image ?
In order to know about a responsive image, we can take an example.
Div acts as a container of an <img> element.
HTML
<div class="container">
<img src="image01.jpg" width="960"
height="640" />
</div>
The container has margins on the left and right as the container has
96% width property. The max width is of 960px so that the layout do
not appears too wide on a bigger screen.
The container contains a <img> element of 100% width, so that
its width so as to make the width equal to its container irrespective
of the viewport's size, thus this makes this responsive. Further, set
the height to auto so that the image scales in proportion to the
screen.
CSS
div.container {
width: 96%;
max-width: 960px;
margin: 0 auto; /* to center the container */
}
img {
width: 100%;
height: auto;
}
The <img> element is always responsive even if we assign a
fixed height and width to HTML attribute as shown in the markup (i.e.
width="640", height="960"). This technique is
best suited for content which has a fixed set of dimension via HTML.
Putting
Responsive images in columns
In order to display more images on a small screen, we try to scooch
in images in a columns. We often get to see websites which display
galleries in a thumbnail on a grid style.
In order to make images responsive in columns, we only need to lessen
the width property of the CSS and assign a display property value to
the <img > elements.
We further have a couple of layout schemes namely: A two-columns
layout and three-column image layout for images.
Two-
column layout for responsive images
To get a two-column responsive layout, you need to set the width
property of the CSS to 48% or nearly half of the container. Though,
you might be thinking why not to 50%. The reason being that images
have margins so we need to keep room for them as well.
HTML
<div class="container">
<img src="image01.jpg" width="860"
height="540" />
<img src="image02.jpg" width="860"
height="540" />
</div>
CSS
img {
width: 48%;
display: inline-block;
}
Three-column
layout for responsive images
You need to use the very same concept in order to get a three-column
layout for responsive images, all you need to do is to set the width
of the container to 32%.
HTML
<div class="container">
<img src="img01.jpg" width="860"
height="540" />
<img src="img02.jpg" width="860"
height="540" />
<img src="img03.jpg" width="860"
height="540" />
</div>
CSS
.three-columns {
width: 32%;
display: inline-block;
}
Adding
Conditional breakpoints
Adding conditional breakpoints for responsive images is a good
practice, and thus when the images grow smaller, the columns can
merge themselves.
This can be done via media queries.
In code snippet used below, we will make images display in single
column in smaller device such as smartphone, two columns on slightly
bigger devices on phablets or tablets and four columns on much bigger
screen such as a laptop or desktop.
HTML
<div class="container">
<img src="img01.jpg" width="860"
height="540" />
<img src="img02.jpg" width="860"
height="540" />
<img src="img03.jpg" width="860"
height="540" />
<img src="img04.jpg" width="860"
height="540" />
</div>
CSS
/* For Devices of small size (e.g. smartphones) */
img {
max-width: 100%;
display: inline-block;
}
/* For Devices of medium size (e.g. tablets) */
@media (min-width: 420px) {
img {
max-width: 48%;
}
}
/* For Devices of large size (e.g. desktops) */
@media (min-width: 760px) {
img {
max-width: 24%;
}
}
Responsive
images with full width
In order to get responsive images that always remain 100% of the
device size, you need to just change the container's width to 100%
and simply remove it's max-width property which is 960 px by
default.
.container {
width: 100%;
}
img {
width: 100%;
}
These methods were no doubt simple and easy methods to cater mobile
device users, but it's pitfall is that it will always deliver images
of full size irrespective of the device used by the user. The
smaller devices won't be able to take the advantage of
high-resolution images which are served in full dimensions, and most
of the devices won't be able to open the images even.
Further, if you would wish to improve the performance of your web app
by serving your images after reading the conditions ( i.e. a low
resolution and a smaller images displayed on small mobile devices and
likewise with other devices.), you need to program with the srcset,
pictures and sizes elements.
