Skip to content

Add hints about image sizes #562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jan 21, 2022
Merged

Add hints about image sizes #562

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce4f058
docs: add hints about image sizes
sgratzl Jan 21, 2022
4e23cfc
Update README.md
krivard Jan 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,26 @@ People on this website are centrally managed in the `/content/people/index.md` f

News items are short announcements that should be persistent. The are centrally managed in the `/content/news/headless` directory. Each news item is its own file with content, title, and publication date.

## Image Sizes and Aspect Ratios

The website is configured to automatically resize images for optimized page load times. However, starting with a proper aspect ratio is essential.

"Artifacts" are undesirable blurry or blocky areas of an image created during resizing or compression. The presence and impact of artifacts can be affected by multiple factors, including the original size (greater size difference to target -> more artifacts), but also the actual content of the image (slow gradients next to areas of high contrast are particularly bad). You can reduce or avoid artifacts by choosing an image which is closer to its target size, or swapping in an image with more background texture.

Following images size and aspect ratios are used:

| Image Type | Preferred Size | Aspect Ratio | Target Width |
| --- | --- | --- | --- |
| Landing Page Banner | 1440x500 | 2.88:1 | 1440px |
| Team Member | 250x250 | 1:1 | 250px |
| Blog Banner | 1120x440 | 2.5:1 | 1120px |
| Blog Teaser | 300x300 | 1:1 | 300px |
| Research Paper Teaser | 300x300 | 1:1 | 300px |
| Latest Card Teaser | 300x300 | 1:1 | 300px |
| News Item Teaser | 300x300 | 1:1 | 300px |



## Release Process

The release consists of multiple steps which can be all done via the GitHub website:
Expand Down