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

• 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?

• 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

• 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

• Your own photos

Image Sources

• Your own photos

• Paid Stock Photography

• iStockphoto, Shutterstock, Fotolia

Image Sources

• Your own photos

• Free Stock Photography

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

Image Sources

• Your own photos

• Free Stock Photography

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

• Illustrations and icons

Image Optimisation

Why Optimise?

• Help WordPress out

Why Optimise?

• Site loading speed

Why Optimise?

• Hosting quota

Why Optimise?

• Hosting quota

• Best practice

• Photoshop

• pixlr.com

• Photoshop

• pixlr.com

• picmonkey.com

• Photoshop

• pixlr.com

• picmonkey.com

• GIMP

• Photoshop

• pixlr.com

• picmonkey.com

• GIMP

• Photoshop Elements

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

Questions?

Questions, comments and WordPress training join us at:

Helena Denley . @HelenaDenley . diywebsitecoach.com

https://facebook.com/diywebsitecoach

Preparing and Using Images in WordPress

Internet

Preparing Today’s Youths for Tomorrow’s Workplacepeople.themyersbriggs.com/rs/cpp/images/Preparing... · Preparing Today’s Youths for Tomorrow’s Workplace Young people bring

[Austin WordPress Meetup] Adaptive Images in Responsive Web Design

Images for Wordpress - WordCamp Seattle 2014 - Nancy Thanki

How To Use Images in WordPress: Without the Aggravation

Using Images With WordPress - cpb-us-w2.wpmucdn.com€¦ · Using Images With WordPress This “Using Images” tutorial describes incorporating images into a text post. (You can

Chapter 1 Preparing for Adventure - John Wiley & Sonscatalogimages.wiley.com/images/db/pdf/0764584596.excerpt.pdfChapter 1 Preparing for Adventure In This Chapter UNGEONSExploring

Preparing images

Web Designer’s Guide to WordPress - pearsoncmg.comptgmedia.pearsoncmg.com/images/9780321832818/samplepages/... · Web Designer’s Guide to WordPress: Plan, Theme, Build, Launch

Adding Images and Video to WordPress

Images in Wordpress

Preparing images for_web

Monetizing & Preparing for Mobile Traffic With WordPress

WordPress Media and Images

Preparing Vector Images in Adobe Illustrator

WordPress theme building from scratch ” A Web Developer ...fosscomm.teiath.gr/images/presentations/WordPressThemeBuilding… · WordPress Theme Folders and Files /css: All CSS files

Start Selling Images With WordPress in Under 10 Minutes (WordCamp Philly, 2015)

WordPress Images 101

Preparing I-DEAS Images for Use in Other Media · Preparing I-DEAS Images for Use in Other Media Fermi National Accelerator Laboratory Training and Development Department . 6/23/2006

WordPress Second Edition Visual QuickStart Guideptgmedia.pearsoncmg.com/images/9780321792662/samplepages/... · Visual QuickStart Guide WordPress, Second Edition Jessica Neuman Beck

How to place images inside widgets in the sidebars in WordPress