Too large size+dimension of images on Events Pages
メンテナーはふだん 1 日以内に返信
@andrea-kyurchiev がすでに取り組んでいます。
2023年4月27日 から。
評価
この issue はまだ評価されていません。
説明
We have two issues related to the images on the Events Page.
In summary the issue is:
The page loads a lot slower than it has to.
The issues that I can see are related to
- image size (in KB)
- image dimension (in px)
(1) size (in KB)
Checking the folder /static/images/events I noticed that starting with meetup-2022-03-29.png the images all have a much larger size than they should have, and instead of JPG are stored as PNG. See screenshot.
Image sizes are between 500 KB to up to 1.2 MB. Certainly too large for your typical use on the web.
A fix for the existing images would be to:
- convert them to JPG with an appropriate level of compression
- delete the PNGs
- adapt the event entries accordingly to use the JPGs
In a 2nd step we would have to determine how to prevent this from happening again e.g. warnings, automations, etc.
(2) dimension (in px)
Most images are around dimension of 960x540.
Again, a lot larger than what we need.
We use these images in these dimensions on the page, from what I can tell:
- ~540x300px (rendered down) for the preview of the upcoming future events
- ~350x200px (rendered down) for the list of past events
So at the very least, we could reduce the filze dimension down to width 540px I guess?
That should further reduce the file size as well.
Expected behavior for both
The page load time should be as past as possible. The more images we add, the slower the page loads.
One starting point to check what our current users experience could be to check page load times in Google Analytics.
Another tool that may be helpful: PageSpeed Insights
(especially see the OPPORTUNITIES and DIAGNOSTICS section)
Additional context
There were other PRs in the past where we fixed size + dimensions of old images.
Those could be helpful to review to find a better solution.
One such PR that I remember is this one:
https://github.com/InnerSourceCommons/innersourcecommons.org/pull/189
Hope that you find this helpful. I will keep updating and adding to this issue if I learn anything new.
- 主要言語
- HTML
- スター
- 31
- フォーク
- 33
- 平均マージ
- 3時間 57分
- マージ済み PR（30日）
- 16
環境構築
このプロジェクトの開発コンテナを、あなたの GitHub アカウントでブラウザ上に起動します。
- Dockerfile または Docker Compose ファイルあり
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
InnerSourceCommons/innersourcecommons.org のほかの issue
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
InnerSourceCommons/innersourcecommons.org#1197 ·
メンテナーはふだん 1 日以内に返信
-
enhancement
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
InnerSourceCommons/innersourcecommons.org#1187 ·
メンテナーはふだん 1 日以内に返信
-
Update members mapオープン
難易度 2/5 1〜3時間 初心者へのやさしさ 50/100
InnerSourceCommons/innersourcecommons.org#1174 ·
メンテナーはふだん 1 日以内に返信
-
難易度 4/5 3〜5日 初心者へのやさしさ 35/100
InnerSourceCommons/innersourcecommons.org#1132 ·
メンテナーはふだん 1 日以内に返信
-
Activate the usual DependaBot / CodeQL / secret scanning infrastructure GitHub provides for the repoオープンbug
難易度 3/5 1〜2日 初心者へのやさしさ 45/100
InnerSourceCommons/innersourcecommons.org#1128 ·
メンテナーはふだん 1 日以内に返信