1. You are here:
2. Handbook
3. Marketing
4. Digital Experience Handbook
5. Image Guidelines

On this page

• File size limits
• Dos and don'ts
• Logos
• Photos
• Graphics
• Animations

Image Guidelines

Please note that deviation from these guidelines will increase production time.

The purpose of this page is to present guidelines for image file formats. The intended audiences are people who might not be familiar with design tools nor our unique requirements when working on items like about.gitLab.com, print collateral, and more.

We highly suggest you ask any partner/vendor/client for images that follow these guidelines. Examples of this include but are not limited to:

• Partner pages
• Event sponsors
• Case studies
• Comparison pages
• Trusted by sections

File size limits

Our website has a 2MB file size limit. Please plan accordingly when providing image assets.

Dos and don'ts

• Don't supply images inside of a google doc, powerpoint, etc. Please link to an image file directly, in a zip file, a google drive folder, or a git repository.

Logos

• All logos should be provided in a vector format such as .SVG, .EPS, or .AI. An SVG is preferred.
  • SVG is a web-native format that any modern web browser can read.
  • Vector formats scale cleanly to devices of any size.
• The SVG should be saved using presentation atributes rather than style attributes.
  • Presentation attributes are easier to work with when building websites.
• All fonts & typography need to be outlined
  • Most users will not have a copy of any fonts used in a logo.
• Please provide a monochromatic logo and a color logo.
  • Limiting color palletes is a way to reduce contrast-of-color in order to conserve attention-span.
  • Monochromatic logos are used in most places but we also use color logos in select locations. It helps to have both.
• For dimensions, we require a width that is greater than or equal to its height.
  • Ideally an aspect ratio between 1:1 and 2:1 (width:height).
  • This is necessary to ensure that the logos will fit into specific locations on the website.
• Artboards should be sized appropriately.
  • If for example a logo were 400px by 200px, please crop the artboard accordingly. Do not leave the logo on an artboard that's 1800px by 2600px.
• It's preferable (but not required) that logos are lockups (logo + wordmark).
  • For example, the words "Pepsi" with their circle icon, as opposed to just the icon or just the name.
  • Lettermarks might be unrecognizeable without a wordmark. Wordmarks alone can be unintelligible in other languages. Lettermarks can overlap with similar acronyms, potentially complicating internet searches.
• It's preferable (but not required) that logos be legible at small sizes.
  • Please be aware that some elements of a logo might be too thin or small to read or discern at small sizes.

Photos

• Photos usually start off as a high-quality lossless jpg before being optimized.
  • If we will be preparing a photo for you we ask that you supply us with a high quality file.
  • If you will be preparing the photo on your own, please ensure it is optimized per the above link and ask us to review the performance before merging.
    • If you are unsure what size the image needs to be, feel free to contact us for assistance.
• All photos must have prior consent or licensing for use on our website.
• We often use stock photos from Unsplash.

Graphics

In the rare case where a JPG or SVG aren't applicable, a full-color PNG with a transparent background is often preferred.

Animations

Animations are typically supplied via GIF but might be provided via SVG in certain circumstances. Due to limited browser and tooling support we do not accept WebP files at this time. Animations must conform to the file size limit of 2MB. Animations larger than 2MB might need to be converted into a video file such as MP4 with special arrangements and extra lead time for implementation.