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

1. Images 101
Prepping, using images on your WordPress site
WordCamp Milwaukee 2014 Becky Davis @beckyddesign, Jan Wilson @JanBigW

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. 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. Save for Web in Photoshop
• Jpg, png or gif
• Play with
quality
• Resize the
image
• No bigger than
needed

5. Lesson 2 – WordPress settings
 WordPress Media
Settings
 Setting pre-built sizes
 Thumbnails and re-
doing thumbnails
 Folder settings and
where things go

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. 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. 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. 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. 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. 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.  Becky Davis
 Beckydavisdesign.com
 @beckyddesign
 Jan Wilson
 Bigwdesign.com
 @JanBigW