This is a mini tutorial for webmasters and developers that work on exiting website that are not yet responsive and mobile friendly.

The use of responsive layouts in web design is quickly becoming necessary and it is hard to sell a non-responsive solution to any client today. Responsive means that the layout of the website adapts to fit the size of the users screen. This makes the experience for visitors using e.g. iPad or iPhones different from desktop computers and it is more likely that they will stay and come back.

Images are one of the concerns when it comes to making a website responsive. Images are of fixed sizes so you have to make it adjust depending on the size of screen or else it will be too big to occupy large portion of the screen, too small to view or even mess your layout.

In this tutorial, I have described four approaches you can use for making images responsive. Keep in mind that if you are building a new website it is a good idea to look for a responsive theme in the first place. There is no reason to choose a non-responsive solution, as there are tons of cool responsive themes available.


ElegantThemes
ThemeForest

Advertisement

1. Using a WordPress Plugin

Using a WordPress plugin is an effective way of making images responsive in your WordPress website. Responsive Images Generator & Loader is a convenient way to make images load faster on mobile devices for making them responsive without any need for coding. It offers an admin page for controlling sizes and breakpoints for responsive behavior. This is a lot more control that you will get with most responsive themes.

reposnsive-images-generator

2. Creating your own Shortcode

This is a quick and simple trick I have for making specific images responsive in WordPress. Please note that it is not a site-wide solution. It is using WordPress shortcodes, and basically makes sure the images is rendered with the right CSS class. To make it work… First, paste this code in the functions.php file of your theme. It creates a new shortcode called with [resposniveimg]

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

After this, paste this code in the style.css file of your theme or even better a child theme if you want to do it right. You can add more media queries if you like. Basically what a media query does is to apply the specific CSS styling only for view ports (available screen area) with the matching dimentions.

@media only screen and (max-width:767px) {
 .image-resized img {
 max-width:100%;
 height:auto;
 }
 }

You can now use the shortcode.

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

 

As you can see, the shortcode has the opening and closing tag with the image tag <img> in between to enable that image to be responsive.

3. Adding CSS to the Theme

If we want to control all the images once, without touching each image tag, we can add a general CSS which will apply to all images. We can use:

img { max-width: 100%; height:auto; }

Just paste this code in your style.css file of your theme. This image does not affect the actual size the image but it adjust its appearance depending on the size of the layout or it’s container.

4. Using jQuery and PHP Plugins

If you have a lot of legacy content on your WordPress website it may not alway be enough to update the CSS. It all depends on how you want your images to behave on mobile devices. There is a way however, to take full control and it is based on jQuery and/or PHP to identify images that need to be scaled, served and cached.

ResponsiveImg is a jQuery and PHP image resizing solution that takes care of all the aspects of making images responsive the right way. It takes it a bit further than just adding a max-width in CSS by adding breakpoints and writing new image files for optimal performance and quality.

Adaptive Image is able to detect visitors screen size and it then automatically scales the images and serves them in the right size. The solution use .htaccess and routes images to a PHP file.

Author : Lars Vraa

Lars is passionate about web design, web development, SEO, social media and loves to look into new technologies, techniques, tools etc. and to write articles for tripwire magazine readers.

Pin It on Pinterest

Shares
Share This

Share This

Share this post with your friends!

Shares