1. © 2012 Boise State University1 Boise State Web Camp: Images, Slideshows and Media Shad Jessen Office of Information Technology

2. © 2014 Boise State University2 Image Editors Windows Photoshop CC Photoshop Elements GIMP Paint.NET Mac Photoshop CC Photoshop Elements Photoshop Lightroom Aperture iPhoto

3. © 2014 Boise State University3 Pixels Single point in a graphic image Older monitors: Hundreds of thousands of pixels (800 x 600) Newer displays: Millions of pixels Multiply your image width by height to get number of pixels: 1980 x 1020 (HD) = 2,073,600

4. © 2014 Boise State University4 Default Template

5. © 2014 Boise State University5 Default Template Image Size (171,600 pixels)

6. © 2014 Boise State University6 Sliders webguide.boisestate.edu

7. © 2014 Boise State University7 Sliders You can cheat on width, but don’t cheat on height. With right sidebar, image is reduced to 450 x 180.

8. © 2014 Boise State University8 Need More Room? Full Width Template: 900 x 350. Doublewide Minimal Nav: Limited only by display size.

9. © 2014 Boise State University9 Department Homepage Banner

10. © 2014 Boise State University10 PPI (or DPI) The density of pixels per inch. A 21.5” monitor at HD resolution (1920 x 1080) can display 103 ppi. An Apple iPhone 5S can display 326 ppi. A 27” iMac @ 2560 x 1440 can display 108 ppi.

11. © 2014 Boise State University11 2560 x 1440 Display

12. © 2014 Boise State University12 PPI Resolutions 150 ppi96 ppi72 ppi

13. © 2014 Boise State University13 File Size and Bandwidth 6.9 mb (megabytes) 4502 x 1320 33 sec. download 123 kb (kilobytes) 660 x 421 2 sec. download The picture on the left is 56x larger (in file size)!

14. © 2014 Boise State University14 Optimizing Your Images Output your images to destination size. Crop excess white space. Save photographs/gradients as JPEG (JPG) files (apply approx. 30% compression). Save line art/solid color images as PNG files (8- bit if possible – 24-bit can vastly increase file size).

15. © 2014 Boise State University15 Free Optimization Tools TinyPNG Compress PNG files 50-80%. Smush.it Optimize all web images.

16. © 2014 Boise State University16 Optimize for Accessibility in WordPress Give your image a concise title. Use Alt-Tag, and use it correctly.

17. © 2014 Boise State University17 THANK YOU Shad Jessen Email sjessen@boisestate.edu