Merge pull request #562 from cmu-delphi/sgratzl/image_size_docs

Add hints about image sizes

Author: sgratzl

README.md

@@ -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: