Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Too large size+dimension of images on Events Pages

Abierto
  • ¿Algo no está bien?
#424 3 comentarios 1 reacción 1 asignado Ver en GitHub

Los mantenedores suelen responder en 1 día

@andrea-kyurchiev ya está trabajando en esto.

Desde el 27/4/2023.

  • #522 de @andrea-kyurchiev — abierto
  • #1032 de @copilot-swe-agent — abierto

Evaluación

Este issue todavía no se ha evaluado.

Descripción

bug

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

  1. image size (in KB)
  2. 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.

Screenshot 2022-12-12 at 13 26 51

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.

Lenguaje dominante
HTML
Estrellas
31
Forks
33
Merge medio
3 h 57 min
PR fusionados (30 d)
16

Preparar el entorno

Abrir en Codespaces

Inicia el contenedor de desarrollo del proyecto en tu navegador, con tu propia cuenta de GitHub.

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de InnerSourceCommons/innersourcecommons.org

Todos los issues de InnerSourceCommons/innersourcecommons.org

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.