Skip to content

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

@spier

Description

@spier

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.

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions