Opened 7 months ago

Closed 5 months ago

#32359 closed defect (fixed)

unecessary heavy image asset

Reported by: htor Owned by: hiro
Priority: Medium Milestone:
Component: Webpages/Website Version:
Severity: Minor Keywords: website performance accessibility
Cc: traumschule, trac-dip-importer, ggus, antonela, pospeselr Actual Points:
Parent ID: Points:
Reviewer: Sponsor:

Description

i noticed while loading the tor front page that the circle-pattern.png in the page footer weighs more than half a *megabyte*. this is probably just a mistake while deploying assets, since the image is displayed very small compared to its real size.

since the image contains only simple geometric shapes, i would recommend using an svg for that and optimize that. if not, use a png, but compressed and resized properly.

please be considerate about the users of tor (3rd world, slow connections, mobile, etc..) when embedding images. otherwise, congrats on the new design! very good work

thank you!

Child Tickets

Attachments (3)

circle-pattern-grayscaleAlpha.png (425.8 KB) - added by pospeselr 7 months ago.
grayscale+alpha channels
circle-pattern-grayscaleAlpha-halfSize.png (257.5 KB) - added by pospeselr 7 months ago.
grayscale+alpha channels 1/2 length and width
circle-pattern-grayscaleAlpha-compressor.png (103.8 KB) - added by antonela 7 months ago.

Download all attachments as: .zip

Change History (8)

comment:1 Changed 7 months ago by pili

Cc: antonela added

The svg is not downloaded in Safe mode, that's probably why you're not getting the svg.

antonela: can we try to use smaller pngs?

Changed 7 months ago by pospeselr

grayscale+alpha channels

Changed 7 months ago by pospeselr

grayscale+alpha channels 1/2 length and width

comment:2 Changed 7 months ago by pospeselr

Given how this image is used (on the main page at least) it looks like it can be reduced to grayscale/alpha (trims off a bit: down to 435 kb) and reduced in size by half in each dimension (trims off more, but not as much as you'd expect: down to 264 kb).

We can replicate the effect using a grid of divs with various border/margin/bg color if we want to avoid SVG (tor-browser has a similar pattern in about:tor) but it would require a bit of refactoring of the footer.

comment:3 Changed 7 months ago by pospeselr

Cc: pospeselr added

Changed 7 months ago by antonela

comment:4 Changed 7 months ago by antonela

Thanks for reporting this. I just attached a ~100kb image which could work.

We can replicate the effect using a grid of divs with various border/margin/bg color if we want to avoid SVG (tor-browser has a similar pattern in about:tor) but it would require a bit of refactoring of the footer.

Yes! We can replicate the same css pattern we are using in about:tor. Maybe the next useful step is adding it to our styleguide to make it easy to re-use.

Note: See TracTickets for help on using tickets.