Tip o’ the Week 458 – Grabbing pictures from websites

clip_image001There are plenty of reasons why you might want to get the URL of a picture that is embedded on a web page, and some of them don’t even risk breaching the copyright of the image’s owner or page author!

Legitimate examples might include things like downloading a company logo from its website so you can include it in a PowerPoint slide; try going to just about any major company site and you’ll probably find it’s not straightforward to save the image file. Ditto all sorts of clever pages that might stop you simply saving the picture to your PC.

clip_image003clip_image005Normal behaviour is, mostly, to just right-click on an image and in Edge, you’ll be able to save the picture (or use Cortana to try to give you more details on the image, even trying to guess what’s in the image depending on how straightforward it is – it’s surprisingly good). Ditto, if you’re using Chrome, except you can search Google instead. Try the same on a company logo, and you may find you won’t get the option to save or search.

If you want to grab the actual URL for an image on a web page, the clip_image006foolproof way of getting it is to look at the source – if you don’t mind fishing through maybe a few thousand lines of HTML. It’s not too bad if the image is at the top of the page, but it could prove tedious if elsewhere. In Edge, an easier solution would be to right-click on the image and choose, Inspect element. You may need to press F12 to get these options in your right-click menu. Chrome has a similar thing, simply called Inspect, and can be invoked by CTRL-SHIFT-I.

The Inspect Element funciton in browsers is designed to help web page debugging; it’ll let a user or designer jump straight to the section of a web page’s source, and inspect or even modify the code behind the page.

clip_image008As an example, right-click on the logo on www.microsoft.com and Inspect Element. You’ll see the highlighted section is the bit where the logo sits on the page, and immediately next in the hierarchical representation of the page code, you’ll see the <img> tag, denoting that this pertains to the image itself.

Look for the src= part, double-click on it and you’ll see the URL of the image in an editable text box, meaning you can easily copy that to the clipboard and get ready to paste it wherever you need it clip_image010to go. Try pasting it into a new browser tab just to check that all you’re getting is the logo.

clip_image011

Using a search engine

Of course, there may be easier ways to get an image – using Bing or Google search, for example.

Bing is actually quite a bit better in this regard. When you click on an image in the results from Bing’s Image search, you’ll see a larger preview of the picture along with a few actions you can take – like jump to the originating page; search for other sizes of the same image; use Visual Search to run a query on just some selectable portion of the image; or simply just view it in the browser, thereby opening just that image and showing you the direct URL to it.

In the case of both Google and Bing, if you click on “Share”, then you’ll get a link to the search result of that image rather than the picture itself – so if your plan is to embed the image in another web page or upload it to some other place, then you’ll be frustrated.

clip_image012Another legitimate use of the original URL for a logo might be to change the icon in Teams – assuming you have permissions to Manage a team site (click the ellipsis to the right of the clip_image013name and if you’re suitably perm-ed up, when you click on the Manage Team option, you’ll see a little pencil icon on the logo if you hover over it. Click that to change the picture).

Simply choose Upload picture, paste in the URL of the logo you want to use and you’re off to the races.

Figuratively speaking, anyway. You might have to jigger about with the proportions of the image by downloading it first and editing it elsewhere, as the image will need to be more-or-less square. Built-in icons in Teams appear to be 240×240 pixels in size so you could try to target that if you’re resizing.

Tip o’ the Week 395 – Resizing pictures in Windows 10

clip_image002As smartphone cameras get better, it’s very common to have snaps with dimensions of 4,000 x 3,000 pixels, sized in multi-megabytes – great for capturing a bit more detail, but potentially tricky when handling the photos given the file size as well as their width & height.

This is especially the case if you’re sharing pictures with others – though it does rather depend on how. Email programs usually have ways to reduce the size of images, varying in method but increasingly very integrated to the sending process, and often with little real control of what’s going on. clip_image004Outlook, for example, lets you drag images around by resizing handles, or if you right-click on an inserted image, choose Size and Position then look on the Size tab, you can alter the scale of an image for display purposes.

This doesn’t make the image smaller in the number of bytes it takes up, however – so you might think you’ve made your massive picture a nice thumbnail, only to find it’s still actually 7MB in size. In order to make the image data size get smaller in Outlook, select it by left-clicking, then from the Picture Tools | Format menu, you’ll find a Compress Pictures com  mand that lets you make this image (or every other one in the mail), smaller.

clip_image006If you look on the File menu before doing so, you’ll see the size of the email before, and presuming you’ve hit “Save” after the compression, you can compare the size afterwards too.

The same thing happens in PowerPoints as well – tiny little watermarks on the background of a presentation making the file too big to ever email to anyone. A similar process can radically reduce the size of your presentations by compressing the size of images before saving.

Files

If you have pictures in the file system, there used to be a variety of ways for Windows to offer resize capabilities – one of which was to install the now-defunct Windows Live Photo Gallery, which had a nice wizard to resize images to standard sizes. Now, in Windows 10, there’s no easy, out-of-the-box way of doing it, as the Photos app doesn’t offer resizing and nothing shows up in the desktop / file system mode.

If you have a habit of uploading photos you’ve taken to online forums and the like, some of them will deal with resizing for you (as does Facebook, Yammer etc too), but if they don’t, you may find you’ll need to radically reduce the dimensions of your pic before you can share it.

clip_image008One of the joys of writing Tip o’ the Week is that readers often send their tips just after the mail has gone out – welcome but not always practical to share on, as the same topic might not return for a while. In this example, there will no doubt be a plethora of fave image resizing methods, but a simple one for mortals with less time on their hands is to just go to @Brice Lambson’s site on http://www.bricelam.net/ImageResizer/ and install the quick & simple resizer tool.

Afterwards, right-click within Windows Explorer on your chosen image – or select several and do the same – and resize the image(s) to a given set of dimensions in a trice. Then you’re ready to upload the resulting new pics to your online forum of choice.

clip_image009Remember another  handy tip (as covered in ToW #373 and others) is the Copy as path command – hold SHIFT as you right-click on any file and you’ll see it appear in the drop down list. What this does is copy the exact file and pathname to the thing you’ve just right-clicked on (remember, kids, it works with any file, so uploading docs to a SharePoint is just as relevant) into the clipboard, so you can instantly point the File -> Open dialog on your other app or browser straight to the thing you want.