Using Images in WordPress Like a Pro without Being a Graphic Designer

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

#wcrs@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!”

Don’t Just Use 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

Where 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

Always
At the Image Usage Rights

Image Rights
• Always make sure you have permission to
use an image. Or, take your own pictures.
• Using someone else’s image without
conforming to its license/terms of use is
considered a Copyright Infringement!

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

Images on Government Websites
• “…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 about exceptions) at
https://www.usa.gov/government-works

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

Preparing Images for WordPress

What is “Heavy” ?
(File Size - Weight)
What is “Big”?
(Width and Height)
vs

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

Size Your Images to the
Right Size
(Dimensions)
&
Small Weight
(Compression)

You Don’t Need to Have Photoshop
to Resize Images!

Change the Dimensions - “Preview” (Mac)

Change the Dimensions –
“Microsoft Paint” or “Photo” (Windows 10)

Then Speed
up your
WordPress
Website by
Compressing
your Images

Compressed After Resized
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/ewww-image-optimizer
Plugin: EWWW Image Optimizer
Compress with Plugins

Plugin: Imagify
https://wordpress.org/plugins/imagify https://wordpress.org/plugins/tiny-compress-images
Plugin: Compress JPEG & PNG
Compress with Plugins

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 Blog Post

Give Pictures Good Filenames and Titles
IMG-78902345.jpg (BAD name)
vs.
photo-christina-hills.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

Using a Content Delivery Network

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 (not frustrated by
slowness)
→Faster sites increase conversion rate
→Extra security in case one server goes down

Plugin: Jetpack “Photon”
• CDN FREE with Jetpack
• Automatically starts serving all your images and
photos from Jetpack’s servers.
• Automatically resizes images for mobile devices
further improving speeds.
• Related Posts is Delivered CDN
https://jetpack.com/support/photon/

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

Using the “Featured Image”

Many Themes Use the Featured Image

Always Set the Featured Image Inside WP

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

The “Featured
Image” Appears
on Facebook
when you share

Sometimes the Featured Image is Wrong

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

Creating Professional Graphics
with Canva

Select The Design Type (Shape)

Premade Layouts/Designs in Canva

Free and Paid Stock Images inside Canva

Canva.com

Free Online Image Editors
• PicMonkey: (http://www.picmonkey.com/)
• iPiccy (https://ipiccy.com/)
• Pixlr (https://pixlr.com/)
• BeFunky (https://www.befunky.com/)
• Fotor (http://www.fotor.com/)
• Polaar(https://photoeditor.polarr.co/)

Color Combination Tool
http://Coolors.co

Get Professional Color Combinations
http://Coolors.co

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

Browser Extension: Measureit
https://frayd.us/extensions/measureit/

Recap of Working with Images
1. Find Images from Stock Photo Sites or Use Camera
2. Prepare Images: Dimensions vs. Heaviness and Compression
3. Organize Your Images in the Media Library
4. Use a CDN (Content Delivery Network) for Fast Images
5. Leverage the Featured Image for Facebook
7. Create Professional Graphics with Canva
8. Use WordPress Plugins and Other Image Tools
9. And always….

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

Using Images in WordPress Like a Pro without Being a Graphic Designer

Recommended

Recommended

More Related Content

Similar to Using Images in WordPress Like a Pro without Being a Graphic Designer

Similar to Using Images in WordPress Like a Pro without Being a Graphic Designer (20)

Recently uploaded

Recently uploaded (20)

Using Images in WordPress Like a Pro without Being a Graphic Designer