Skip to content
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

Jump to bottom

Better image optimizations #33

Open
MrGreenTea opened this issue Feb 10, 2024 · 9 comments
Open

Better image optimizations #33

MrGreenTea opened this issue Feb 10, 2024 · 9 comments
Labels
needs:goal This issue has no clear goal state defined refactor Improves existing code

Comments

@MrGreenTea
Copy link
Contributor

Currently most images use a single image size and waste a lot of bandwith to download 4k images for them to then be displayed in a 400x400 px element.

We can use the <Image widths={[ ... ]} /> attribute to generate the widths the element is displayed as.
@MrGreenTea MrGreenTea mentioned this issue Feb 10, 2024
Merged
@MrGreenTea
Copy link
Contributor Author

I've added it for the background images as these were completely unoptimized and were responsbile for almost all our bandwidth usage

@MrGreenTea MrGreenTea added the refactor Improves existing code label Feb 10, 2024
@MrGreenTea
Copy link
Contributor Author

MrGreenTea commented Feb 15, 2024 •
edited
Loading

How can we optimize backgrounds for different screen sizes?

Perhaps we can build a component similar to Layout that just includes a background for the whole thing?

@MrGreenTea
Copy link
Contributor Author

Maybe we could also include blurred placeholders? Something like this offers: https://unpic.pics/placeholder/

MrGreenTea added a commit that referenced this issue Feb 27, 2024
@MrGreenTea
perf(app): #33 optimize all images in what we do section
75c3754 
This includes a refactor to astro for the component.
@MrGreenTea MrGreenTea mentioned this issue Feb 27, 2024
Merged
MrGreenTea added a commit that referenced this issue Feb 27, 2024
@MrGreenTea
perf(app): #33 optimize all images in what we do section
4c55353 
This includes a refactor to astro for the component.
MrGreenTea added a commit that referenced this issue Feb 27, 2024
@MrGreenTea
perf(app): #33 optimize all images in what we do section
0366fdb 
This includes a refactor to astro for the component.
@MrGreenTea
Copy link
Contributor Author

See also https://github.com/johannschopplich/unlazy for generating thumb hash for example
Has no astro integration, but svelte

@MrGreenTea MrGreenTea assigned MrGreenTea and unassigned MrGreenTea Feb 29, 2024
@MrGreenTea
Copy link
Contributor Author

We'll also have to make sure we set sizes correctly, otherwise I don't know if srcset / widths do anything.

MrGreenTea added a commit that referenced this issue Mar 1, 2024
@MrGreenTea
perf(app): #33 optimize all images in what we do section
99c85c0 
This includes a refactor to astro for the component.
MrGreenTea added a commit that referenced this issue Mar 1, 2024
@MrGreenTea
perf(app): #33 optimize all images in what we do section
3d56aef 
This includes a refactor to astro for the component.
github-merge-queue bot pushed a commit that referenced this issue Mar 1, 2024
@MrGreenTea
perf(app): #33 optimize all images in what we do section (#72)
2cd83ba 
* perf(app): #33 optimize all images in what we do section

This includes a refactor to astro for the component.

* perf(tools): only run pnpm install on checkout if necessary

* test(app): 33 expanding exercises

* refactor(app): 33 Move exercises data to @DaTa
@MrGreenTea MrGreenTea added the needs:goal This issue has no clear goal state defined label Mar 1, 2024
@MrGreenTea
Copy link
Contributor Author

What is the exact goal of this issue? When is it done?

@MrGreenTea
Copy link
Contributor Author

We'll also have to make sure we set sizes correctly, otherwise I don't know if srcset / widths do anything.

There sadly is no integration with tailwind for this. But we use the w-X utility a lot and could infer the sizes of the element from it. For example an element like this: <div class="w-12" /> would mean something like this: <img sizes="3rem" /> as the image is always 3 rem wide.

This get's hairier when we use the lg: and similar utlities as we'll have to duplicate the breakpoints (it's 1024px for lg for example) and then have something like this:
<img class="w-12 lg:w-24" sizes="(max-size: 1023px) 3rem, 6rem" />

@MrGreenTea
Copy link
Contributor Author

MrGreenTea commented Mar 9, 2024 •
edited
Loading

I propose as goals

  • all images use either the <Image /> component or the getImage() function
  • all img elements use the appropriate attributes (loading="lazy", easily achieved with {...image.attributes})
  • all img and Image elements use sizes and srcset correctly

One rough estimate is the light house test in Google Chrome. If it does not complain about any image issues anymore we should be on the right track. Make sure to test both Mobile & Desktop!

MrGreenTea added a commit that referenced this issue Mar 15, 2024
@MrGreenTea
perf(website): #33 Correct Image optimizations for Instagram posts
043410a 
Because of the h-52 w-52 clases on the Image component we know the image will always be 13rem wide. We now use this information in the sizes attribute and optmize the images accordingly.
@MrGreenTea
Copy link
Contributor Author

The authors of css tricks recommend not doing any sizes optimizations in this article

If sizes is not specified, it's implicitly set to 100vw which corresponds to the whole viewport width. They say the issue with setting the sizes attribute is that we mix styling with markup.

I think if we can somehow manage to automate the creation of the sizes attribute we could get the best of both worlds.

github-merge-queue bot pushed a commit that referenced this issue Mar 15, 2024
@MrGreenTea
feat(app): #38 update posts from instagram API (#78)
f3504d1 
* feat(app): #38 update posts from instagram API

This might break at any time if instagram changes the query_id. But the alternative is setting up an OAuth app which I couldn't get to work and might not be worth the hassle (at the moment).

Closes: #38

* test(website): #38 use hard coded insta posts in tests

* perf(website): #33 Correct Image optimizations for Instagram posts

Because of the h-52 w-52 clases on the Image component we know the image will always be 13rem wide. We now use this information in the sizes attribute and optmize the images accordingly.

* refactor(website): #38 Make count of insta posts easy to change

Just added a count argument to the getRecentPhotos function.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
needs:goal This issue has no clear goal state defined refactor Improves existing code
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@MrGreenTea