881281 - Retina compatible snippets images

Status: RESOLVED WORKSFORME

(Snippets Graveyard :: General, defect)

Description

[Laura Thomson :laura]

Right now the images in snippets are not retinafied. Talking to mkelly, I learned this is a non trivial fix because snippet images are base64 encoded and sent out. We'd either have to add an extra snippet for retina people, require an external request to fetch the right image, or waste bandwidth for non-retina people which is an important consideration in non-US markets.

mkelly also advises the service is about to be rewritten, so this seems a good feature to consider when doing that rewrite.

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Well, we can set image-rendering: crisp-edges; on the snippets image so that it doesn't get so blurry on Retina displays.

Comment 2

[Osmose [:osmose, :mkelly]]

An update: We decided to use SVGs for a while in order to support Retina-based displays, but have run into issues with SVG filesizes. Some of this could be fixed by being better at optimizing the SVGs we're producing (I believe our creative team is just exporting from Illustrator, which I think has some issues with exporting SVGs), but we also want to consider other options:

- Add DPI to the snippets URL and serve higher-DPI images to clients that can support them.
- Use only retina-size images and force non-retina clients to scale down images.
- Add some tooling to either the service or our workflow to optimize SVGs.

Comment 3

[Osmose [:osmose, :mkelly]]

Also another problem to address is how to have High DPI animated images that we can use in snippets.

Comment 5

[Jean Collings]

Cmore, another piece as part of the snippet product roadmap. Is this possible for Q4?

Comment 6

[Chris More [:cmore]]

(In reply to Jean Collings from comment #5)
> Cmore, another piece as part of the snippet product roadmap. Is this
> possible for Q4?

Yes, possible after the performance work is out the door and bigger snippets don't impact performance. I would add this to your roadmap and decide how important this is to you compared to everything else.

Comment 7

[Giorgos Logiotatidis [:giorgos]]

Many things have changed since this was originally reported. We now use larger icon sizes and better distribution methods. Yet we're still working on making things better in https://github.com/mozmeao/snippets-service/milestone/12

I'll mark this one WFM. Thanks for reporting!