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

Too large size+dimension of images on Events Pages #424

Open
spier opened this issue Dec 12, 2022 · 0 comments · May be fixed by #522
Open

Too large size+dimension of images on Events Pages #424

spier opened this issue Dec 12, 2022 · 0 comments · May be fixed by #522
Labels
bug Something isn't working

Comments

@spier
Copy link
Member

spier commented Dec 12, 2022

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:
#189

Hope that you find this helpful. I will keep updating and adding to this issue if I learn anything new.

@spier spier added the bug Something isn't working label Dec 12, 2022
@andrea-kyurchiev andrea-kyurchiev linked a pull request Apr 27, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant