Your SlideShare is downloading. ×
WordPress Images 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

WordPress Images 101

316

Published on

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

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

Published in: Internet
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
316
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×