Optimize images on CDN

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

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
30/100
Issue type
Refactor
Clarity
Mostly clear
Activity status
Active
Domain
cloud, performance

Research direction

The payload names no files or code paths, so start by finding where the sprite and backdrop image URLs are referenced in the scratch-editor repo and what they point to on the CDN. The open question is how the CDN is updated, so confirm that process with the maintainers before generating assets. Done means optimized files are in place on the CDN and the loading code uses them, with the size reduction measured.

Written by the indexing model from the issue text.

Description

The sprite and backdrop images on the CDN are not optimized for the web.
Choosing the correct image type jpg vs. png can make a huge difference. Also pasting the svgs through svgomg gives 20%+ reduction in file size.

I can generate the optimized images and change the code for the loading part. How can the images updated in the CDN?

Whay this?
Reduction of bandwidth - saves CO2 and makes the page quicker.
I also created issue https://github.com/scratchfoundation/scratch-editor/issues/719 for optimizing the loading with loading="lazy" tag.

Dominant language
JavaScript
Stars
310
Forks
299
Avg merge
19h 41m
Merged PRs (30d)
14

Getting set up

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 scratchfoundation/scratch-editor

All issues in scratchfoundation/scratch-editor

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.