Use Style Sets to control when images will be displayed

Control display by Device & Screen Size

WYNCHCO website designs include six MODULE Style Sets, which incorporate CSS3 @media Queries, to enable you to control image display depending upon:

  • DEVICE
  • and SCREEN SIZE

being used by website visitors.

Use of Style Sets enables you to display separate versions of the same image, each one in response to the device used.

The image sizes will vary by DIMENSIONS (px) and DISK SPACE used (kb).

Images with smaller dimensions (all other things being equal) will also be smaller in terms of disk space used.

Website performance will certainly be improved when Style Sets are used in this way.

But as ever, benefits usually come with some costs attached!

Read on.

phone

Result: Small image (say 340 px wide) will be visible ONLY on smartphones.

pc

Result: Large image (say 890 px wide) will be visible ONLY on large screen devices (PCs & laptops) .

Cost vs Benefit

The use of Style Sets to control image display by device and screen size will certainly improve performance.

For example, improved:

  • page load speeds on small screen devices,
  • page rank in search engines, and
  • user experience.

But their use may also result in increased costs to your business or organisation, depending upon the availability of time, skill set and relevant experience.

If time is of the essence, we recommend using Style Sets to control image display only when page load speed is critical.

Page load speed might be an important consideration when you are drafting:

  • key landing pages, or
  • pages which contain many images.

Search engines are reported to rank fast loading web pages higher than slow loading ones.

If your competitors are serving large images to small screen devices, then you may be able to gain some competitive advantage by serving small images to small screen devices.

{slider=What about when page load speed is not critical?}

In general you may wish to adopt a policy of displaying only one version of any one image in your website.

And relying on web browsers to resize the image to fit the screen as the web page loads.

Page load speed will be slower but only marginally so if the image is not too large (in terms of KB and PX).

We include an EXAMPLE IMAGE in our WYNCHCO website designs which:

  • has a width of 890 PX,
  • and is 15 KB in size.

890 PX is wide enough to fill:

  • the width of an iPad screen in portrait view, and
  • the Main Body on large screen devices when a fixed width display format (of 1140 PX) is used, assuming one sidebar.

An image of this size will be reduced in size 'on the fly' by the web browser to fit a space where the width is less than 890 PX, for example:

  • on a Phone or Tablet (portrait view), or
  • in the sidebar on a large screen device.

Your choice of image width to use will depend upon the Format (940 or 1140 PX Static Display) and Layout (narrow or wide sidebars) of your website.

Use the table in our separate article to help you decide what image width to use.

Need help? Just ask.

Read more: Recommended Image Widths.

How Style Sets may be used to control display of IMAGES

We include an example to demonstrate how Style Sets can be used to control image display be device and screen size in our separate article.

Read more: Use Style Sets to control display of images by device & screen size.