Using img in vaadin-grid columns renderer without reload when sorting

Hi,

I’m building a lit-element using vaadin-grid.
One of the column will contain thumbnails of images :

    __ImgTpl = (item) => html`<div class="pic-container" id="picart-${item.ref}">${item.photos.map(pic => html`
   <div class="floatpix2 clickable" id="pic-${pic.id}" data-ia="${item.ref}" data-idia="${item.key}" data-idpic="${pic.key}" @click="${this.__picClick}"><img src="/pj/thumb/73x55/${pic.id}/${pic.nomF}"></div>
    `)}</div>`;

    __renderPics(root, column, rowData) {
        render(this.__ImgTpl(rowData.item), root);
    }

Every time I change the order of the rows by sorting them, if the row has not the same position, the template of the cell is rendered again, causing the pictures to be reloaded from the server.
I’ve tried to implement cache() from lit-html around the <div id="pic-NN"> but it is still rendered again.

Should I rather implement something like this : https://github.com/chrisben/imgcache.js/ ?

Edit : I’ve implemented my own cache :

    __renderPics(root, column, rowData) {
        if (!this.__isInCache(rowData.item)) {
            render(this.__ImgTpl(rowData.item), root);
            this.__addToCache(rowData.item, this.shadowRoot.getElementById('picart-'+rowData.item.ref));
        } else {
            root.append(this.__getFromCache(rowData.item));
        }
    }
	
	__cache = [];
    __isInCache(item) {
        return this.__cache[item.ref]
 !== undefined;
    }

    __addToCache(item, elem) {
        this.__cache[item.ref]
 = elem;
    }

    __getFromCache(item) {
        return this.__cache[item.ref]
;
    }

Is it the best solution ?