What's WP
Find Everything Related to WordPress - Best Tutoriasl on WordPress!
How to Make Image Responsive in WordPress Sites?

How to Make Image Responsive in WordPress Sites?

One of the critical factor that has lately gained importance in the eyes of developers and administrators of WordPress sites is responsiveness. Websites and blogs running on WordPress allow you to operate responsive websites where the content, layout and images can adapt suitably with the multiple screen sizes of the viewer’s gadget.

In fact, making an image responsive is a tricky method, but you can simplify it and make the configuration easily by knowing several imperative things that have been discussed here.

Why Should Make the Images Responsive?

why make image responsiveWith the increased advancements and gadgets in the market, people have started using devices of different sizes for various purposes. As it is clearly understandable that the screen size of an iPhone is much smaller than a desktop’s monitor, the resolution of the website and its images need to be responsive in order to blend with both.

There are several reasons as to why you should make image responsive. First of all, it maintains the proper design of the post. Like teachers love to go through students’ answer sheets having relevant answers along with beautifully designed diagrams, the viewers fancy reading posts that are properly designed. When images are made responsive in a WordPress site, the webmasters can set images of different original dimensions to a particular size to keep up with the appearance of the post.

Secondly, it helps to keep the resolution of the image stability. For example, if your post contains two images of dimensions as 200x200px and 640x480px, and the screen resolution is 768px, then the image automatically increases its width to 100% of the resolution according to the responsive rule. Although the 640x480px image faces no harms by being resized to 768x768px, the 200x200px image may look very awful and ultimately hamper the reader’s attention. Therefore, a responsive image is important to maintain the flexibility of the post.

Lastly, it renders a sign of professionalism and perfection as the newbies don’t know how to make images responsive to suit the screens of different gadgets. With that being said, it is quite essential to make images responsive in a WordPress site.

How to Make Images Responsive

There are various methods of making images responsive in WordPress sites and blogs. As the most preferred way is by using plugins, shortcodes and themes, these three procedures have been discussed here in details so that you can follow and configure your website successfully.

Using plugins to make images responsive

make image responsive pluginUsing a plugin for activating a diverse range of features in a WordPress site is the first preference of many administrators. If you belong to this category, you have got a reason to smile, because available online are various plugins that assist in making images responsive. Some of the most efficient plugin tools that modify and make the images presented in WordPress site responsive are Mobble plugin, Simple Responsive Images and PB Responsive Images plugin.

Activating any of these plugins is as easy as any other WordPress plugins. All you need to do is to download the plugin on your desktop and upload it on the WordPress site. Once done, you can go to the plugins menu and activate the plugin in a few clicks!

Using shortcodes to make images responsive

It is a technical way that is mainly preferred by experienced developers. Experts in the industry of online development prefer shortcodes because it keeps the website good in performance and speed. Therefore, if you feel pleasure in activating features on your WordPress site by coding, here’s the way.

First of all, you have to remember that all the custom functions are entered into the functions.php file. So, you have to move into the specific file for making the images responsive. Here, you have to use the following shortcode.

make image responsive

Saving the code in the functions.php takes you half way through. Now, you only need to assign the CSS properties to the images in detail, and this can be done by using the following shortcode.

make image responsive

Once, done, you can witness that the images in your WordPress site have become responsive!

Using themes to make images responsive

This is the simplest technique of making the images responsive in your WordPress site. Themes are used in every WordPress site to enhance the appearance of the site. Tremendous numbers of themes categorized into different groups are presented in the online store of WordPress templates.

On a broader scale, the themes can be grouped into two categories – responsive and standard. You should install a responsive theme in your WordPress site for better performance in multiple gadgets.

Also, for enabling the responsiveness of images, you need to add the code in the functions.php file. The code that should be entered and saved is as following.

make image responsive

You can turn the dimension of your image to automatic by making it responsive. Any of the above-mentioned techniques can be used to make your images responsive in the WordPress site.


Lucy has been a very experienced SEOer, technical writer, web developer, c# developer since 2002. Now she owns a startup in San Francisco, CA, focusing on running a couple of blogs to share knowledge and experience with global readers and deliver exceptional results to global sponsors by leveraging the power of Internet.