Preparing and Using Images In WordPress Melbourne WordPress User Meetup - May 2014 Helena Denley . @HelenaDenley . diywebsitecoach.com
Preparing and Using Images in WordPress
Sep 13, 2014
WordPress 3.9 included some great enhancements to the image loading and editing capabilities of the page and post editors. You now have much finer control over the display of your images.
And there are still a few tricks to optimising your images before you load them.
This presentation will cover all you need to know about using images in WordPress.
These slides were created by Helena Denley but were presented by Warren Denley (due to Helena being ill).
Helena Denley is co-founder of DIY Website Coach and is focussed on helping women entrepreneurs get a gorgeous website that works to bring business. As a WordPress Consultant, she’s spoken at WordCamp Melbourne (Australia), WordCamp Chicago, and WordCamp Minneapolis and regularly attends conferences such as Pressnomics and WordCamps in Australia and the US to keep her skills fresh and up-to-date.
And there are still a few tricks to optimising your images before you load them.
This presentation will cover all you need to know about using images in WordPress.
These slides were created by Helena Denley but were presented by Warren Denley (due to Helena being ill).
Helena Denley is co-founder of DIY Website Coach and is focussed on helping women entrepreneurs get a gorgeous website that works to bring business. As a WordPress Consultant, she’s spoken at WordCamp Melbourne (Australia), WordCamp Chicago, and WordCamp Minneapolis and regularly attends conferences such as Pressnomics and WordCamps in Australia and the US to keep her skills fresh and up-to-date.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Preparing and Using Images In WordPress
Melbourne WordPress User Meetup - May 2014
Helena Denley . @HelenaDenley . diywebsitecoach.com
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
• Importance of Images
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
• Importance of Images
• Image Sources
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
• Importance of Images
• Image Sources
• Image Optimisation
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
• Importance of Images
• Image Sources
• Image Optimisation
• Using Images in Posts/Pages
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
• Importance of Images
• Image Sources
• Image Optimisation
• Using Images in Posts/Pages
• Editing Images in WordPress
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
• Importance of Images
• Image Sources
• Image Optimisation
• Using Images in Posts/Pages
• Editing Images in WordPress
• Galleries
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Talk Overview
• Importance of Images
• Image Sources
• Image Optimisation
• Using Images in Posts/Pages
• Editing Images in WordPress
• Galleries
• Images and SEO
Importance of Images
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Use Images?
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Use Images?
• Visual appeal
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Use Images?
• Visual appeal
• Show off your work
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Use Images?
• Visual appeal
• Show off your work
• Break up text blocks
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Use Images?
• Visual appeal
• Show off your work
• Break up text blocks
• Tell a story
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Where to Use Images
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Where to Use Images
• Posts and pages
• Featured image
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Where to Use Images
• Posts and pages
• Featured image
• Site header
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Where to Use Images
• Posts and pages
• Featured image
• Site header
• Background
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Where to Use Images
• Posts and pages
• Featured image
• Site header
• Background
• Sidebars
Image Sources
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Sources
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Sources
• Your own photos
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Sources
• Your own photos
• Paid Stock Photography
• iStockphoto, Shutterstock, Fotolia
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Sources
• Your own photos
• Paid Stock Photography
• iStockphoto, Shutterstock, Fotolia
• Free Stock Photography
• PhotoPin.com stock.xchng (sxc.hu)
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Sources
• Your own photos
• Paid Stock Photography
• iStockphoto, Shutterstock, Fotolia
• Free Stock Photography
• PhotoPin.com stock.xchng (sxc.hu)
• Illustrations and icons
Image Optimisation
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Optimise?
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Optimise?
• Help WordPress out
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Optimise?
• Help WordPress out
• Site loading speed
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Optimise?
• Help WordPress out
• Site loading speed
• Hosting quota
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Why Optimise?
• Help WordPress out
• Site loading speed
• Hosting quota
• Best practice
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Tools
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Tools
• Photoshop
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Tools
• Photoshop
• pixlr.com
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Tools
• Photoshop
• pixlr.com
• picmonkey.com
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Tools
• Photoshop
• pixlr.com
• picmonkey.com
• GIMP
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Tools
• Photoshop
• pixlr.com
• picmonkey.com
• GIMP
• Photoshop Elements
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Size
• By dimension (expressed in pixels
• By resolution (expressed in ppi)
What to Optimise
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Save For Web (JPEG)
What to Optimise
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Save For Web (PNG)
What to Optimise
Using Images In !Posts/Pages
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Default Sizing
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Media Manager
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Media Manager - Properties
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Insert Image - Add Media
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Insert Image - Drag and Drop
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Alignment - Option 1
• Click on in post/page to select
!
!
!
• Click on the required alignment in toolbar
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Alignment - Option 2
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Linking
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Properties
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Featured Image
• Often used on home page and blog/archive pages (theme dependent)
Editing Images in WordPress
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Resizing
• Click on the image in post/page
!
!
!
!
• Drag the handles
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Properties
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Image Editing
Galleries
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Creating a Gallery
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Select Images
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Set Order and Properties
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Insert In Post/Page
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Edit Gallery
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Update Gallery
Images and SEO
http://diywebsitecoach.com
www.facebook.com/diywebsitecoach . @HelenaDenley
Images and SEO
Questions?
Questions, comments and WordPress training join us at:
Helena Denley . @HelenaDenley . diywebsitecoach.com
http://diywebsitecoach.com
https://facebook.com/diywebsitecoach
Related Documents
