Upload
becky-davis
View
168
Download
4
Embed Size (px)
DESCRIPTION
Everything you need to know about adding images to your WordPress site
Citation preview
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