Pre-work Google Products

Back to: Pre-work Google Products

Optimizing and Choosing Images For Your Website

How to use the material in the course

  1. Watch the videos. You can watch in full screen mode.
  2. Download these documents. You may want to print them and write notes.
  3. Open a second tab in your browser, log into your WP site and practice what you learned. Switch between the practice and the video lesson.
  4. Write down questions you have for the Q/A
  5. If at anytime you run into an issue, email info@workbea.com

Summary

Choose images that reflects your brand and company.  Your images should evoke emotion and assist in delivering the message in your content.  Don’t over use images.
Here’s where to get some amazing free images
Unsplash.com
Pexels.com

Do not copy images from the internet as copyright infringement is a serious offense.

 Large images, uncompressed can severely impact the loading time of your website. Slow websites can be penalized by Google. Conversion and bounce rates are impacted.  Most slow sites are due to large image files or animations

  1. File sizes and requirements
  2. Tools
  3. Naming

Specs

Images are technically files that have:

  • file dimensions (width and height, in pixels) depending on how much of the screen your image will take, will dictate the dimensions. You can resize large images to reduce file size
  • file size (Kilobytes KB or Megabytes MB)  This is where site speed is affected.  Large files drag down page loading.
  1. Ideal  image file size to 100-200kb
  2. Reducing image quality (resolution or dimensions)  to 30-50% of the original usually doesn’t make any difference you can pick with the naked eye. Try it and see.
  3. You can drop 2-3Mb images to 80kb-120kb and not really be able to see any change in visible quality.
  4. Before beginning inspect the image for size and dimensions by right clicking on it.  You can determine how much compression you’ll need to do.
  5. Test your website before and after at gtmetrix.com

 

Implementation

Tools and Notes

  1. Tools
    1. https://compressimage.toolur.com/    (for JPEGS)
    2. https://tinypng.com/   (for pngs)
  2. Note:
    1. Tool Ur does a better job of compression, you may want to allow this to convert your png to jpg during the process if you can’t get the png file size down enough
      1. Use the default settings first
      2. Only resize the image if the compression doesn’t reduce the file size enough.  Depending on the size of the area the image will take up, you can reduce the dimensions (see specs). As an example if the image will only take up half of the screen width you can resize 600 – 800px from 1k +++
    2. Tinypng is just for compressing PNG  — if you can’t get under 200kb, convert it to a jpg on the other site for further compression
  3. Keep Original- Downloading compressed image-  Save as a new file so you can keep the original.
  4. Naming-   Name the file in your keywords (words or phrases someone would search on Google for your product/service) ie  A photo of a project might be named projectnameyourservices/product city-of-dunkirk-engineering-in-buffalo-ny

 
 
Download Document