This document discusses optimizing images for SEO. It notes that images load faster than text, convey emotion, and are powerful for communication. However, large image sizes can slow page loads. The document provides tips for optimizing images, such as resizing versus compressing images, using appropriate file formats, naming images descriptively, filling in metadata, and leveraging content delivery networks and caching plugins. It also provides resources for online and desktop image optimization tools and checking page speeds.

1. Why do you
need to worry
about SEO for
images ?
Optimizing
Images
for SEO
Vision DesignShift@lesliestaller

2. SEO is Good for Sustainability
@lesliestaller
VisionDesignShift

3. Images are Powerful
VisionDesignShift

4. You can process
visual information
60,000 times
faster than
words*
*Master Content Marketing
by Pamela Wilson
Chapter on the power of images here:
https://www.ducttapemarketing.com/use-images-
enhance-content-social-media/
Vision DesignShift

5. The best images add
meaning to the
words you’ve written
—they convey
emotion, evoke an
atmosphere, and
communicate
opinions.
All without words!*
Vision DesignShift

6. The
Challenge of
Images…
Vision DesignShift

7. Page Bloat
VisionDesignShift

8. *Per Tammy Everts’ Soasta post
https://www.soasta.com/blog/page-
bloat-average-web-page-2-mb/
The average
web page is
more than 2
MB in size*
Vision DesignShift

9. *
Vision DesignShift

10. *
Vision DesignShift

11. In today’s mobile-first world
where billions of people are
sharing one resource…
VisionDesignShift

12. What is
optimizing
an image…
What is the
difference
between
resizing and
compressing?
Vision DesignShift

13. Use the Inspector Tool
VisionDesignShift

14. Name your images
Vision DesignShift

15. Fill in the blanks
when you
“Add media”
Vision DesignShift

16. Text follows the line of site…
VisionDesignShift

17. Do Use:
• CSS3 to create
“effects”
• CDN or Content
Delivery Network
• Large, Detailed
Images for
Ecommerce sites
• Caching Plugin
• XML image site map
or include images in
your website map
Vision DesignShift

18. Resources
Vision DesignShift

19. Types of Images
Raster (jpg/jpeg)
Pixel based, generally photograph
PNG (Portable Network Graphics)
Pixel based, photograph or graphic with
transparency
Vector (SVG: scaled vector graphic for web)
Adobe Illustrator files, logos and simple solid
color graphics, icons, fonts
Note: with SVG images, you don’t see an image, you
embed text/code that dynamically creates an image
GIF (Graphics Interchange Format)
These days, mostly used for animated gifs
WebP (not available for all browser yet)
A modern format that provides superior look &
better lossless and lossy compression for images
on the web.
Vision DesignShift

20. Use a CDN or Content Delivery Network
per: Wikipedia
https://en.wikipedia.org/wiki/Content_delivery_network
A content delivery network or content distribution network (CDN) is a globally distributed network
of proxy servers deployed in multiple data centers. The goal of a CDN is to serve content to end-users
with high availability and high performance. CDNs serve a large fraction of the Internet content today,
including web objects (text, graphics and scripts), downloadable objects (media files, software,
documents), applications (e-commerce, portals), live streaming media, on-demand streaming media,
and social networks.
Using a CDN is not a substitute for resizing and optimizing your images
VisionDesignShift

21. Ecommerce sites need well-optimized, large detailed images
Ecommerce UX: 3 Design Trends to Follow and 3 to Avoid from: Nielsen Norman Group
https://www.nngroup.com/articles/e-commerce-usability/
Images have grown in size on product pages, with more detail visible. We all know that a picture is
worth a thousand words and on ecommerce sites, a (good) picture is worth a thousand dollars. In
usability testing, users glean product details from images, including details that aren’t covered in
the product description. Large images can show more detail, and multiple views offer even more
information. Pictures of products in use or in context go a long way to answering customer questions.
While on the topic of images, for good measure we need to reiterate the old finding that pictures that look
like banner ads will be ignored, and that stock photos hurt more than they help. When we recommend big,
detailed photos, we mean photos of the actual products (including photos of products in use or in context).
VisionDesignShift

22. Cloud based image optimizers…
Tinypng
https://tinypng.com
works on jpg, jpeg, png only
free version is super simple
no controls
does not resize images, only optimizes
has a page analyzer, enter url
Image Optimizer
http://www.imageoptimizer.net/
works on jpg, jpeg, gif, png, bmp or tiff
local download option
free version is super simple
select compression from best quality to minimum
you can set a maximum width and height to resize
Compressor
https://compressor.io
works on jpg, jpeg, png, gif, svg
free version is super simple
no controls
does not resize images, only optimizes
Vision DesignShift

23. Cloud based image optimizers…
Optimizilla
http://optimizilla.com
works on jpg, jpeg, png
free version is drag and drop up to 20 images
auto generate compression that you can adjust from a
sliding scale
shows a really nice comparison to original
remember to apply any adjustments before download
does not resize images, only optimizes
Jpeg-Optimizer & resize-photos
http://www.jpeg-optimizer.com
works on jpg, .png, .gif, .bmp, .psd
free version is has the most options
can control maximum size and compression
can convert file formats
has effects you can apply, though with today’s browsers,
much of that can be done using css
Vision DesignShift

24. WordPress Plugins…
Imsanity
does a nice job downsizing large files
WP Smush
Savings noted is minimal. Good news is that it tells you up
front that you get 2x the compression with their paid
version. Bad news, you don’t get the best compression
unless you subscribe. Expensive service.
EWWW Image Optimizer Cloud
Gets great reviews…I did not test as it is a paid service.
They also offer a “self-hosted” version where you need to
install some software on your server.
Tinypng
Mentioned this one earlier as cloud based. The also offer a
WordPress plugin
Imagify (requires free account from https://imagify.io)
Media File Renamer
Allows you to name your images before uploading in plain
English, adds that name to the image title and converts the
file name to correct online protocol…no spaces
Vision DesignShift

25. Other Resources
Downloadable programs
https://imageoptim.com/mac
https://trimage.org (windows)
from WPBeginner.com
Online photo editors to resize images
https://www.picmonkey.com
https://www.canva.com
Test your site load time and tweak
https://gtmetrix.com
https://www.webpagetest.org/
https://webspeedtest.cloudinary.com/
(Cloudinary is specific for images)
A list of page speed test sites:
https://geekflare.com/test-your-website-
load-time/
Vision DesignShift

26. Be sure you have permission to use the
images on your website or other project.
Just because it is online, doesn’t mean it
is free to use.
A few places to find CCO Creative Commons
photos, free to use for anything, business or
personal
• Unsplash: https://unsplash.com
• Pixabay: https://pixabay.com
• Freerangestock:
https://freerangestock.com
• StockSnap.io: https://stocksnap.io
• Public Domain Archive (has list of free stock photo
sites):
http://publicdomainarchive.com/
• Pickup Image:
http://pickupimage.com
Vision DesignShift@lesliestaller