Boise State Web Camp:
Images, Slideshows and Media
Shad Jessen
Office of Information Technology
© 2012 Boise State University
1
Image Editors
Windows
• Photoshop CC
• Photoshop Elements
• GIMP
• Paint.NET
© 2014 Boise State University
Mac
• Photoshop CC
• Photoshop Elements
• Photoshop
Lightroom
• Aperture
• iPhoto
2
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
© 2014 Boise State University
3
Default Template
© 2014 Boise State University
4
Default Template Image Size
(171,600 pixels)
© 2014 Boise State University
5
Sliders
webguide.boisestate.edu
© 2014 Boise State University
6
Sliders
• You can cheat on width, but don’t cheat on
height.
• With right sidebar, image is reduced to 450 x
180.
© 2014 Boise State University
7
Need More Room?
• Full Width Template: 900 x 350.
• Doublewide Minimal Nav: Limited only by
display size.
© 2014 Boise State University
8
Department Homepage Banner
© 2014 Boise State University
9
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.
© 2014 Boise State University
10
2560 x 1440 Display
© 2014 Boise State University
11
PPI Resolutions
150 ppi
© 2014 Boise State University
96 ppi
72 ppi
12
File Size and Bandwidth
6.9 mb (megabytes)
4502 x 1320
33 sec. download The picture on the left is
56x larger (in file size)!
© 2014 Boise State University
123 kb (kilobytes)
660 x 421
2 sec. download
13
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 (8bit if possible – 24-bit can vastly increase file
size).
© 2014 Boise State University
14
Free Optimization Tools
• TinyPNG
Compress PNG files 50-80%.
• Smush.it
Optimize all web images.
© 2014 Boise State University
15
Optimize for Accessibility in WordPress
Give your image a
concise title.
Use Alt-Tag, and
use it correctly.
© 2014 Boise State University
16
Shad Jessen
Email sjessen@boisestate.edu
THANK YOU
© 2014 Boise State University
17