Optimizing Images for Web Use

Office of CommunicationsWeb Design and Management

University of Kansas Medical CenterFebruary 12, 2014

CMS Update

• Upgrade• Implemented Authentication Module• File counts:– Over 10,039 pages generated out of the CMS– 8,184 documents

• Still to go:– kumc, 9,000 files to be reviewed– Wichita , 10 departmental sites

Do’s and don’ts

How photos make a difference

Cray Diabetes Center

Photo Services

• Photo Services– your location– Studio: G017 Sudler Hall

• Photo packages for websites• For $150, you can get 10 photos for your

website. More info: Search for “Website Photo Packages” on www.kumc.edu

Never do this -- ever

• Don’t steal photos!? Google images ? KUMC website? Facebook pages

• Don’t use a photo of someone without permission

• Don’t ignore visual identity standards:www.identity.ku.edu

Best practices

• Use professional photos or stock photos• No snapshots• Be quality control for your website• A bad photo is worse than no photo• Your photos should be interesting, active,

eye-catching, colorful• The don’t have to be literal, if literal is boring

Image Sizes in the CMS

Image Editing Tools

• Editor by PIXLRhttp://pixlr.com/editor/ -- online editing tool

• Photoshop – – Cloud-based– Expensive– More tools than most web editors need

Getting Started in Pixlr

• Go to http://pixlr.com/editor/

Resizing Images for the Web

Cropping Images for the Web

Image Naming Conventions

• Staying consistent will improve organization

• Use hyphens to separate words• Label large and small versions of the

same image - jmotsinger-sm.jpg• Designate section front image by

labelling them - home-students.jpg

Online Reference

• CMS Training Overviewhttp://www.kumc.edu/cms-training

Let us help…

• Retouch, sharpen and crop images• Resize and optimize images– Josh Collins, jcollins5@kumc.edu– Josh Motsinger, jmotsinger3@kumc.edu– Karen Chinn, kchinn@kumc.edu

• Image selection and content-related issues• Photo Releases– Julie Adam, jadam@kumc.edu