Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "© 2012 Boise State University1 Boise State Web Camp: Images, Slideshows and Media Shad Jessen Office of Information Technology."— Presentation transcript:

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” 2560 x 1440 can display 108 ppi.

11 © 2014 Boise State University 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 sec. download 123 kb (kilobytes) 660 x 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


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

Similar presentations


Ads by Google