Photos and Graphics for the Web

Every image area on your web page has a different dimension. Some are square, some are long and narrow. Choose a photo to complement the image area.

Whether you’re looking for a pre-made graphic or a photo to create your own graphics, knowing what to look for and where to look is the first step to the effective use of graphics.

• Always check our online photo & media gallery first! It contains photos of our actual students and you are encouraged to use them on your web pages. 
• Adobe Express does include access to select stock photos, icons, and other design elements.
• It is highly recommended to use a stock photo website (such as the ones in the resources menu on the right), as they are likely to be high resolution and have all the copyright information outlined upfront.
• If you do need to use google images for your search, be sure you select appropriate photos that are large file sizes (to ensure clear, sharp images) and also images that are labeled for reuse.
• While on Google Images, click on "Tools" at the top in order to filter by size and usage rights. 

Do take the time to size and crop photos. Here are some cropping tips to consider:

Sometimes cropping in and getting closer to your subject is a better option. If you do crop in tight, be sure you can easily crop people out and not have half of a hand or head showing somewhere. 

Do rename your files with descriptive names. 

Once you have sized your image, give it a descriptive name. Including the image size in the name is also helpful. When organizing your files, keep a specific folder dedicated to your web pages. You may want to keep them organized by month and year. That way you will know which photos you have used and when. 

Do update your page with new photos. 

A new photo signals new, fresh information to your viewer.  Even if you’re not updating text, a new photo lets your viewer know that pages are at least being reviewed.  

Best practice is once a semester if not sooner.

Don't use bad quality photos. You can use your photos, but be sure they are high quality, high resolution, not blurry and look professional. If you are taking photos of students, be sure you have their permission and have them sign a photo release waiver.

You may use any of the images that are in our VCCCD Photo gallery. We are always adding to the library, so check back frequently.  These are OUR images of our students and campus!  Also, if you would like to help add to our library, we would love to include your images, whether it be from an event or campus & people images. 

Photos vs. Graphics, what's the difference?

Both are used to convey non-verbal messages and grab attention.

You may want to use a graphic if it would better illustrate information (such as in an infographic or chart), help emphasizes something important (such as a date), or if branding (such as logos) is needed. 

Graphics are commonly used in the foreground while photos can be background elements. 

How about adding videos?

Yes, you can add videos to many areas of your web page. We have a video section in our VCCCD Graphic/Media Library. You can also link videos from an outside source such as YouTube. 

All videos must be closed captioned if there is someone speaking. If you need CC added to a video, send it to us and we will send it out for captioning. Most captioning takes about 24 hrs, so please plan ahead.

If you’ve named your photo something descriptive, you’re already ahead of the game when it comes to ALT text.  ALT text needs to be a short description of your image.

For Graphics: Your alternative text (or Alt Text for short) should be a brief description of your graphic. NOTE that you MUST include any text that is on your graphic, otherwise screen readers will not be able to read it! In this example, the graphic has "Rad Graphics" typed on it, therefore in the Alt Text box we have written "Rad Graphics".  

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Use the free online color contrast ratio checker.

For convenience, here are the hexcodes for the college colors:

MC Blue - Hex: #005695

MC Light Blue - Hex: #6CADDF

OC Green - Hex: #2BB673

OC Blue - Hex: #005CB9

VC Orange - Hex: #FF9015

VC Dark Orange - Hex: #FF6C0E

For more college branding assets, including official logos, visit the branding portals.