Adding Images

Finding Images

In Google, there are a few tricks for finding better images...

  • Images > Settings > Advanced Search...

    • Aspect Ratio - Choose a tall picture or a wide one for different places on your slides or webpages

    • Colour - Choose the transparent option to avoid using a square or rectangle pictures all the time.

    • Type of Image - Choose "animated" to find a moving gif (use sparingly)

    • Type "logo" or "hand drawing" for example next to your search term for a graphical representation.

There are also some helpful sites to try such as https://www.freepik.com/

Helpful Websites/Apps

Blush/Openpeeps.com - https://blush.design/ - search by category or artist. Editable options available.

The Snip Tool

I use this multiple times each day. I find it the quickest way of getting images from my screen.

Try the Snip Tool if you're not familiar with it https://support.microsoft.com/en-gb/help/13776/windows-10-use-snipping-tool-to-capture-screenshots


Adding Images

  • When you've found the image, right click it and "open in new tab"

  • Grab the URL from the new tab

  • Insert or Edit Image in a LS page and then insert the URL

Editing Images

Shaped cropping, resizing, recolouring and making backgrounds transparent can all be tricks that improve the quality of an image.

Try https://pixlr.com/x/ for an online, browser hosted free editor.

Crop/edit a gif - https://ezgif.com/crop

Great images can be made by building the component parts in Google Slides or PowerPoint and then using the Snip tool to make a new image for including elsewhere.

Resizing Images

As with most design, use of the right image size will often go unnoticed however wrong image sizes can often disrupt the flow of a page and distract the user from the main content.

In addition to centring an image on the page, this trick below can do two things; it can resize your image to fit on the page better but also respond to changes in screen size and type of gadget being used to read it.

Once the image is uploaded to a webpage, use the "Edit HTML source" button (<>) to expose the code that represents the image. Then find the section that controls the size and replace the width number (usually in pixels by default) to a percentage. Remove the height number. See the before and after code below with changes in red [this does not always work for embedded objects but use of a ratio calculator can help establish more preferable width and height numbers].

This example uses 100% but you can downsize to whatever % works for your image. The one above is at 50%.

<p><span style="font-size: 1rem;"><img src="https://moodle.marjon.ac.uk/draftfile.php/3667/user/draft/712142103/quiztime-1.gif" width="754" height="521" /></span></p>

<p><span style="font-size: 1rem;"><img src="https://moodle.marjon.ac.uk/draftfile.php/3667/user/draft/712142103/quiztime-1.gif" width="100%" /></span></p>

Google Draw

  • Great to use because it embeds nicely with no border and once embedded you can share the original file edit link with others and/or make any edits and there's no need to re-upload it.

  • Use it for module graphics, assessment outlines, or just for adding images with text and graphics e.g. arrows to a page.

  • For the image below I grabbed the embed code from google and added it to this page. I then added the [width="60%"] bit of code as seen here ...... <img src="https://docs.google.com/drawings/d/e/2PACX-1vTOq0nOX8j_vDvlo-OZ63u7ocI-epTV4dDbqGsu7MI60Rwilp2LPPlftOVn1lpFYyJYIhf63K5f2YcS/pub?w=957&amp;h=724" width="60%">

  • You can download this graphic below by sticking this URL in the browser - https://docs.google.com/drawings/d/1naMH9l6N0CJcU8OdALy-dJXYn-tNVcwZEA63dFNobdk/copy

Google Slides

  • Better than Draw (see above) because the hyperlinks work better, but I can't quite get rid of the black lines (yet)

  • Two options below. the first is the standard embed code and then I worked out how to remove the toolbar. I did two things to make this work below - Grab the embed code and add it and it's good to go but

  • I got rid of the toolbar at the bottom by adding [rm=minimal] to the embed code after the delay and like this.......<p style="text-align: center;"><iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQsRb0Rd3ch632Mi-91ujPV1m6TCfGT1CIghs9CZr6aY915Pl6qIO1dDUq25KsPaZSNA2hM0YfLz6pn/embed?start=true&amp;loop=true&amp;delayms=3000&amp;rm=minimal" frameborder="" width="960" height="569" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" style="font-size: 0.9375rem;"></iframe></p>

  • I changed the Page Setup of the original slide in Google Slides to "custom"...960 x 569 pixels

Copy to share