Filenames

• 5 or less words
• Be descriptive
• Readable like a sentence
• Hyphens instead of spaces or underscores
• Example: gallery-image-detail.jpg

Filetypes

Filetypes will determine how fast your image will load and what browsers will support viewing the image. Most image editing software will have the ability to export to any of these formats or you can use an image convertor to change between them.

Web friendly filetypes

• AVIF: AV1 Image Format
  • Highest quality color depth, high quality compression, reserve for high end photography. Not supported by older browsers.
• GIF: The Dancing Hamster Format
  • Simple and easy image format and decent for animated images. One of the first supported formats on the internet.
• JPEG: Joint Photographics Expert Group
  • Lossy compression, great for photographs, not recommended for charts or diagrams.
• PNG: Portable Network Graphics
  • Lossless compression, high color depths, and supports transparent backgrounds. Great all around image format.
• SVG: Scalable Vector Graphics
  • Should be used for site icons, printable forms & diagrams, and other images that need to be accurately rendered at different sizes.
• WebP: Web Photograph
  • Lossy compression, high color depths, supports animations and transparency. Great replacement for jpeg and png but not supported by older browsers.

Non friendly filetypes

• BMP: Bitmap
  • Special case image for creating uncompressed raster images.
• TIFF: Tagged Image File Format
  • Used for high resolution and uncompressed scans of images.
• RAW: Raw Image Format
  • Unprocessed data from a camera or film scanner.

Meta Information

• Alt Text (Required)
  • This is used for instances when the image does not load or when your site is on a screen reader. It should be a short and concise description of the image. Try to describe it to a visually impaired person.
• Title (Not required)
  • The title of your image. If you were to hang it in a gallery, what would you put on the placard next to it?
• Caption (Not required)
  • Add a little more context to your image with the caption.
• Description (Not required)
  • Write a few sentences describing the scene in the photo to the viewer and to help make it more meaningful to them.