Images 101
Prepping, using images on your WordPress site
WordCamp Milwaukee 2014 Becky Davis @beckyddesign, Jan Wilson @Ja...
Lesson 1 - Prep
 WordPress is not an
image editor
 What comes off the
camera may need to be
edited, cropped etc., and
it...
File Management
 Pay attention to file location management on your
computer
 File names should be descriptive
 Always r...
Save for Web in Photoshop
• Jpg, png or gif
• Play with
quality
• Resize the
image
• No bigger than
needed
Lesson 2 – WordPress settings
 WordPress Media
Settings
 Setting pre-built sizes
 Thumbnails and re-
doing thumbnails
...
Uploading Images
 Media Library
 Uploading & bulk uploading
 “editing”
 Importance of file names & alt
text
 Image UR...
Save for web – w/ plugin!
 http://wordpress.org/plug
ins/resize-image-after-
upload/
 Will take care of
optimization (no...
Lesson 3 – Inserting an image(s)
 Do the TEXT FIRST
 This is HTML, not Word
 Pay attention to the settings!
 Title (Is...
Lesson 4 – Fancy stuff
 Gallery
 Tables
 Plugins
 Slideshows
 Lots of plugin choices,
remember that images
for slides...
Reference/Research
Plugins
 Resize image after upload
 Tablepress
 Codepress Admin Columns
 Galleries, slideshows, lig...
Reference articles
 https://developers.google.com/speed/articles/optimizing
-images
 http://www.wpbeginner.com/beginners...
 Becky Davis
 Beckydavisdesign.com
 @beckyddesign
 Jan Wilson
 Bigwdesign.com
 @JanBigW
Upcoming SlideShare
Loading in …5
×

WordPress Images 101

570 views

Published on

Everything you need to know about adding images to your WordPress site

Published in: Internet
  • Be the first to comment

WordPress Images 101

  1. 1. Images 101 Prepping, using images on your WordPress site WordCamp Milwaukee 2014 Becky Davis @beckyddesign, Jan Wilson @JanBigW
  2. 2. Lesson 1 - Prep  WordPress is not an image editor  What comes off the camera may need to be edited, cropped etc., and it’s WAY TOO BIG for your site  Pay attention to:  pixel size  AND file size/weight
  3. 3. File Management  Pay attention to file location management on your computer  File names should be descriptive  Always re-name from camera  NO spaces, / * symbols or extra .  pretty-horse.jpg  NOT Mr.Ed image.jpg or dsc0001234.jpg
  4. 4. Save for Web in Photoshop • Jpg, png or gif • Play with quality • Resize the image • No bigger than needed
  5. 5. Lesson 2 – WordPress settings  WordPress Media Settings  Setting pre-built sizes  Thumbnails and re- doing thumbnails  Folder settings and where things go
  6. 6. Uploading Images  Media Library  Uploading & bulk uploading  “editing”  Importance of file names & alt text  Image URL paths  https://wordpress.org/plugins/co depress-admin-columns/  Will give file info
  7. 7. Save for web – w/ plugin!  http://wordpress.org/plug ins/resize-image-after- upload/  Will take care of optimization (not editing)  Transformed a 1.5mb, 2000px wide file to 75k, 900px
  8. 8. Lesson 3 – Inserting an image(s)  Do the TEXT FIRST  This is HTML, not Word  Pay attention to the settings!  Title (Is it descriptive? Can I search by it?)  Alt text (ALWAYS add)  Alignment  Link  Size  Editing after inserted
  9. 9. Lesson 4 – Fancy stuff  Gallery  Tables  Plugins  Slideshows  Lots of plugin choices, remember that images for slides need to be all the same size
  10. 10. Reference/Research Plugins  Resize image after upload  Tablepress  Codepress Admin Columns  Galleries, slideshows, lightboxes – lots of choices Programs for image editing  Photoshop Elements - http://www.adobe.com/products/photoshop- elements.html - $59 - Mac / Windows  Irfanview - http://www.irfanview.com/ free Windows  Pixler - http://pixlr.com/ Online editing  Gimp – Gimp.org – free. Mac/Windows  PS Express – free iPad or WIndows tablet app  Photoscape - photoscape.org/ps/main/index.php – Online / Free
  11. 11. Reference articles  https://developers.google.com/speed/articles/optimizing -images  http://www.wpbeginner.com/beginners-guide/speed- wordpress-save-images-optimized-web/  http://sixrevisions.com/web_design/comprehensive- guide-saving-images-for-web/  http://www.vsellis.com/understanding-dpi-resolution- and-print-vs-web-images/ Stock Photography (priced by pixel size, only buy as big as you need and re- name when you upload)  istockphoto.com  Shutterstock.com  Many others, BUY or get permission, no taking from Google, that’s called stealing
  12. 12.  Becky Davis  Beckydavisdesign.com  @beckyddesign  Jan Wilson  Bigwdesign.com  @JanBigW

×