Good photos, logos, icons and other images on a site are key to a website's appeal, popularity and conversion rates. Rich Plakas will review uploading images in pages and posts, including the media settings, size options, as well as default image sizes – resizing images, creating thumbnails and the value of the alt tag and captions for SEO. 

 The presentation will also demonstrate how to use the WordPress built-in image alignment features and help attendees understand how images interact with the text; and will include wrapping text around images, changing margins, padding and borders around the images within the content and when and how to use the ‘Featured Image’ option. Photoblogs and Galleries will also be discussed, as well as some of the best plugins to use to manage and/or display images. We will close with a Q&A. This session is designed to support those new to WordPress and is being repeated based on membership requests. Bring your laptops and your questions. See you there! Reminder: As this is a class designed for those new to WordPress. We will not be discussing advanced image handling techniques. If you have advanced questions please save them for the Q&A at the next general WordPress Meetup. Thanks!

1. Image Handling:
Understanding the Basics of WordPress
Media
Rich Plakas
@RichP on Twitter
www.RichPlakas.com

2. A Little Bit About Me
★ IT Background going back to the days of DOS &
Novell
★ Began “messing” with WordPress in 2007.
★ Switched my focus from IT to WordPress in 2011
★ I was tired of doing Windoze Updates & changing
Printer Toners :-)
★ Joined the Austin WordPress Meetup Group In 2012.
★ I love BBQ & Craft Beer.

3. A Little Bit About Me
★ I run a WordPress Agency called Connected Systems
★ We help businesses with all aspects of their Digital
Assets including:
★ SEO/SEM
★ Analytics and Website Optimization
★ Pay-per-Click Ads(Google Adwords & Facebook Ads)
★ Social Media
★ Ecommerce (WooCommerce)
★ Email Newsletters

4. Why Do I Need Images on my Website?
"A Picture is Worth a Thousand Words”
(Most of) our brains process visual content (images)
faster and retention of this visual content tends to be
higher as well.

5. Why Do I Need Images on my Website?
Which Post Looks Better?

6. Where Do I Find Images?
Besides taking or creating your own pictures,
there is a vast collection of websites offering
photos that you can place on your site.
Many are free, and others charge fees.
Here are some options for y’all to look at:

7. Free Image Websites
Flickr(with Creative Commons filter)
Stock Vault
Dreamstime
Stock Xchng
Freebie Images
Photogen
Google Image Search (with Creative Commons filter)
More image websites listed at:
http://handsonwp.com/knowledge-
base/tutorial/finding-images/

8. Creative Commons Pictures
Flickr
https://www.flickr.com/groups/creative_commons-_free_pictures/pool/

9. Creative Commons Pictures
Google Image Search with “Labeled for reuse”
Filter enabled:

10. Paid Image Sites
PhotoDune
Dollar Photo Club
Shutterstock
Dreamstime
Fotolia
DepositPhotos
PhotoSpin
iStockPhoto/Getty*
(not recommended by me)

11. Adding Images
The Media Manager was much improved starting with
WordPress 3.5, You could now insert multiple images at
once, create multiple galleries per post with drag-and-drop
reordering, inline caption editing, and simplified controls.
The new media manager also provides an easier way for
users to insert videos into their posts. Users can now drag
and drop images and video files from their desktops directly
into each post. Adjusting the settings for each image —
such as adjusting image size — has also been streamlined.
And importing and embedding multimedia from other Web
sites, like YouTube, has been eased as well.

12. Changes to Image Handling in
WordPress 3.9 & 4.0
WordPress 3.9 Changes:
“Edit images easily
With quicker access to crop and rotation tools, it’s now much easier to edit your
images while editing posts. You can also scale images directly in the editor to
find just the right fit.”
“Drag and drop your images
Uploading your images is easier than ever. Just grab them from your desktop
and drop them in the editor.”
WordPress 4.0 Changes:
“Explore your uploads in a beautiful, endless grid. A new details preview makes
viewing and editing any amount of media in sequence a snap.”

13. How to Manage Photos in WordPress Library
Size Your Photos Before Uploading
Don’t slow down your site’s performance with extra large images.
Resize and descriptively name image files, before uploading them to the
WordPress Media Library.
Pro Tips:
Name images with descriptive keywords(SEO)
Conform to the exact measurements indicated by the theme or plugin
specifications for fixed sized elements like sliders.
For standard website display, make sure your resolution is set at 72 dpi.
(However if you may need high resolution (220 ppi, 264 ppi or 326 ppi) for retina-
display devices.)
Common image file types are jpeg, jpg, or png. Use jpg for better
compression/faster page loads.
*png is generally used when a transparent background is needed such as a logo.

14. Using the WordPress Media Manager to Optimize
SEO
Having your images indexed by search engines helps get traffic to your site.
Be sure to take the time to correctly label each image for effective SEO.
The new Media Manager makes image optimization much easier.
SEO Tips
In Edit Media, insert keyword-rich words in the Title, Caption, Alt Text, and
Description.
Separate words in the Title using spaces, not like — dontdothis.jpg
Search engines, such as Google, do not know what is in your image(yet). They
rely on your filename, titles, alt and descriptions to index your picture.

15. A Word About Accessibility
Using descriptive ALT tags helps web users who might be visiting your
website via an Accessibility platform such as a screen reader.
A visually impaired visitor to your website will not be able to see your
images, but the screen reader will tell them what it says in the ALT text.
A good alt tag of this image
to the right might be:
“Screenshot of the
WordPress 4.3 Media
Library Screen showing
some of the available
images in the Library”

