WordPress Images 101

Images 101Prepping, using images on your WordPress site

WordCamp Milwaukee 2014 Becky Davis @beckyddesign, Jan Wilson @JanBigW

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

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

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 Folder settings and

where things go

Uploading Images

Media Library Uploading & bulk uploading “editing” Importance of file names & alt

text Image URL paths

https://wordpress.org/plugins/codepress-admin-columns/ Will give file info

Save for web – w/ plugin!

http://wordpress.org/plugins/resize-image-after-upload/ Will take care of

optimization (not editing) Transformed a 1.5mb,

2000px wide file to 75k, 900px

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

Lesson 4 – Fancy stuff

Gallery Tables Plugins Slideshows

Lots of plugin choices, remember that images for slides need to be all the same size

Reference/Research

Plugins Resize image after upload Tablepress Codepress Admin Columns Galleries, slideshows, lightboxes – lots of choicesPrograms 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

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

Becky Davis Beckydavisdesign.com @beckyddesign

Jan Wilson Bigwdesign.com @JanBigW