615 – Zooming images on webpages

clip_image002There are a variety of ways to zoom into content on your PC, maybe so you can read the tiny text or perhaps look for details in an image. If you have a physical mouse, then it will almost certainly have a scroll wheel or a touch-sensitive scroll-pad which is used to speed through all those LinkedIn posts that clutter up your feed of the good stuff. If you also hold the CTRL key down while moving the scroll-thing up and down, then the Office doc or web page you’re looking at will zoom in and out as well. Pressing CTRL-0 in the browser will quickly reset your view back to 100%, in case you’ve scrolled off the edge of the world.

If you’re using a trackpad rather than a rodent, or have a proper touch-screen, pinching with thumb and forefinger might well do the same thing, though exactly how will be determined by your machine’s settings.

Annoyingly, some websites (like eBay, many estate agents, photo galleries etc) have a habit of not zooming into the image when you make the browser try to scale the page up; they might even make the menus and surrounding text massive, while keeping the image the same size.

clip_image004Sometimes, the page itself is scaling the image down to fit a specific pixel size – so it could be taking a 4000×3000 pixel image but displaying it at 800×600. In order to see the fine detail in the image, maybe you need to open it away from the page it’s on, so you can display it full-size.

A simple way to over-ride the issue might be to right-click on the image and choose to clip_image006open it in a new tab, thus freeing the graphic from the strictures of the page it’s on and allowing you to zoom in as you please. In some cases, the image you see here will be higher in resolution than the one which was on the page, due to the aforesaid scaling (especially true on eBay images, where often the source is many times larger than the view eBay presents). Even simpler, you may find that clicking on the image on a web page will open the full-size version of it, and that will allow you to zoom in even further.

Some sites (like image libraries or photographers’ websites) won’t let you right-click on an image to save it or do anything. But there is another way… If you care to delve into the Developer Tools section in Edge (or Chrome) then you’ll get a frankly bewildering array of tools that let you peek into how the content of the page is set out and even how the site is performing over the network.

Of particular interest here, though, is to be found under the Elements tab – this shows a hierarchical representation of the code behind the page, with sections that can be expanded and collapsed by a little arrow to the left of each. [Browsers other than Edge or Chrome may behave differently and call it something else – if you’re weird enough to still use Firefox, it’s Inspector vs Elements].

Normally, you’d be looking somewhere in the body section, and when you hover your mouse over an element, it will highlight that section on the page so you know you’re dealing with the right one. You’ll probably need to drill in to quite a number of <div> or <table> tags to find the one you want, though if you right-click on a part of the page and choose Inspect, it might jump straight to that particular clause . Try it on a fairly simple website and you’ll get the gist quickly.

clip_image007

If you find an image file listed in the site coding, hover that section and you should see the properties of the image (depending on how it’s encoded); click the Current source URL and it will launch that image in its own tab.

Press 12 again to close Developer Tools and return to normal browsing.

596 – Sorry for the eye-chart

clip_image002Before The Event, you’ll probably recall being presented at in a stuffy airless room, mainlining caffeine to stave off the postprandial doldrums in attentiveness. “On this slide…”, the presenter might have said, before reading out all the text that’s now being shown on a slightly-too-small screen.

Some would apologize for the fact that the chart/table of data/timeline with 6pt text annotations etc, was too small for the audience to read. “I know this is an eye chart, but…”

So hurray when all such in-person meetings were banished to Teams or Zoom if you’re lucky, or if you’ve been a horrible person in a previous life, you may have inflicted upon you Webex, Amazon Chime or whatever Google calls Hangouts these days.

When presenting in Teams, there are some simple best practices to follow; some have been covered previously in ToW 576, with more online elsewhere.

clip_image004As an attendee, however, the Teams UI can get a bit busy if you want to follow online chat and see other attendees as well as the content being presented. You can make life a bit easier by going full-screen, from the view control in the top left.

As well as tweaking the layout, and hiding/showing components like chat or the participant list, you can zoom the Teams client in and out by using CTRL = and CTRL – (or CTRL + / – on your numeric keypad if you have one), or by holding CTRL and moving the mouse wheel up and down, if you have a suitably-equipped rodent connected. This method, however, just makes the Teams UI get bigger and smaller, so although it might increase the size of the pane being used to present content, it is a marginal gain.

clip_image006Enter, a greatly useful tip espoused by Belgian usability maestro, Ingmar Boon – click on the content being shown in a meeting, then use CTRL+mousewheel (or if you have a Surface device and the touchpad is enabled then use the pinch in & out gesture on the touchpad). Teams will now let you zoom in & out and pan around the content being shared. C’est manifique!