1 / 17

Boise State Web Camp: Images, Slideshows and Media

Boise State Web Camp: Images, Slideshows and Media. Shad Jessen Office of Information Technology. Image Editors. Windows Photoshop CC Photoshop Elements GIMP Paint.NET. Mac Photoshop CC Photoshop Elements Photoshop Lightroom Aperture iPhoto. Pixels. Single point in a graphic image

oke
Download Presentation

Boise State Web Camp: Images, Slideshows and Media

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Image Editors Windows • Photoshop CC • Photoshop Elements • GIMP • Paint.NET Mac • Photoshop CC • Photoshop Elements • Photoshop Lightroom • Aperture • iPhoto

  3. 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. Default Template

  5. Default Template Image Size (171,600 pixels)

  6. Sliders webguide.boisestate.edu

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

  8. Need More Room? • Full Width Template: 900 x 350. • Doublewide Minimal Nav: Limited only by display size.

  9. Department Homepage Banner Banner image must at least 1350 x 228 pixels.

  10. 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. 2560 x 1440 Display

  12. PPI Resolutions 150 ppi 96 ppi 72 ppi

  13. 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. 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. Free Optimization Tools • TinyPNG Compress PNG files 50-80%. • Smush.it Optimize all web images.

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

  17. Shad Jessen Email sjessen@boisestate.edu Thank You

More Related