250 likes | 485 Views
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
E N D
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 • 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
Default Template Image Size (171,600 pixels)
Sliders webguide.boisestate.edu
Sliders • You can cheat on width, but don’t cheat on height. • With right sidebar, image is reduced to 450 x 180.
Need More Room? • Full Width Template: 900 x 350. • Doublewide Minimal Nav: Limited only by display size.
Department Homepage Banner Banner image must at least 1350 x 228 pixels.
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.
PPI Resolutions 150 ppi 96 ppi 72 ppi
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)!
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).
Free Optimization Tools • TinyPNG Compress PNG files 50-80%. • Smush.it Optimize all web images.
Optimize for Accessibility in WordPress Give your image a concise title. Use Alt-Tag, and use it correctly.
Shad Jessen Email sjessen@boisestate.edu Thank You