Teasers load the original images, up to several MB each: the front page weighs 14 MB

Open
  • Is something wrong?
#672 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@guidol-ive is already working on this.

Since Oct 28, 2026.

  • #673 by @guidol-ive — open

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript, php
Domain
frontend, performance

Research direction

The teaser image is created in peer_reviewed_article.php; start by reading how it calls HyphaImage::getUrl($w, $h) and how image dimensions are available. Implement the expected proportional scaled image, dimensions, and lazy loading, then verify the teaser output and front-page image loading. Pull request #673 is already open for this issue.

Written by the indexing model from the issue text.

Description

Impact: Medium Level: Easy Type: Bug Value: Visitors

Problem

The front page of a site with articles weighs 14 MB. Lighthouse gives performance 70, with a Largest Contentful Paint of 31.6 s on a throttled connection.

  • Every teaser of an article with a featured image (img.featured_image, made in peer_reviewed_article.php) loads the original upload. These are often PNG screenshots or camera photos of 2–3 MB, shown a few hundred pixels wide. On the measured page the three largest were 2.8 MB each, and Lighthouse estimates 9 MB of savings on images alone.
  • The images have no width and height, so the page shifts while they load ("unsized images").
  • They load all at once, also the ones far below the fold.

HyphaImage can only crop to a fixed width and height (getUrl($w, $h)), not scale to a width while keeping the proportions.

Expected

  • A teaser loads a version scaled down to a width that is sharp in the layout, also on a screen with a high pixel density.
  • The image has its width and height.
  • It loads when it comes into view (loading="lazy").
Dominant language
JavaScript
Stars
5
Forks
9
Avg merge
18h 49m
Merged PRs (30d)
13

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from PlanBCode/hypha

All issues in PlanBCode/hypha

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.