Scale images and use more efficient formats #26

New Issue

phlaym · 2023-04-26T14:43:19Z

phlaym commented

2023-04-26 14:43:19 +00:00

Save avatars and cover images to server instead of hotlinking. Scale and convert them to be more efficient:

Avatars:
- 50px
- 100px (for 2x)
- 150px (for 3x)
Covers:
- 200px
- 400px (for 2x)
- 600px (for 3x)
- 60px (max-width: 650px)
- 120px (max-width: 650px, 2x)
- ~~(max-width: 650px, 3x) should use the 200px one~~
- 180px (max-width: 650px, 3x)
- ~~Maybe 100px for the stretched, blurred background. Need to check ~~
- Stretched and blurred images always uses the small one

Provide each sizes as JPG, WEBP and AVIF

See:

Save avatars and cover images to server instead of hotlinking. Scale and convert them to be more efficient: - Avatars: - 50px - 100px (for 2x) - 150px (for 3x) - Covers: - 200px - 400px (for 2x) - 600px (for 3x) - 60px (`max-width: 650px`) - 120px (`max-width: 650px`, 2x) - ~~(`max-width: 650px`, 3x) should use the 200px one~~ - 180px (`max-width: 650px`, 3x) - ~~Maybe 100px for the stretched, blurred background. Need to check ~~ - Stretched and blurred images always uses the small one Provide each sizes as JPG, WEBP and AVIF See: - https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture - https://www.npmjs.com/package/sharp

phlaym added this to the Version 1.4 milestone 2023-04-26 14:43:19 +00:00

phlaym added the

enhancement

label 2023-04-26 14:43:19 +00:00

phlaym referenced this issue from a commit

2023-06-14 18:37:42 +00:00

Fix #26: Scale images to the correct size and use more efficient image formats

phlaym closed this issue

2023-06-14 18:37:42 +00:00

Sign in to join this conversation.