Home Pauline Howto Articles Uniquely NZ Small Firms Search
Image Display Options

How to Change the Display Options for Pictures on a Computer or Laptop

Link to W3C HTML5 Validator Settings - opens in a new window or tab

The normal mechanism is to use the links on the little control panel which is at the bottom right of all the pages which have Pictures. There is an example to the right. There is however very little space to put meaningful text and hover messages are not available on touch machines so this page gives some further guidance and background. Firstly the text is a Link so the text refers to What will Happen. If you click Use Lightbox for Images it will switch so all future images will display in a Lightbox and clicking Use Normal Bandwidth means you will switch to use more data and have Images preloaded and galleries activated. Clicking Minimise Bandwidth will switch you to a mode where Popup images are smaller and you avoid having images preloaded and galleries are not activated. Try it out either on the right or at the bottom of the page and see what happens with the test image to the left side and on those below. The pictures below are in two 'galleries'

What are there two icons in the same area and what do they do?

The spanner (an icon from the Oxygen Icon Project) provides a links to this apge. The other icon from W3C indicates that the page uses either the latest standard, HTML 5, or that it uses the older HTML 4.01 standard and provides a link to the World Wide Web Consortiums HTML Validation Page to validate the page it is called from. The pages converted to HTML 5 offer better scaling on small screens. Now it is a W3c Recommendationand almost every browser has adequate HTML 5 support I have started to steadily convert pages but it is not trivial taking at least 15 minutes per page even when they are in a set. There are 225 pages in the travel series with 6500 images each in 3 sizes which gives an indication of the task. Fortunately all current browsers are very tolerant and arguably most of the errors flagged by the validation process are really warnings. The 'errors' currently on the HTML 4.01 pages will almost all go when converted to HTML5 and if corrected will turn into errors at that time! If the pages are forced to validate with HTML5 the errors are quite different and may cause problems in the long term so the pages do need proper conversion.

Navigation Menu and Settings

What about the new Responsive Pages which are fully Mobile Friendly?

Navigation MenuAn increasing number of pages, including this page, are now fully mobile friendly. These only display the full settings control panel at the right of the footer if you are using a netbook or laptop.

If you are using a mobile device such as a smart phone or tablet then you have a standard menu icon instead (three bars often know as the hamburger icon) at the bottom right which opens upwards into a menu. This gives access to the top level navigation menu and also has a item at the bottom with links to Settings which is rather similar to the panel shown above.

There is an example you can try at the right of the heading to this section as well as the static screenshot to the right.

Normally popups are inhibited for mobile devices so only the bandwith setting is shown.

The menu however also appears if the window is reduce to be too narrow for the normal footer menu to be displayed and under those conditions the menu icon is produced instead but has both settings available as is shown to the right.

The HTML5 icon is not shown in this compact mode.

More about Popup Windows

All the pictures on the pages provide details of where they were taken if you hover the cursor over them and they can all be clicked to open a larger version. Up until recently the only option was that they opened in a popup window. This works very well on Desktop or Laptop with a reasonable size screen and an operating system/browser supporting multiple windows. On such a system it is difficult to beat and I have used it extensively on my web site where there are over 6500 images using it and it has been tested on Windows, Linux and Apple machines in many different browsers including Internet Explorer, Firefox, Opera, Chrome and Safari. That is all the browsers with more than 2% market share.

The popup windows are reused and then closed up when you leave the page so you do not need to close them. You can chose the small size if you have a slow internet connection or want to restrict data flow on a mobile connection. You can also toggle the resolution by double-clicking an image but it may take an extra click to display the picture in the new size on some browsers. With some systems you may be asked to if you wish to allow popup windows as a protection against adverts. Popups are abused by many advertisers and most browsers offer preference settings, extensions or other ways ways to limit the abuse of popups. The same goes for various security suites. In general the default settings should not inhibit popups which follow all the rules properly although you may find that you are asked if will permit use of popups on my sites and it is safe and desirable to say yes. More

More about the Lightbox Effect

Popup Windows do not work well on the modern Smart Phones and Tablets with small screens. Their browsers are based round a tabbed approach rather than implementing separate windows. This makes the popup window approach very clumsy as every popup is actually opened in a new tab and the reloading and automatic closing does not work well or at all. The alternative is an approach with has tended to be called Lightbox which is a technique used to display images and other web content overlayed over the screen with the surround dimmed out. This overlayed window can be closed by clicking outside of it or by a close button.

Ideally the image should display full size when there is space available and shrink to fit the space available. Lightbox was originally the name of a specific JavaScript plugin, written by Lokesh Dhakar and was primarily for images. However, common usage of the term has evolved to encompass all Lightbox-style JavaScript plugins and such effects in general. The technique is now used very widely. The main disadvantage is that it blocks use of the main window whilst a popup can just be moved aside but still be visible. When changing mode the whole page has to be reloaded - this is automatic but in most browsers one is returned to the top. In most cases these options are set once and unchanged thereafter.

Bandwidth Considerations

Link to W3C HTML5 Validator Settings - opens in a new window or tab

Bandwidth and associated data usage is at a premium on Tablets and Smart Phones especially when using a mobile network connection with limited data and high charges. In addition there are still areas where broadband is not available or is at a low speed. The original Popup solution had two image sizes which one could switch between to reduce bandwidth or fit to the screen size. Both methods use small high compression images for the thumbnails (icons) on the page. These are 160x120 pixels and are typically 4.5 kbytes - even that adds up with 20 on a page.

The popup images of 600x450 pixels are typically 45 kbytes and the smaller images are 400x300 pixels and are typically 22 kbytes. In the case of the popup images the only change is in image size. The Lightbox pages however need a further change as most of the images are by default displayed as 'galleries' with back and forward arrows and the Lightbox software automatically preloads the previous and next image. This means looking at a single image triples the download from 45 to 135 kbytes. This gallery option is inhibited when in low bandwidth mode although the image size is not reduced in my current implementation. Try out the various options using the links in the area below and note that one does not get forward and back arrows in the Lightbox with reduced bandwidth mode. As mentioned above, there is also an option to double click an image in Popup mode to change size and bandwidth - this does not automatically reload in the new size but subsequent images are changed - this is deliberate to save bandwidth and avoid glitches.


Home Pauline Howto Articles Uniquely NZ Small Firms Search
Copyright © Peter and Pauline Curtis
Layout revised: 21th May, 2015
Settings - opens in a new window or tab Link to W3C HTML5 Validator