Avoid scaling images

[marimeireles]

"Scaling images in the browser takes extra CPU time and will hurt performance on mobile. And the user will download extra kilobytes (sometimes megabytes) of data that could be avoided."

One way to fix it is create multiple version of the same image server-side and serve the appropriate one. But I don't think that's appropriated at all for our website.

@miketaylr said it's relevant to improve performance on the single issue page and I think we could try to look at how images are being rendered at the website. Currently we have this scaling image problem that I don't know if can be fixed, but I'll explore more about this subject and post what I find in this issue.

[karlcow]

Currently we have this scaling image problem

• What is the scaling issue?
• Where the initial sentence comes from?

[marimeireles]

It comes from a performance tool I was using http://sitespeed.io/
We were getting a bad score (50/100) for scaling images. The tool doesn't offer anymore feedback than that, that's why I created the issue to explore what does that mean.

What is the scaling issue?

I imagine that it's related to change of layout? Or maybe it's because we fetch the image from github and it doesn't fit our page and then we have to resize it. I really don't know for sure.

[karlcow]

Yes any responsive design sites are scaling images.
Note that it depends on the page you test too.
If people interacted with the issue on webcompat.com only, then the images are already scaled down, this was done in #710

But each time someone post comments through GitHub and upload images, then we have no control on the image size. And we can't do anything about it (except post comment editing by webcompat-bot but I don't think it's worth the work and the tampering).

It's part of the constraints of our model.

[marimeireles]

Yeah. Okay, seems like you've already made an otsukare here @karlcow. Thanks!