Displaying the same image several times with multiple p:graphicImage without multiple HTTP requests

Question

I'm using p:graphicImage tag in my XHTML page to displaying the same image in small an large :

<f:facet name="header">#{msgs.ATTR_PICTURE}</f:facet>
<h:panelGroup>
    <p:graphicImage id="product_thumbnail" styleClass="thumbnail"
            cache="false" value="#{imageBean.streamedImageById}">
        <f:param name="productId" value="#{_product.id}" />
    </p:graphicImage>
    <p:tooltip id="imagebigger" for="product_thumbnail" position="right" showDelay="0" showEffect="blind" styleClass="tooltip_thumbnail">
        <p:graphicImage value="#{imageBean.streamedImageById}" styleClass="thumbnail_large" cache="false">
            <f:param name="productId" value="#{_product.id}" />
        </p:graphicImage>
    </p:tooltip>
</h:panelGroup>

I would like to avoid the 2 HTML requests systematically for each image to display. Is there a way to avoid that ?

Answer 1

You could use the stream attribute and set it to false.
This will render the image in base64 instead of rendering the URL to the image.
I don't suggest it as the markup will be very big and probably much worse performance.

Answer 2

I you remove the cache="false" from the first p:graphicImage (it defaults to true) the image is retrieved in the first <img ... /> (which the p:graphicImage renders to) on the client and just displayed from the client cache for the second one without retrieving it twice.

The cache="false" might have been there for a reason like you mentioned in the comments, but that is effectively a new question for which there are several Q/A in Stackoverflow but which one is the most appropriate depends on the details of your use case. Your new question might either be a duplicate again or a new valid question on its own... It might even be that returning the cache="true on the first p:graphicImage and replacing the second one with something else (even some pure client-side 'duplication' e.g.) might be a good approach.