1531933 - Optimize image sizes & lazy load

Status: RESOLVED FIXED

(Firefox :: New Tab Page, enhancement, P1)

Description

[Gavin Suntop [:gvn] (they/them)]

Pull smaller image sizes where appropriate. Currently we are pulling the same image size for all components regardless of display dimension. This may involve on the fly rewriting of the resize parameter for image URLs.

Comment 1

[Gavin Suntop [:gvn] (they/them)]

@Mathijs: Does our image CDN give other options beside sizing? Does it let us control image formats?

Is there documentation of the parameters somewhere?

Comment 2

[Gavin Suntop [:gvn] (they/them)]

Per Daniel: "The image cache uses thumbor under the hood, you can use all the parameters that are available here: https://thumbor.readthedocs.io/en/latest/usage.html the old /direct way works too"

Comment 3

[Gavin Suntop [:gvn] (they/them)]

Currently all images are 450px. Upcoming PR will request 1x or 2x image of appropriate size based on rendered width and screen density.

Comment 4

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4885

Comment 6

[Ed Lee :Mardak]

https://hg.mozilla.org/mozilla-central/rev/7a435211fa07

Comment 7

[Ciprian Muresan [:cmuresan], Ecosystem QA]

@gvn, I've noticed two things that need a bit of discussion before I can mark this issue as verified.

First one: Are we ok with some of the images looking blurry in some cases? Is seems as though the list with images sections that are among the first to load have really blurry images, but if I scroll down the page I can see the same images but they are clearer.

Image 1 (left is latest nightly, right is older nightly before the patch)
Image 2 (same as above)

Second one: It looks like some images are loaded pretty late and you can catch a glimpse of a blank space that loads and image. Is this behavior something that we want to keep?

Link to screen recording

Comment 8

[Gavin Suntop [:gvn] (they/them)]

First one: Are we ok with some of the images looking blurry in some cases? Is seems as though the list with images sections that are among the first to load have really blurry images, but if I scroll down the page I can see the same images but they are clearer.

Could you grab the image source when you see this happening? I haven't noticed this behavior and that would help me investigate. Also, are you using a high density display? If you refresh after about 10-20 seconds does the image sharpen? There are cases I've seen where if you are the first person to hit an optimized image route it times out due to server processing time. In that case it will fall back to a non optimized image, but subsequent views should be fine. The good news is this only will ever happen to one person and only one time.

Second one: It looks like some images are loaded pretty late and you can catch a glimpse of a blank space that loads and image. Is this behavior something that we want to keep?

This is expected behavior for lazy loaded images. We are loading images as they scroll into the viewport to improve initial loading performance. This also prevents network requests for images that are never scrolled into view.

Comment 9

[Ciprian Muresan [:cmuresan], Ecosystem QA]

It's easily reproducible (on dev-test-all at least) on a new profile, but I've also managed to reproduce on my regular long standing profile. It looks like it happens more on new images that need to be loaded.

This is the source of the image:
<img src="https://img-getpocket.cdn.mozilla.net/80x0/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fstatic01.nyt.com%2Fimages%2F2019%2F04%2F18%2Fstyle%2F15astrologybiz-1%2F15astrologybiz-1-facebookJumbo.jpg" srcset="https://img-getpocket.cdn.mozilla.net/160x0/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fstatic01.nyt.com%2Fimages%2F2019%2F04%2F18%2Fstyle%2F15astrologybiz-1%2F15astrologybiz-1-facebookJumbo.jpg 2x">

I'm using a regular 1080p display. The images look a lot better on a retina display tbh, even though they have the same image source.

Refreshing doesn't seem to do anything in my case, and sometimes it looks like an image that looked good will load blurry. Looking at the source more closely, it seems that when the image looks good the source is 280x146 and when it's blurry the source is 80x42.

@gvn, it seems like this got more complicated, do we want to move this into a different bug and track it there?

Comment 10

[Gavin Suntop [:gvn] (they/them)]

One thing to bear in mind is that srcset is being used to conditionally load in a 2x resolution image for high pixel density (aka Retina) screens. Therefore on the 1080p you'll likely get a lower res image by design (I'm not sure what size the screen is, which is also needed to determine pixel density).

I'm fine keeping this issue within this bug, but if you'd like to open a new one that is also fine with me.

I'll do some more research on this today...

Comment 11

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/activity-stream/pull/4914

Comment 12

[Gavin Suntop [:gvn] (they/them)]

I realized that the strategy I was using was a bit too aggressive in some cases and have created a PR that should improve image quality. Some aspect ratios were getting pulled at too small of a resolution before.

Comment 13

[Ciprian Muresan [:cmuresan], Ecosystem QA]

Reopening the bug as the new PR will be exported in a different bug.

Comment 14

[Ed Lee :Mardak]

Looks like the original landing caused bug 1545455. Generally additional work happens in new bugs otherwise tracking gets tricky.

Comment 15

[Gavin Suntop [:gvn] (they/them)]

Ok, creating a new bug: 1545503