Easy Steps to Make your WordPress Images Responsive

by WP Creative on 2015 December | Posted in WordPress

mobile friendly site image

Open Source Content Management System (CMS) WordPress is one of the most influential tools in today’s era. Responsive images make the size of an image fit in all the screens. Making a responsive image as well as theme and integrating it is not a difficult task when you understand the basics of themes and ways to use it.

Conversely, Responsive images are not the one that WordPress compact out of the box. You can apply the steps to generate the image size manually after that HTML editor can be useful to type the image tag and attributes manually. However, this may be time-consuming and create a problem for both users as well admin. So, to make you out of this issue, here in this article we will discuss the convenient ways to make the images responsive.

Some of the Easy Step to make your WordPress Images Responsive includes:

Step #1. Change Function.PHP to create more image size

Once you upload an image in WordPress, it saves the images at the local size generating 3 resized copies in these customary sizes repeatedly. The height and width may vary relevant on the image fraction that is:

  • Thumbnail (150 * 150)
  • Medium (300* 300)
  • Large (1024*1024)

This is one of the true influential features as it will be tailored to develop any size of an image which indicates you do not require making multiple copies of an image in various sizes. You only need to upload a particular image and WordPress will develop the resized copies. This is achieved by changing the file functions.php. Thus, to add up the fresh image size, you have to add calls to the add_image_size function.

Step #2.  Install RICG Responsive image Plugin

When you install RICG Responsive image Plugin and all the image sizes that are activated will be included in the image tag through an attribute called “srcset”. The plugin also contains a responsive image Polyfill called Picturefill.js that includes maintaining the image component and the fresh responsive features for the img element.  Along with an attribute srcset, it will now include the image, tags making the image responsive.

Step #3: Install Plugin to regenerate image size

After the above step, now, it’s time to install a plugin to regenerate image size. You can do this easily through Regenerate thumbnail plugins. This plugin goes through every existing image parts, and also regenerates the size of fresh images relevant to the new one created with functions.php. Additionally, it is recognised as the real time saver and only needs the single button click.

After you install it, go to tools, then Regenerate Thumbnails. After that, click on the button “Regenerate all thumbnails”. When you click on that button status bar appears, and then you can view the details regarding the number of images that have been resized.

To Wrap Up,

Now, you contain responsive images. Once the images within your online presence become responsive, the browser chooses the most suitable images to download. Visitors using portable devices will acquire the quality image of smaller sizes. This makes your online presence load more speedily with a quick download.

Are you looking for a WordPress developer in Sydney? If yes, connect with us now.

Looking for a WP developer?

  • This field is for validation purposes and should be left unchanged.
  • Recent Post

  • Categories

  • © 2018 WP Creative, Naphix Pty Ltd. ABN: 65 610 345 198