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.

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

Reduce size of guide dev server images #37741

Merged
merged 3 commits into from
Feb 15, 2023
Merged

Reduce size of guide dev server images #37741

merged 3 commits into from
Feb 15, 2023

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Dec 28, 2022

Description

This PR suggests to reduce the size of the static/docs/5.3/assets/img/guides/*-dev-server*.png images which were 2280px width.

I've chosen arbitrarily a value of 1000px width (like some in this same directory) and used https://www.iloveimg.com online tool.

This PR can be closed if this topic has already been mentioned/tackled before or if we want to use other values or tools to do that.

If this PR is merged, we probably want to update them in our gh-pages branch.

Motivation & Context

Save some trees.

Type of changes

  • Enhancement

Checklist

Live previews

@github-actions
Copy link
Contributor

Images automagically compressed by Calibre's image-actions

Compression reduced images by 17.2%, saving 38.82 KB.

Filename Before After Improvement Visual comparison
site/static/docs/5.3/assets/img/guides/parcel-dev-server-bootstrap.png 43.44 KB 36.52 KB -15.9% View diff
site/static/docs/5.3/assets/img/guides/parcel-dev-server.png 34.87 KB 28.21 KB -19.1% View diff
site/static/docs/5.3/assets/img/guides/vite-dev-server-bootstrap.png 37.87 KB 32.15 KB -15.1% View diff
site/static/docs/5.3/assets/img/guides/vite-dev-server.png 33.62 KB 27.67 KB -17.7% View diff
site/static/docs/5.3/assets/img/guides/webpack-dev-server-bootstrap.png 40.82 KB 34.02 KB -16.7% View diff
site/static/docs/5.3/assets/img/guides/webpack-dev-server.png 35.40 KB 28.63 KB -19.1% View diff

99 images did not require optimisation.

Update required: Update image-actions configuration to the latest version before 1/1/21. See README for instructions.

@XhmikosR
Copy link
Member

XhmikosR commented Dec 28, 2022

I'll have a pass at those. None of the tools out there achieve the best compression AFAICT.

EDIT: ...and you can easily see the above from the fact that calibre action optimized them 😛

EDIT2: the gh-pages branch is only updated when a release is made, unless it's something that doesn't apply to main or is super-important.

@julien-deramond
Copy link
Member Author

EDIT2: the gh-pages branch is only updated when a release is made, unless it's something that doesn't apply to main or is super-important.

When I said we probably want to update gh-pages, I talked about the previous versions already released where the guides (and their images) were already there. Not talking about the 5.3 which will be updated when the real stable 5.3 will be released.

@XhmikosR
Copy link
Member

Yeah, we don't touch the old versions unless it's something really important, which in this case it isn't.

@mdo
Copy link
Member

mdo commented Dec 29, 2022

I can re-export the source at a specific size. I'd suggest a minimum of 2x the widest content width (805px), which is 1610px. That way we keep retina quality 2x. We could do a 1x version though for smaller ones. Thoughts @XhmikosR?

@XhmikosR
Copy link
Member

Sounds good to me, @mdo. I'll compress the newly exported images then.

@mdo mdo merged commit 42e99cc into main Feb 15, 2023
@mdo mdo deleted the main-jd-reduce-guide-images branch February 15, 2023 18:41
@mahilanmjd mahilanmjd mentioned this pull request Apr 16, 2023
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

None yet

3 participants