Years ago websites were accessed only via desktop computers or laptops with similar display properties. The emergence and growth trends for tablets and smartphone has upended this dominance and made media display a more complex problem. In this course you are being introduced to the production and distribution of educational graphics online so this is a topic to know about but no necessarily something tackle at this point.
There are three problems associated with displaying graphics on different devices.
- Size: while 1800 pixel wide image may look great on a desktop monitor they will only be partially displayed on a smartphone or some tablets, requiring scrolling to view.
- Bandwidth: in many cases the file size of the large image that can’t be displayed properly on a smartphone also makes a dent in the data plan for that phone. Additionally students in remote areas with poor internet connection may be disadvantaged.
- Design: while small screens are typically held closer to the face, the actually viewing angle of a screen (ie. how its relative size appears to the user) varies. For this reason an image that is appropriate for a desktop monitor may be too detailed to be useful on a smartphone.
There are existing and emerging methods to deal with these issues. Some of the current methods to handle all of the issues above require fairly complex use of JavaScript or server-side programming. We can however help images to scale properly, resolving at least issue one above.
To do this we can use styles within the image tag (in a larger website you might set these styles in a separate style sheet). At the same time we have to omit the static width and height properties we might have grown accustomed to using. Of course, in WordPress this must all be done using the ‘Text’ tab in the editor. Here is an example.
<img src="http://3bees.ca/utility/images/jdf.jpg" style="max-width:100%; height:auto;" alt="A Scaling Image" title="A Scaling Image" />
This picture should be 1200 pixels wide, but it will scale to fit whatever space is allocated it. This means it will fill the width of the window or it will fit the ‘div’ or table cell it’s placed in within a web page.
When you upload an image to the media library in WordPress it generates several sizes of the image and serves different versions depending on the need. For this example the images are all on a different server. Go to this test page and reduce the size of your browser window to see the image scale.
Here is the same image with static dimensions given to it.
<img src="http://3bees.ca/utility/images/jdf.jpg" style="width:600px; height:450px;" alt="A Non-scaling Image" title="A Non-scaling Image" />