How to easily make WordPress images responsive

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 {
        width:100%;
        height:auto;
    }
}

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!