16. Opening the Media Manager
Before you open your Media Library, position
your cursor on the place you want the image to
appear in your page or post and click.
Go to the Add Media button at top left of your
editing screen.

17. The Media Manager

18. The Media Manager

19. Upload New Media

20. Uploading and Selecting Files
Once the Image files are uploaded to your WordPress Media
Manager, you will automatically be switched over to the
Media Library screen where you’ll have access those newly
uploaded files (along with previously uploaded images).
The files you’ve just uploaded will indicate that they are
“Selected” meaning that the image or images will be check-
marked and highlighted within a blue box.
In addition, you have the choice of showing only the files
uploaded to that particular post by using the pull-down menu
in the top left corner.
When you open the Media Manager, you will be shown all
the image files in your Media Library.

21. Inserting Media Into A Post or Page

22. Inserting Media Into A Post or Page
If you wish to use one of the images in the library, click on the image.
When an image is selected and active, you will see that it has a blue border
around it and a check-mark in the upper right corner.
Adding Meta Information
The selected image will appear in the right hand sidebar under ‘ATTACHMENT
DETAILS.’ You can add meta information and captions in this area.
The ‘ATTACHMENT DISPLAY SETTINGS’ area is where you indicate the
image alignment on the page or post and the size options — Thumbnail,
Medium, Large or Full size.
Once you have filled out the descriptions and made the alignment and size
choices, click the blue ‘Insert into page’ button in the lower right hand of the
page.
The image will then be inserted into your post or page.

24. Inserting Media Into A Post or Page
Click ‘Publish’ or ‘Update’ and the image positioned in the text on your editing
screen will appear on the published page or post .
Images in the editing screen can be repositioned by drag-and-drop.
Images Can be resized by clicking on the image once and then dragging a
corner.

25. Inserting Media Into A Post or Page
This is how the image will look on the published page:

26. Editing an Image on a Post or Page
To edit an image, move your cursor over the image
and click on it. The image toolbar will popup.

27. Image Details

28. Setting the Featured Image for a Post
Depending on your Theme, the featured image of a post may be
displayed on your sites home page. If you put your blog post on
Facebook or other Social Media sites the will try to pull in this
image as well.

29. Setting the Featured Image for a Post

30. Setting the Featured Image for a Post
On the lower right hand side of your post edit page you will find
“Featured Image”.

31. Setting the Featured Image for a Post
Click on “Set Featured Image” and choose or upload an image
file like we did previously for Post Images.

32. Setting the Featured Image for a Post
If your image dimensions are less than 200px x 200px you will
see this warning message about Facebook and other Social
Media sites not picking up the image.

33. Live Demo

34. WordPress Galleries
“Image galleries are a great way to share groups of
pictures on your WordPress site. The Create Gallery
feature of the WordPress media uploader allows you
to add a simple image gallery to pages or posts on
your site.” *From the WordPress Codex

35. WordPress Galleries

36. WordPress Galleries

37. WordPress Galleries

38. WordPress Galleries

39. WordPress Galleries
Example of WordPress Gallery using Thumbnail Option

40. WordPress Galleries
This is how the picture is displayed using the “Media” option

41. WordPress Galleries
This is how the picture is displayed using the “Attachment” option

42. WordPress
Galleries
Live Demo

43. Using a Lightbox In WordPress
As you have seen in the previous slides, the way WordPress display
images clicked from a gallery is not ideal. Both require the user to click
the browser back button to get back to the original post.
There are 2 simple solution to this. One is to use a Light Box plugin.

44. Using a Lightbox In WordPress

45. Using a Lightbox In WordPress

46. Using a Lightbox In WordPress

47. WordPress Jetpack Carousel
An alternative to using a light box plugin is to use the Jetpack Carousel
feature.
Jetpack is a free plugin from WordPress that contain the equivalent
functionality of about 40 plugins!

48. WordPress Jetpack Carousel
Once inside the Jetpack screen, click on “See the other 27 Jetpack
features” and click on the “Photo and Videos” category filters.

49. WordPress Jetpack Carousel
The Image Carousel setting can be found with your Media Settings.

50. WordPress Jetpack Carousel
This is is how the Carousel displays an image that was clicked on from the Gallery.

51. Lightbox
Live Demo
As you can see both the a light box plugin or the Jetpack
Carousel give the user on your website a much better
image viewing experience!

52. Third Party Image Galley Plugins
One problem with the built in WordPress Gallery functionality is that it’s NOT Mobile
Responsive (at least not without you doing some custom CSS coding).
This is probably the point where you will want to investigate and use a 3rd Party Gallery Plugin.
As shown in the examples below the 3rd Party Gallery Plugin will make the gallery images
larger and put them into a single row for easier viewing on a small screen.
WordPress Gallery on iPhone 3rd Party Gallery on iPhone

53. Third Party Image Galley Plugins
Two Popular WordPress Gallery Plugins

54. Embedding Youtube and Vimeo Videos
Go to the Video in your Browser
Copy the Video URL
Paste into your Post or Page
Publish/Update and Done!

55. Embedding Youtube and Vimeo Videos

56. Embedding Youtube and Vimeo Videos

57. Embedding Youtube and Vimeo Videos

58. Image Handling:
Understanding the Basics of WordPress
Media
Rich Plakas
@RichP on Twitter
www.RichPlakas.com
Q&A