DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.

Responsive images can be big on wide screens and automatically adapt to smaller screens such as iPad. Making your images responsive is not difficult to do: Here is a simple recipe to achieve it on your blog.

The first thing to do is to create the shortcode. To do so, open your functions.php file and paste the following code in it:

function responsive_images($atts, $content = null) {
     return '<div class="image-resized">' . $content .'</div>';
add_shortcode('responsive', 'responsive_images');

Once done, open your style.css file and add those CSS rules:

@media only screen and (max-width:767px) {
    .image-resized img {

You can now use the [responsive] shortcode to insert responsive images in your blog:

[responsive]<img src="image_url" alt="alt" title="title" />[/responsive]

Thanks to Rockable Themes for the tip!


  1. Not that it really matters but if you have a shortcode of [responsive] you would probably use it for a variety of different media. Why not add in an attribute to the shortcode for “media”. I mean – you’ve gone to the trouble of adding in $atts and $content as function parameters – might as well use it 😛

    function responsive_images($atts, $content = null) {
    ‘media’ => ‘image’, // set a default of image if none is supplied
    ), $atts));

    return ” . $content .”;

    add_shortcode(‘responsive’, ‘responsive_images’);

  2. I’d probably do this with jQuery so that you wouldn’t have to add the shortcode manually.

    Good idea though!

  3. @Michael – I would probably say using a shortcode is good but turning the shortcode into a plugin would be even better. That way its theme independent.

    Last thing you would want is functionality like this embedded into the theme as that would make it very difficult for a user to change their theme.

  4. Do we really need to use shortocode? This can easily be done from CSS. Set the image width to 100% and height to auto.

    Using shortcode is not practical, you’ve to use it everytime you want to upload a new image. How about the old images?

  5. You can also do the same using the same css property to image alignment property of your wordpress theme. Nice tricks but does not reduce the images size. Do you have any better idea to reduce the image size according to the device size.

  6. Thanks, your blog is very helpful for me…
    You are writing a lot of helpful wordpress tips…

    I’m so thankful to came across this blog…

  7. What a useful bit of coding – great for ipads!

  8. I agree. I generally integrate this into the CSS / media queries. But it’s always good to have options 😉

  9. we can also add this css for all images


    this will work as a responsive

  10. Thank you! This is great!

Leave a Comment

Your email address will not be published. Required fields are marked *