Avoiding squashed images on smaller screens

Guidance on how to avoid images looking squashed 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. 

 

Related pages...

INDEX OF HELP PAGES

more Here is an index of the help pages that are available. Click on a link to go to a particular help page.

Read why a new style template has been introduced and what it involves

Why a new template?

more Here are the answers to questions you may be asking yourself regarding the new template

Tutorials and Videos ..

more Here are some links to videos and tutorials to help the club webmaster

Using tables in the text area

more Using tables in your website text area can be challenging. Here are some guidelines.

Setting your homepage style

more Guidance on homepage style settings

Uploading images to the text area

more How to upload images to the text area and make them 'responsive'.

Uploading Photos for the Carousel

more Guidance for uploading photos for the carousel and slideshows

The 'Carousel' homepage display

more Questions relating to the Carousel on the home page

Other features of the Template

more Questions and advice relating to some of the other features of the template.

The 'Thumbnail' homepage display

more Questions relating to the static homepage thumbnail display

The 'what we do' pages

more Questions and advice relating to the "What We Do" pages.

Photo Galleries

more Questions and advice relating to photo galleries

back to page above this...

HELP PAGES

back Use the help pages to make the most of the new club website template .