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.

The pixel (a word invented from "picture element") is the basic unit of programmable color on a computer display or in a computer image. 

Pixel is often abbreviated as px 

A vector graphic is artwork made up of points, lines, and curves that are based upon mathematical equations, rather than a solid colored square pixels. This means that no matter how large or small or how close you zoom in on the image, the lines, curves, and points remain smooth.

Hexcode: Every websafe color has a corresponding 6 digit alphanumerical code proceeded by the # symbol. This tells the webpage exactly what color you want. Examples: #ffffff is White, #000000 is Black, #3DC2D1 is the bright aqua color used in many District Marketing materials.  

A PNG file is an image saved in the Portable Network Graphic (PNG) format. It contains a bitmap compressed with lossless compression. PNG files are commonly used to store web graphics, digital photographs, and images with transparent backgrounds. 

A JPG file is an image saved in a compressed image format standardized by the Joint Photographic Experts Group (JPEG). It is commonly used for storing digital photos and used by most digital cameras to save images.

With an image or graphic, transparent refers to an image that is clear and can take the effect of any images behind it. The image is the same but looks different with each of the different colored backgrounds.  Almost all image editors used today are capable of making a transparent image. If you're having trouble making an image transparent make sure it's saved as a GIF or PNG format.

Note: A preview of an image with a transparent background is often depicted with a "checkerboard" background to highlight the fact that it is transparent.

Web Content Accessibility Guidelines (WCAG) is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.

The WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

• natural information such as text, images, and sounds
• code or markup that defines structure, presentation, etc.

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.