Photography for the Web

Incorporating well-formatted photos into your website can enhance its visual appeal, improve user experience, and contribute positively to search engine optimization (SEO). Conversely, poorly optimized visual content may hinder page performance, slow loading times, and negatively impact user engagement.

File formats

  • JPG (or JPEG): This format is best for photographs, images with gradients, or when a smaller file size is needed. JPG does not support transparency. You can adjust the file size and quality by changing the amount of compression used when making the image.
    • Best uses: Profile photos, student photos, web page banners, general photography
  • PNG: This format is best for illustrations, logos, and icons. The main advantage of this format is PNG does support transparency. This format may also be useful if you do not want to compress the image. These benefits do result in a larger file size than JPG images.
    • Best uses: Logos or brand marks, icons, and infographics
  • WebP or AVIF:  These formats are newer. They both offer smaller file sizes than JPG and PNG. Both support transparency and animation. Since these formats are new, browser support is not universal with WebP having 95% support across all browsers and AVIF having less.
    • The College of Liberal Arts (CLA) recommends using JPG and PNG for web images at this time.

 Image sizing

  • 72 to 96 PPI (pixels per inch) is the traditional web resolution. Higher resolution is unnecessary and increases file size without significant visual improvement.
  • Resize images to their intended display size on the website. Uploading images much larger than their display size is inefficient and slows down loading times. For example, don't upload a 4,000 pixel image when it is intended to be half the width of your page.
  • Image aspect ratio: For tall, portrait photos, use a 4:3 pixel ratio. Some example pixel dimensions would be 400x300 or 800x600. Our new template uses this ration for profile photos so take that into consideration to avoid having your photo cropped. For wide, landscape images, use a 16:9 pixel ratio. Some example pixel dimensions would be 640x360 or 1,200x720. This is best used in banners or featured story images in our template.
  • You can adjust images directly in Cascade
    1. Open the image
    2. Click on the "Edit" button
    3. To adjust the size of the image, enter values in the "W:" or "H:" boxes. Make sure the lock icon is in the locked position to maintain the current image ratio to avoid stretching the image disproportionately. Don't forget to click the checkmark after the "H:" box to apply your changes.
    4. You can also crop the image by click and dragging over what you want to keep. Apply the crop by clicking on the crop icon (last icon before the "W:" box).