November 14, 2013 | Paul Gibson

How to Scale Responsive Images in Wordpress

Having trouble sizing images in your responsive WordPress website?

If you are managing a website built with a responsive theme in Wordpress, you’ve probably hit this issue: you make a cool new image to go with a post and insert it with the media manager, only to discover that it won’t scale correctly when you get into the smaller resolutions!

How to Scale Responsive Images in WordpressFortunately, there are a few easy ways to fix this problem.

Before I go into those, I should mention that most of these solutions are addressing only the “height and width” aspects of using an image in a responsive theme. There are also cases when you would want to use a more in-depth solution to address file sizes on mobile devices. But that is a whole other can of worms, and might be a bit more than the average user is willing to take on. For now, lets just focus on getting those images to shrink!

Option 1 - Use a plugin.

There are several to choose from, and they all work a little differently. Some of the popular ones include BC Responsive Images, Picturefill.WP and Simple Responsive Images. Some of these use jQuery (a javascript framework) to provide more robust responsive image capabilities. The plugins vary in difficulty based on what features they offer, but none of them are horribly complex if you understand the general concept of having responsive images. If I had to recommend one to start with, I would recommend Simple Responsive Images.

Option 2 - Manually remove the height and width from your image.

This only works if your responsive theme already has the styling in place to correctly size your content images. Fortunately, it is really easy to test! Just take your editor into text editing mode and remove the “height” and “width” from the image tag. Then go test it out on your mobile device. If it sizes correctly, you’re good to go!

Option 3 - Add your own styles to your theme.

If you are familiar with CSS, you can add your own CSS to your theme to override the image height and width. You can either make this work on ALL images, or you can modify it to only target images with a certain class. 

And as always if you need a hand with implementing one of these solutions, please get in touch with us at VIEO Design. Great digital solutions are our business, and we offer tons of support options to fit anyone’s needs.

Now go get posting!

If you're having trouble with your website and considering a redesign, download our ebook first to get the most for your effort.

Website Redesign Free Ebook

scale-responsive-images-in-wordpress.jpg

Paul Gibson

Paul Gibson

As the leader of our design team, VIEO Design principal and founder Paul Gibson oversees our designers and developers as they create marketing-optimized websites, digital graphics, and print materials. Paul also oversees VIEO's 3D printing division. To date, his most impressive project has been a replacement head for an old My Little Pony. He went with Yoda.

Related Post: