How to Make Your WordPress Site Come Alive with Pictures

@christinahills #wcsd
Christina Hills
WordPress Coach & Teacher Since 2008

#wcsd@christinahills
Christina Hills
Visual Effects
Artist
 Star Wars
 E.T. the Extra-Terrestrial
 Jurassic Park

People Like Pictures…

Working With
Color
With Christina Hills
Pictures are Like Candy!

Great Images
Give your
Website That
“WOW!”

Today I’m going to give you..
Things You Can Do to
Make Your Site come
Alive with Pictures in
WordPress!
7

Find Great Images for
Your WordPress Site
1

Don’t Just Take Google Images!
Just because you find an image on Google
doesn’t mean you can use it!

Use “Google Advanced Image Search”

Google “Advanced Image Search” Usage Rights

Use Your Camera or Stock Photography Sites

Always
At the Image Usage Rights

Common Image License Types
• Royalty-free
• Rights-managed
• Editorial Use Only
• Public Domain
• Government Websites

Royalty-free (RF)
• You can use the image multiple times
without paying a royalty.
• Examples:
– iStock
– Shutterstock
– BigStock
– and many more…

Rights-managed (RM)
• You are granted one-time use of the image
• Pricing typically varies depending on the usage
format, usage specs, target market, etc.
• You pay each time you want to use the picture.
• Typical license for celebrity and “exclusive” photos
• Example:
– Getty Images

“Editorial Use Only” Images
Can only be used to illustrate a news-related story – not to sell or
promote a product, service or idea (source: Shutterstock)
• Used to support text in your news article
• Not for advertisements / not selling stuff
Typical Editorial Use Only Images:
• a celebrity
• a trademarked logo or service mark

Public Domain
• No copyright restrictions:
– Copyright expired
– Copyright forfeited by
creator/owner
• Public domain images can be
used for free without any
limitation

Government Websites Images
• “…generally not subject to copyright in the
United States and there is generally no copyright
restriction on reproduction, derivative works,
distribution, performance, or display of a
government work.”
Read more (including exceptions) at
https://www.usa.gov/government-works

Places You Can Get Stock Images
Stock Photos (Paid) Stock Photos (Free)
- www.istockphoto.com
- www.shutterstock.com
- www.123rf.com
- www.canva.com
- www.bigstockphoto.com
- www.depositphotos.com
- www.gettyimages.com
- www.freeimages.com
- www.freefoto.com
- www.morguefile.com
- www.canva.com
- www.pixabay.com
- www.unsplash.com
- www.stocksnap.io
- commons.wikimedia.org

Find Pixabay
Images
Inside Your
WordPress
Admin
https://wordpress.org/plugins/pixabay-images/

https://wordpress.org/plugins/instant-images/
Find
Unsplash
Images
Inside Your
WordPress
Admin

Size Your Images
for WordPress
(“Big” vs. “Heavy”)
2

What is “Big” - (Dimensions)
2508px in Y
2408px in X 800px in X
980 in Y
2408 pixels x 2508 pixels
800 pixels x 980 pixels

What is “Heavy” - (Weight)
2508px in Y
980 in Y
2408 pixels x 2508 pixels = 392kb

Reduce your
Image
Weight by
Compressing
your Images

Smaller File Size After Compression
2508px in Y
980 in Y
Compressed: 800 pixels x 980 pixels = 56kb

Compress
Images
Outside of
WordPress
With
Tinypng.com

Plugin: WP Smush it
https://wordpress.org/plugins/wp-smushit
https://wordpress.org/plugins/shortpixel-image-optimiser
Plugin: Short Pixel Image Optimizer
Compress with Plugins
https://wordpress.org/plugins/imagify https://wordpress.org/plugins/tiny-compress-images
Plugin: Imagify Plugin: Compress JPEG & PNG

Multiple Sizes with Image Uploads

You Want
Images with
Right Size
(Dimensions)
&
Small Weight
(Compression)

Media Library
(grid view)

Media Library
(list view)

Always Add an
Image from
INSIDE
your Page or
Post

It’s Easier to Find Images Later
when they are “Uploaded to this Post”

Picture is Attached to the Post/Page

Give Pictures Good Filenames and Titles
IMG-78902345.jpg (BAD name)
vs.
christina-hills-photo.jpg (GOOD name)

Keep Your Media Library Organized

“Enhanced Media Library” Plugin
https://wordpress.org/plugins/enhanced-media-library/

Create “Media Categories”

Add Image to a Media Category

Sort With Drop Down Categories

Change Categories

Leverage the “Featured Image”
For Your Blog & Social Sharing
4

Many Themes Use the Featured Image

Plugins Can Also Use
the Featured Image
(“Related Posts” Plugin uses the
Featured Image)

Always Set the Featured Image Inside WP

“Featured Image” Shows with Social Media Sharing

Sometimes the Featured Image is Wrong

Use the Sharing Debugger to have
Facebook re-fetch the Image
(https://developers.facebook.com/tools/debug/)

Recent Posts with
Thumbnails
Sidebar Widget Uses
the “Featured Image”
https://wordpress.org/plugins/recent-posts-widget-with-thumbnails

Create Professional
Graphics with Canva.com
5

Select The Design Type (Shape)

Premade Layouts/Designs in Canva

Free and Paid Stock Images inside Canva

Some Examples…

Create Ads Blog Post Graphics

Simple FlyersTemplate

Ebook CoverTemplate

Canva.com

Other Online Image Creators/Editors
• iPiccy (https://ipiccy.com)
• Pixlr (https://pixlr.com)
• BeFunky (https://www.befunky.com)
• Fotor (http://www.fotor.com)
• Picmonkey (https://www.picmonkey.com)

Speed Up Your Images with
a Content Delivery Network
6

Image courtesy of GTmetrix (https://gtmetrix.com/)
CDN = Content Delivery Network

What CDN Does
Image courtesy of GTmetrix (https://gtmetrix.com/)

Benefits of Using a CDN
• Faster loading time
→Better for SEO as Google
favors faster sites
→Better user experience
(People are not frustrated
by slowness)
→Extra security in case one
server goes down

Popular CDNs for WordPress Sites
• Cloudflare (https://www.cloudflare.com/ )
• Jetpack Photon (https://www.jetpack.com/ )
• MaxCDN (https://www.maxcdn.com/ )
• KeyCDN (https://www.keycdn.com /)
• Amazon CloudFront
(https://aws.amazon.com/cloudfront/ )

Use Image Plugins
& Other Handy Tools
7

Image
Gallery
Plugins
https://wordpress.org/plugins/foogallery

Interactive
Images with
“Draw
Attention”
https://wordpress.org/plugins/draw-attention/

Browser Extension: Colorzilla
http://www.colorzilla.com

Browser Extension: Page Ruler
Google: “page ruler extension”

Recap of Working with Images
1. Find Images with Rights from Stock Photo Sites (or Use Camera)
2. Size Images: Dimensions vs. Heaviness and Compression
3. Organize Your Images in the Media Library
4. Leverage the “Featured Image” for Social Sharing
5. Create Professional Graphics with Canva.com
6. Speed Up Image Loading with a CDN (Content Delivery Network)
7. Use WordPress Plugins and Other Image Tools
And always….

Connect with Christina Hills
Twitter: @christinahills - Email: christina@websitecreationworkshop.com
This presentation will be available at:
www.WebsiteCreationWorkshop.com/wcsd2018

How to Make Your WordPress Site Come Alive with Pictures

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

How to Make Your WordPress Site Come Alive with Pictures