WordPress Images 101
-
Upload
becky-davis -
Category
Internet
-
view
169 -
download
4
description
Transcript of WordPress Images 101
![Page 1: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/1.jpg)
Images 101Prepping, using images on your WordPress site
WordCamp Milwaukee 2014 Becky Davis @beckyddesign, Jan Wilson @JanBigW
![Page 2: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/2.jpg)
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
![Page 3: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/3.jpg)
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
![Page 4: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/4.jpg)
Save for Web in Photoshop• Jpg, png or gif• Play with
quality
• Resize the image
• No bigger than needed
![Page 5: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/5.jpg)
Lesson 2 – WordPress settings
WordPress Media Settings Setting pre-built sizes Thumbnails and re-
doing thumbnails Folder settings and
where things go
![Page 6: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/6.jpg)
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
![Page 7: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/7.jpg)
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
![Page 8: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/8.jpg)
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
![Page 9: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/9.jpg)
Lesson 4 – Fancy stuff
Gallery Tables Plugins Slideshows
Lots of plugin choices, remember that images for slides need to be all the same size
![Page 10: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/10.jpg)
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
![Page 11: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/11.jpg)
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
![Page 12: WordPress Images 101](https://reader035.fdocuments.us/reader035/viewer/2022081717/53f8c2568d7f7253318b4865/html5/thumbnails/12.jpg)
Becky Davis Beckydavisdesign.com @beckyddesign
Jan Wilson Bigwdesign.com @JanBigW