From ce4f058331258c9a440546dcd8408283afa1e410 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Fri, 21 Jan 2022 09:13:27 -0500 Subject: [PATCH 1/2] docs: add hints about image sizes --- README.md | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/README.md b/README.md index 31e364347..1a0bac6fe 100644 --- a/README.md +++ b/README.md @@ -176,6 +176,24 @@ 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 picture to an optimized size. However, a proper aspect ratio is essential for a good performance. Moreover, being closer to the target size is useful to avoid image artifacts created during the resizing process. + +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: From 4e23cfccfbb1b0f98d46c8314aaaad6e29d13921 Mon Sep 17 00:00:00 2001 From: Katie Mazaitis Date: Fri, 21 Jan 2022 11:04:53 -0500 Subject: [PATCH 2/2] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1a0bac6fe..5f82f8562 100644 --- a/README.md +++ b/README.md @@ -178,7 +178,9 @@ News items are short announcements that should be persistent. The are centrally ## Image Sizes and Aspect Ratios -The website is configured to automatically resize picture to an optimized size. However, a proper aspect ratio is essential for a good performance. Moreover, being closer to the target size is useful to avoid image artifacts created during the resizing process. +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: