[Question] How to display image thumbnail more clear?

[hieuwu]

Hi, I am using the artwork search API. The thumbnail object has a base64 string image. How do I display this image bigger? As I saw that when I decode this image it is very small

"thumbnail": {
                "alt_text": "Painting composed of short, dense brushstrokes depicts two domed stacks of wheat that cast long shadows on a field. The angled light indicates either a rising or setting sun.",
                "width": 6884,
                "lqip": "data:image/gif;base64,R0lGODlhCAAFAPUAAF5eVW1bVm9eVmpjW3RoXXxyV39yXmdsZmhmaXZtbG11eH57eYl5bYR7dHuAf4mDfo6HfpePdpCFeZSOfJ+VdnZ+g4ODgoCHg4iHgo+GgY2MgpmThJeTipaSjaCcmbWnh6qrpKmopqqtrKusrbGxobq4pLu5qq2zsQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAIAAUAAAYlwJNoFAKRSiZPh7OZRCgfBWJwAAQEBU2D8VgkCAYI5uKoWDKSIAA7",
                "height": 4068
            },

[IllyaMoskvin]

@hieuwu Sorry for our delayed response. So... the thumbnail object is named in a misleading way. The thumbnail object holds some information that is needed to render a thumbnail (e.g. on our website), but in order to actually render a thumbnail, you need to also be aware of the URL conventions of our IIIF Image API:

https://api.artic.edu/docs/#images

What you're looking at in the lqip field is the Low Quality Image Placeholder (LQIP). Their purpose is mainly aesthetic. LQIPs are used to make content load faster on slower connections. You define an <img/> with a src that has the lqip in it, using the width and height to get the right proportions for the element, and then as the user scrolls, or after page load, you use JavaScript to swap out the src for a real image URL. The technique has been around for a while; here's one of the original articles about it:

https://www.guypo.com/introducing-lqip-low-quality-image-placeholders

If you want to display a thumbnail image, use a URL like this:

https://www.artic.edu/iiif/2/a38e2828-ec6f-ece1-a30f-70243449197b/full/200,/0/default.jpg

Here's a hotlink to the image:

If you need a bigger thumbnail, substitute 200, for 400, or even 600,. Read about our image sizes here:

https://api.artic.edu/docs/#image-sizes

Hope this helps!

[hieuwu]

Actually I can display the image with high quality. However, in the search API, it does not return the imageId so that I can not get image url as I did with the /artworks API. Currently, for every search API call, I need to call another API to get list of artworks again just to get the image @IllyaMoskvin It would be nice if the API return imageId in the search result

[hieuwu]

And could please show me examples to get image of artists, articles?

[nikhiltri]

Hey @hieuwu,

The search endpoint returns a minimal set of fields by default, but you can specify that you want your results to return more fields. Add a fields parameter to your search query with a comma-delimited list of field names as they're provided in our general endpoint. In your case, you might add a parameter like &fields=title,id,image_id.

At the moment we don't provide images for artist and article records. I'll make note of it for our roadmap!

Thanks! nikhil

[hieuwu]

Thanks Nikhil. Appreciate your effort following up this old topic and the answer