Download pdf - Preparing and Using Images in WordPress

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

https://facebook.com/diywebsitecoach



Talk Overview

• Importance of Images




Talk Overview


• Image Sources




Talk Overview


• Image Sources

• Image Optimisation




Talk Overview


• Image Sources


• Using Images in Posts/Pages




Talk Overview


• Image Sources



• Editing Images in WordPress




Talk Overview


• Image Sources




• Galleries




Talk Overview


• Image Sources




• Galleries

• Images and SEO


Importance of Images



Why Use Images?




Why Use Images?

• Visual appeal




Why Use Images?

• Visual appeal

• Show off your work




Why Use Images?

• Visual appeal


• Break up text blocks




Why Use Images?

• Visual appeal


• Break up text blocks

• Tell a story




Where to Use Images




Where to Use Images

• Posts and pages

• Featured image




Where to Use Images

• Posts and pages

• Featured image

• Site header




Where to Use Images

• Posts and pages

• Featured image

• Site header

• Background




Where to Use Images

• Posts and pages

• Featured image

• Site header

• Background

• Sidebars


Image Sources



Image Sources




Image Sources

• Your own photos


http://sxc.hu



Image Sources

• Your own photos

• Paid Stock Photography

• iStockphoto, Shutterstock, Fotolia


http://sxc.hu



Image Sources

• Your own photos



• Free Stock Photography

• PhotoPin.com stock.xchng (sxc.hu)


http://sxc.hu



Image Sources

• Your own photos



• Free Stock Photography

• PhotoPin.com stock.xchng (sxc.hu)

• Illustrations and icons


http://sxc.hu

Image Optimisation



Why Optimise?




Why Optimise?

• Help WordPress out




Why Optimise?


• Site loading speed




Why Optimise?



• Hosting quota




Why Optimise?



• Hosting quota

• Best practice




Tools




Tools

• Photoshop


http://pixlr.com



Tools

• Photoshop

• pixlr.com


http://pixlr.com



Tools

• Photoshop

• pixlr.com

• picmonkey.com


http://pixlr.com



Tools

• Photoshop

• pixlr.com

• picmonkey.com

• GIMP


http://pixlr.com



Tools

• Photoshop

• pixlr.com

• picmonkey.com

• GIMP

• Photoshop Elements


http://pixlr.com



Image Size

• By dimension (expressed in pixels

• By resolution (expressed in ppi)

What to Optimise




Save For Web (JPEG)

What to Optimise




Save For Web (PNG)

What to Optimise


Using Images In !Posts/Pages



Default Sizing




Media Manager




Media Manager - Properties




Insert Image - Add Media




Insert Image - Drag and Drop




Image Alignment - Option 1

• Click on in post/page to select

!

!

!

• Click on the required alignment in toolbar




Image Alignment - Option 2




Image Linking




Image Properties




Featured Image

• Often used on home page and blog/archive pages (theme dependent)


Editing Images in WordPress



Resizing

• Click on the image in post/page

!

!

!

!

• Drag the handles




Image Properties




Image Editing


Galleries



Creating a Gallery




Select Images




Set Order and Properties




Insert In Post/Page




Edit Gallery




Update Gallery


Images and SEO



Images and SEO


Questions?

Questions, comments and WordPress training join us at:

Helena Denley . @HelenaDenley . diywebsitecoach.com



