Articles

WORDPRESS TUTORIAL HOW TO MAKE IMAGES RESPONSIVE

WordPress-Tutorial-Responsive-Images

Getting literate to WordPress is like moving to new Stone Age from Old Stone Age. As before WordPress, developer had to develop new code for every single step taken for web development and most of the time WordPress seems to be tougher then HTML, CSS development when you are unable to handle the rite plugins, and if u got the rite plugin then how to use it?? It’s the big burden for WordPress developer.Now here comes WordPress Tutorials for how with an single image upload, you can generate all the sizes of your images fully responsive. There are only two steps.

WORDPRESS TUTORIAL 1st Step: FOR GENERATING MORE IMAGE SIZES, MODIFY FUNCTIONS.PHP.

Whenever you upload an image, WordPress use to save it as a build-in size and also generates 3 resized copies by itself as the following standard.

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

(Height or width may change, according to the image ratio)

No doubt it’s a brawny feature as it can be customized to make any of the image size, as you don’t need to start making copies of images in different sizes. You just have to upload an image, and WordPress starts making resized copies of the provided images.

But remember this will be done when functions.php file is modified. For adding a new image size, you must add calls to the add_image_size function­­. Following are the example that adds four new image sizes:

WordPress Tutorial

Each function includes a name, therefor WordPress can easily recognize the size and a width as well. Now the new sizes will be 300, 600, 1200 and 2400 px wide. It is also possible that wordpress also crop  or set the height of the image with the function  of add_image_size. But keep in mind that, the example above will keep the original image aspect ratio. More can be found out about the add_image_size function in the WordPress Codex.

The above examples are showing only four new images sizes those are just been added, but you can add more or less, it depends on the design of your theme chosen by you, now whenever you upload an image to WordPress, the new image size will be generated. Now what you have to do is to include them in HTML.

WORDPRESS TUTORIAL 2ND STEP: INSTALLING THE PLUGIN CALLED,  ”THE RICG RESPONSIVE IMAGES

Now to get output of all the image sizes from WordPress, above mentioned plugin “RICG Responsive Images” needs to be installed. After activating the plugin all of the images sizes will be included in the image tag via the srcset attribute.

After adding image to the page of WordPress the output HTML looks like like:

WordPress Tutorial

In this src attribute there is a single image .

When you have done the installation of the plugin, the HTML will looks like:

WordPress Tutorial

Now via the srcset attribute, all the new images sizes have been added.

Picturefill.js  is also included in the plugin, a responsive image polyfill which adds support for both the picture element and the new responsive attributes for the img element. This, together with the srcset attributes now being included in the image tag is what start making your images responsive.

WORDPRESS TUTORIAL: NOW GET READY TO SEE YOUR IMAGES RESPONSIVE:

Now the images on your webpages are responsive and now browser will use most desired image to be download.

As it’s not only responsive, it won’t pixelate and show perfect image quality to the large screen as well.

Doesn’t matter either visitor is using cell phone or wide screen led.

Related Posts

Comments are closed.

Facebook