Too large size+dimension of images on Events Pages
Maintainer antworten meist innerhalb von 1 Tag
@andrea-kyurchiev arbeitet bereits daran.
Seit 27.4.2023.
Bewertung
Dieses Issue wurde noch nicht bewertet.
Beschreibung
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.
- Vorherrschende Sprache
- HTML
- Sterne
- 31
- Forks
- 33
- Ø Merge
- 3 Std. 38 Min.
- Gemergte PRs (30 T.)
- 17
Entwicklungsumgebung
Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.
- Enthält ein Dockerfile oder eine Docker-Compose-Datei
- Hat eine Pull-Request-Vorlage
- Beitragsleitfaden lesen
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus InnerSourceCommons/innersourcecommons.org
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
InnerSourceCommons/innersourcecommons.org#1197 ·
Maintainer antworten meist innerhalb von 1 Tag
-
enhancement
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 35/100
InnerSourceCommons/innersourcecommons.org#1187 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Update members mapOffen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 50/100
InnerSourceCommons/innersourcecommons.org#1174 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100
InnerSourceCommons/innersourcecommons.org#1132 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Activate the usual DependaBot / CodeQL / secret scanning infrastructure GitHub provides for the repoOffenbug
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 45/100
InnerSourceCommons/innersourcecommons.org#1128 ·
Maintainer antworten meist innerhalb von 1 Tag