Skip to content
This repository has been archived by the owner on Feb 10, 2024. It is now read-only.

Optimize images #45

Closed
MrGreenTea opened this issue Nov 3, 2023 · 6 comments · Fixed by #103
Closed

Optimize images #45

MrGreenTea opened this issue Nov 3, 2023 · 6 comments · Fixed by #103
Milestone
Initial website l...

Comments

@MrGreenTea
Copy link
Contributor

When building the page we should optimize images.

Here are some links:
@MrGreenTea MrGreenTea added this to the Initial website launch milestone Nov 10, 2023
@MrGreenTea MrGreenTea mentioned this issue Nov 10, 2023
Closed
@MrGreenTea
Copy link
Contributor Author

We should also add height and width to avoid CLS:
https://web.dev/articles/optimize-cls?utm_source=lighthouse&utm_medium=devtools&hl=de#images-without-dimensions

@MrGreenTea
Copy link
Contributor Author

MrGreenTea commented Nov 22, 2023 •
edited
Loading

Svelte have recently released this package:

https://kit.svelte.dev/docs/images

https://www.npmjs.com/package/@sveltejs/enhanced-img

@MrGreenTea
Copy link
Contributor Author

Should we start using a CMS or CDN we should take a look at https://unpic.pics/img/

@MrGreenTea
Copy link
Contributor Author

I'm not sure how we can best optimize background images though. @sveltejs/enhanced-img only works for the img tag.

@MrGreenTea
Copy link
Contributor Author

We can of course use an img tag instead of background-image and place it behind everythin but that feels wrong...

MrGreenTea added a commit that referenced this issue Nov 24, 2023
@MrGreenTea
Use enhanced:img for events heros
7f26ba0 
See #45
MrGreenTea added a commit that referenced this issue Nov 24, 2023
@MrGreenTea
Use optimized images on homepage calendar
f4844cf 
See #45
MrGreenTea added a commit that referenced this issue Nov 24, 2023
@MrGreenTea
Optimize image on members page
8201e55 
See #45
@MrGreenTea MrGreenTea mentioned this issue Nov 24, 2023
Merged
@MrGreenTea
Copy link
Contributor Author

sveltejs/kit#8561

MrGreenTea added a commit that referenced this issue Nov 30, 2023
@MrGreenTea
Use enhanced:img for events heros
0bffd91 
See #45
MrGreenTea added a commit that referenced this issue Nov 30, 2023
@MrGreenTea
Use optimized images on homepage calendar
c4ed8ad 
See #45
MrGreenTea added a commit that referenced this issue Nov 30, 2023
@MrGreenTea
Optimize image on members page
16a610a 
See #45
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
Initial website launch
Development

Successfully merging a pull request may close this issue.

Optimize images YoungVision-eV/homepage-sveltekit
1 participant
@MrGreenTea