Everyone likes to look at pictures, it’s what makes your website attract readers. In this session for the person who is not a professional graphic designer, Christina Hills will show you some easy tips to make working with images much easier for you. Best practices for the featured image and how to get it to show up correctly when you share on Social Media. How to organize, compress, and store your images in your media library, for faster load times. Plus where to find high quality, low cost (and free) images to make your website stunning. You will walk away with practical tips and tools you can use right away whether you are a business owner, free lancer, or just starting out learning WordPress.” (this talk was given at WordCamp San Diego is aimed at beginner/intermediate WordPress Users)

1. @christinahills #wcsd

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

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

4. @christinahills #wcsd
People Like Pictures…

5. Working With
Color
With Christina Hills
Pictures are Like Candy!

6. Working With
Color
With Christina Hills
Pictures are Like Candy!

7. @christinahills #wcsd
Great Images
Give your
Website That
“WOW!”

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

9. Find Great Images for
Your WordPress Site
1

10. @christinahills #wcsd
Don’t Just Take Google Images!
Just because you find an image on Google
doesn’t mean you can use it!

11. @christinahills #wcsd
Use “Google Advanced Image Search”

12. @christinahills #wcsd
Google “Advanced Image Search” Usage Rights

13. @christinahills #wcsd
Use Your Camera or Stock Photography Sites

14. @christinahills #wcsd
Always
At the Image Usage Rights

15. @christinahills #wcsd
Common Image License Types
• Royalty-free
• Rights-managed
• Editorial Use Only
• Public Domain
• Government Websites

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

17. @christinahills #wcsd
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

18. @christinahills #wcsd
“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

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

20. @christinahills #wcsd
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

21. @christinahills #wcsd
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

22. #wcsd@christinahills
Find Pixabay
Images
Inside Your
WordPress
Admin
https://wordpress.org/plugins/pixabay-images/

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

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

25. @christinahills #wcsd
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

26. @christinahills #wcsd
What is “Heavy” - (Weight)
2508px in Y
2408px in X 800px in X
980 in Y
2408 pixels x 2508 pixels = 392kb
800 pixels x 980 pixels = 231kb

27. #wcsd@christinahills
Reduce your
Image
Weight by
Compressing
your Images

28. @christinahills #wcsd
Smaller File Size After Compression
2508px in Y
2408px in X 800px in X
980 in Y
2408 pixels x 2508 pixels = 392kb
800 pixels x 980 pixels = 231kb
Compressed: 800 pixels x 980 pixels = 56kb

29. #wcsd@christinahills
Compress
Images
Outside of
WordPress
With
Tinypng.com

30. #wcsd@christinahills
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

31. #wcsd@christinahills
Multiple Sizes with Image Uploads

32. @christinahills #wcsd
You Want
Images with
Right Size
(Dimensions)
&
Small Weight
(Compression)

33. Organize Your Images3

34. @christinahills #wcsd
Media Library
(grid view)

35. @christinahills #wcsd
Media Library
(list view)

36. @christinahills #wcsd
Always Add an
Image from
INSIDE
your Page or
Post

37. @christinahills #wcsd
It’s Easier to Find Images Later
when they are “Uploaded to this Post”

38. @christinahills #wcsd
Picture is Attached to the Post/Page

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

40. #wcsd@christinahills
Keep Your Media Library Organized

41. #wcsd@christinahills
“Enhanced Media Library” Plugin
https://wordpress.org/plugins/enhanced-media-library/

42. #wcsd@christinahills
Create “Media Categories”

43. #wcsd@christinahills
Add Image to a Media Category

44. #wcsd@christinahills
Sort With Drop Down Categories
https://wordpress.org/plugins/enhanced-media-library/

45. #wcsd@christinahills
Change Categories
https://wordpress.org/plugins/enhanced-media-library/

46. #wcsd@christinahills
“Enhanced Media Library” Plugin
https://wordpress.org/plugins/enhanced-media-library/

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

48. @christinahills #wcsd
Many Themes Use the Featured Image

49. #wcsd@christinahills
Plugins Can Also Use
the Featured Image
(“Related Posts” Plugin uses the
Featured Image)

50. @christinahills #wcsd
Always Set the Featured Image Inside WP

51. @christinahills #wcsd
“Featured Image” Shows with Social Media Sharing

52. @christinahills #wcsd
Sometimes the Featured Image is Wrong

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

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

55. Create Professional
Graphics with Canva.com
5

56. @christinahills #wcsd
Select The Design Type (Shape)

57. @christinahills #wcsd
Premade Layouts/Designs in Canva

58. @christinahills #wcsd
Free and Paid Stock Images inside Canva

59. @christinahills #wcsd
Some Examples…

60. @christinahills #wcsd
Create Ads Blog Post Graphics

61. @christinahills #wcsd
Simple FlyersTemplate

62. @christinahills #wcsd
Ebook CoverTemplate

63. @christinahills #wcsd
Canva.com

64. #wcsd@christinahills
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)

65. Speed Up Your Images with
a Content Delivery Network
6

66. @christinahills #wcsd
Image courtesy of GTmetrix (https://gtmetrix.com/)
CDN = Content Delivery Network

67. @christinahills #wcsd
What CDN Does
Image courtesy of GTmetrix (https://gtmetrix.com/)

68. #wcsd@christinahills
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

69. #wcsd@christinahills
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/ )

70. Use Image Plugins
& Other Handy Tools
7

71. #wcsd@christinahills
Image
Gallery
Plugins
https://wordpress.org/plugins/foogallery

72. #wcsd@christinahills
Interactive
Images with
“Draw
Attention”
https://wordpress.org/plugins/draw-attention/

73. @christinahills #wcsd
Browser Extension: Colorzilla
http://www.colorzilla.com

74. @christinahills #wcsd
Browser Extension: Colorzilla
http://www.colorzilla.com

75. #wcsd@christinahills
Browser Extension: Page Ruler
Google: “page ruler extension”

76. #wcsd@christinahills
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….

77. And Have Fun!
Have Fun !

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