Avoiding squashed images on smaller screens

What images are we referring to?

Many web masters will have added some photos or images to their pages using the online file manager. These are the images which are embedded along with text in the main body of the page. We are not referring to pictures in the home page carousel or page slideshows. Those are dealt with elsewhere.

Why are some images squashed?

 Currently, by default, when images are uploaded with the file manager and embedded into the text area they are displayed at a fixed size.  They are therefore not responsive, which means that whilst they may look fine on larger screens, on some smaller tablets or smartphones they may appear to be 'squashed'. Some additional steps may therefore be necessary to make the images 'responsive' or to avoid distortion.

How do I test for squashed images?

If you haven't got a smartphone, you can see if images become distorted by narrowing the size of the your PC window. To do this, display the page in your browser and make the window narrower. As you do this you will see that text will change position and soon the right hand column will shift from the side to the bottom of the window. This is what we mean by 'responsive' and it gives better viewing on smaller devices. As a very rough guide, when the width of the window is about one quarter of its full size, what you are seeing is something similar to what will be seen on an iPhone in portrait view, which is 640 pixels wide. Make a note of any images/photos that become distorted and need fixing.

How do I fix images that distort?

Before trying to fix a distorted image, seriously consider whether it would be better to display the image in a page slideshow or as a main pic to be used in the home page carousel. This is the preferred and easiest way for larger images.

If you do decide to retain the image in the text area, here are three ways that should help you fix distortion.

Make the image smaller
You can keep the image at a fixed size but make it smaller using the online image properties manager. Fixed size images less than 266 pixels wide should be fine on most smaller screen devices. Images wider than this will start to show some distortion. Use your judgement as to what you feel is visually acceptable.

Remove the image height and width settings
You can make the image 'responsive' by removing the 'width' and 'height'  settings using the online image properties manager. Please note that this will display the image at the original size at which is was uploaded. Check the resulting display size. If it is to big you will need to take further action.

Resize the original image
If neither of the first two steps are appropriate, you will need to permanently re-size the image to a smaller display size. To decide the correct display size, consider the full width of the text area to be 670 pixels wide. The image can be resized off-line and reloaded, or, if you are familiar with the template online file manager, you can do it online. It's important to remember that, before embedding the new image,  you will need to remove the 'width' and 'height' settings from the image properties box.

Detailed instructions for uploading images to the text area are given elsewhere.

Benefits?

Although making images responsive may involve extra work for the webmaster, you will have the satisfaction of knowing that your club website will now display better on a wider range of devices.