Some images used within docs are too big

[christian-bromann]

🐛 Bug Report

Have you read the Contributing Guidelines on issues?

• [x] Yes

Description

I was looking through the load performance of the app and discovered that some images like this one are quite heavy, e.g. 500+ kb. We should avoid having big screenshots within our docs pages and should pay attention about image file sizes.

To Reproduce

See example this request downloading an image with 513kb.

Expected Behavior

No image should be bigger than 100kb IMHO. Less is better here. I suggest to add a image image optimisation step into the pipeline. It would also be nice if images could be served in modern formats.

Actual Behavior

I haven't looked into all static files but I am sure there are many more that are quite big.

Scripts and configuration needed to reproduce this issue (if applicable)

Your Environment

• OS:
• Node version:
• Docusaurus version:
• Browser version:

[sauce-doc-bot]

Thanks so much for the feedback, Christian! I just created a ticket to look into the issue.

Laura

• http://www.saucelabs.com/*

Technical Content Team | Sauce Labs Sauce Labs http://saucelabs.com/ | Sauce blog http://saucelabs.com/blog

On Mon, Oct 18, 2021 at 7:29 AM Christian Bromann @.***> wrote:

🐛 Bug Report Have you read the Contributing Guidelines on issues? https://github.com/saucelabs/sauce-docs/blob/main/docs/contributing.md

• Yes

Description

I was looking through the load performance of the app and discovered that some images like this one https://docs.saucelabs.com/img/team-mgmt/team-mgmt-view-settings-nav.jpg are quite heavy, e.g. 500+ kb. We should avoid having big screenshots within our docs pages and should pay attention about image file sizes. To Reproduce

[image: Screenshot 2021-10-18 at 14 21 20] https://user-images.githubusercontent.com/731337/137729285-d3649c1d-dd83-4608-9fbf-cc7ee3255d59.png

See example this request downloading an image with 513kb. Expected Behavior

No image should be bigger than 100kb IMHO. Less is better here. I suggest to add a image image optimisation step into the pipeline. Actual Behavior

I haven't looked into all static files but I am sure there are many more that are quite big. Scripts and configuration needed to reproduce this issue (if applicable) Your Environment

• OS:
• Node version:
• Docusaurus version:
• Browser version:

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/saucelabs/sauce-docs/issues/808, or unsubscribe https://github.com/notifications/unsubscribe-auth/AV6KJIRDGXJJ6GWZUPADVR3UHQHJTANCNFSM5GGQXOMA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[sweeneyskirt-sl]

Hi @christian-bromann and @lauramthomas : Just a note on this one with respect to modern formats. It is my understanding that at this time, docusaurus does not support .webp image files, although there is a feature request for it on the docusaurus repo from August 2020 that has not been addressed: https://github.com/facebook/docusaurus/issues/3185 That said, we can certainly look into reducing our image file size as one of our contribution guidelines.

[maxdobeck]

WebP https://developers.google.com/speed/webp Creating a webp image from an existing image https://developers.google.com/speed/webp/docs/cwebp.