Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to Prepare and Use Images in WordPress

How to Prepare and Use Images in WordPress

A brief overview of creating/editing images and saving in a format suitable for the web and how to upload to your WordPress site.

More Decks by Helena Denley (WP Website Coach)

Other Decks in How-to & DIY

Transcript

  1. How To Prepare and
    Use Images In
    WordPress
    Wordcamp Chicago 2013
    Helena Denley . @HelenaDenley . diywebsitecoach.com
    Sunday, 30 June 13

    View full-size slide

  2. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Who am I?
    • Co-owner & CWC (chief web chick)
    • From Melbourne, Australia
    • Mum to a 5 year old boy (so I need to get sites
    done quickly)
    Sunday, 30 June 13

    View full-size slide

  3. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Talk Overview
    • Why use images?
    • Where to use images
    • Creating images
    • Sourcing images
    • Image optimization
    • Saving for web
    • Inserting into WordPress
    • Image plugins
    Sunday, 30 June 13

    View full-size slide

  4. Why Use Images?
    Sunday, 30 June 13

    View full-size slide

  5. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Why Use Images?
    • Visual appeal
    • Show off your work
    • Break up text blocks
    • Tell a story
    Sunday, 30 June 13

    View full-size slide

  6. Where To Use Images
    Sunday, 30 June 13

    View full-size slide

  7. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Post Images
    Sunday, 30 June 13

    View full-size slide

  8. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Header/Logo
    Sunday, 30 June 13

    View full-size slide

  9. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Background
    Sunday, 30 June 13

    View full-size slide

  10. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Graphical Elements/
    Buttons & Sidebar
    Headings
    Sunday, 30 June 13

    View full-size slide

  11. Creating Images
    Sunday, 30 June 13

    View full-size slide

  12. 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)
    Sunday, 30 June 13

    View full-size slide

  13. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Tools for Optimization & Saving
    • Photoshop
    • Alternate programs
    • pixlr.com
    • GIMP
    • Photoshop Elements
    • Demo
    Sunday, 30 June 13

    View full-size slide

  14. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Step 1. Resizing
    • By dimension (expressed in
    pixels
    • By resolution (expressed in ppi)
    Sunday, 30 June 13

    View full-size slide

  15. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Step 2. Save For Web (JPEG)
    Sunday, 30 June 13

    View full-size slide

  16. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Step 2. Save For Web (PNG)
    Sunday, 30 June 13

    View full-size slide

  17. Inserting Into
    WordPress
    Sunday, 30 June 13

    View full-size slide

  18. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Inserting Into WordPress
    • Media manager
    • Image sizes
    • Insert into post/page
    • Title and Alt text
    • Link source
    • Featured Image
    Sunday, 30 June 13

    View full-size slide

  19. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Media Manager
    Sunday, 30 June 13

    View full-size slide

  20. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Image Sizes
    Sunday, 30 June 13

    View full-size slide

  21. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Media Manager - Add New Media
    Sunday, 30 June 13

    View full-size slide

  22. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Insert Into Post/Page - Add Media
    Select from media library or upload new
    Sunday, 30 June 13

    View full-size slide

  23. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Edit Post - Add New Media
    Sunday, 30 June 13

    View full-size slide

  24. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Edit Post - Add New Media
    Sunday, 30 June 13

    View full-size slide

  25. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Title & Alt Text Link Source
    Sunday, 30 June 13

    View full-size slide

  26. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Create Gallery - Choose Images
    Sunday, 30 June 13

    View full-size slide

  27. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Create Gallery - Edit Gallery
    Sunday, 30 June 13

    View full-size slide

  28. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Create Gallery - Appearance in post
    Sunday, 30 June 13

    View full-size slide

  29. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Create Gallery - Appearance in post
    Sunday, 30 June 13

    View full-size slide

  30. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Featured Image
    • Select image from media library (or upload)
    • Used on home page and blog/archive pages
    Sunday, 30 June 13

    View full-size slide

  31. Image Plugins
    Sunday, 30 June 13

    View full-size slide

  32. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Image Plugins
    • Galleries
    • In-built WordPress gallery
    • Portfolio Slideshow Pro (also free version)
    • Sliders
    • Genesis Responsive Slider
    Sunday, 30 June 13

    View full-size slide

  33. http://diywebsitecoach.com
    www.facebook.com/diywebsitecoach . @HelenaDenley
    Image Plugins
    • Image Sizing
    • Simple Image Sizes
    • Regenerate Thumbnails
    • Imsanity
    Sunday, 30 June 13

    View full-size slide

  34. For more information and WordPress training join us at:
    Helena Denley . @HelenaDenley . diywebsitecoach.com
    http://diywebsitecoach.com
    https://facebook.com/diywebsitecoach
    Sunday, 30 June 13

    View full-size slide