WordPress Images 101
-
Upload
becky-davis -
Category
Internet
-
view
168 -
download
4
description
Transcript of 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