search

collective / collective.lazysizes

Integration of lazysizes, a lightweight lazy loader, into Plone.
https://pypi.org/project/collective.lazysizes
6 stars 2 forks source link

Load image placeholder using data URI scheme #8

Closed hvelarde closed 8 years ago

hvelarde commented 8 years ago

in src/collective/lazysizes/transform.py we should use something like this:

IMAGE = """data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg=="""
...
        if element.tag == 'img':
            portal_url = api.portal.get().absolute_url()
            element.attrib['src'] = IMAGE

this way we save one request per page.

ebrehault commented 8 years ago

We could also use the actual image but in low quality by just adding /mini at the end of its URL.

hvelarde commented 8 years ago

no, by doing that we will duplicate the number of image requests to the backend and increase the page size also; the gray square is fine, I think is a de facto web standard.

instead of doing that we have to implement support for responsive images.

ebrehault commented 8 years ago

That's true (I proposed it as it would be more beautiful if you have a very long list of images to display in the same page, but I agree it would be less performant).

hvelarde commented 8 years ago

there is an additional issue: using /mini at the end of the URL will void caching on reverse proxies.

in fact, lazysizes does a pretty good job uploading images in advance; most of the time you don't see the gray square.