Responsive layouts are very essential in today’s internet world because mobile users are increasing every single day. It is important for your site to be able to respond well on every device and every screen size. But, the current HTML image element still has an error when used with responsive designs. It works in uniformity on any screen it is displayed on, which is not acceptable in today’s mobile world. There are innumerous screen sizes available and even more coming up. How can a single image with a standard size show up clearly on every different screen size?
An image should be made such that it is flexible to scale to a percentage and proportion of every screen size it is displayed on. In responsive web designs, the width is defined as per the size of the device’s screen and limited to the widest possible size of the screen. The height is automatically set to retain the image proportions comparative to the width. Also, one important point to be kept in mind is that all big and small devices have different pixel densities, ranging from standard to high; hence, an image should resize itself maintaining these pixel densities, in order to give a clear view.
Let us see how we can add a responsive image to a WordPress theme.
Defining image sizes
WordPress itself creates several versions of uploaded images in different sizes. It automatically generates 3 resized copies in these standard sizes – Thumbnail (150×150), Medium (300×300) and Large (1024×1024).
In order to add responsive images to a WordPress theme, the first thing you should answer is what image sizes you want to offer, keeping in mind different situations. Two key factors will affect your thinking – the screen width and screen resolution.
Generating more image sizes
Now that you have the image sizes clear in your mind, you must generate them to be added into the theme. As seen earlier, WordPress creates multiple versions of an image on its own but, with a few limitations of scaling. But, there is a possibility of customizing the image to create the required image sizes. You need not create multiple copies of a single image in different sizes. Just program WordPress to create the required resized images by uploading one single image.
For doing this, you need to modify the functions.php file. To add new image sizes, you need to add calls to the add_image_size function. Each call to the function will help WordPress identify the size of the image needed. It will then set the height of the image relative to the width needed or crop the image as required.
Adding RICG plug-in and Picturefill
In order to get the output of all the image sizes, the RICG Responsive Images plug-in needs to be installed. After it is activated, all the images sizes will be included in the image tag through the srcset attribute.
This plug-in also includes Picturefill, a JavaScript file that enables support for the picture element and associated features. This, along with the srcset attributes makes your images responsive.
Now, as you change the size of your browsing screen, the browser will choose the most appropriate image to download. The smaller screens will get small image sizes and larger screens will get larger images.
Following the above steps, you can easily create a responsive WordPress website with responsive images for all screen types. In order to design such a site for yourself, you can contact Jain Technosoft, one of the leading WordPress Web Development companies, with its team of experienced WordPress Web developers, experts and designers will build it for you to get you more targeted traffic and attract large numbers of potential clients.
