Get the Highest Resolution Image
Overview
Many modern websites which display images include an optimization where, depending on the client's rendering configuration, the client selects an image to display from multiple potential image candidates. This is usually implemented as a srcset. When using AgentQL to fetch image URLs on a page, you may want to select which image to use, whether it's the best resolution or smallest size.
AgentQL Context
Through AgentQL Context, you can pass additional details about how to disambiguate between multiple candidate elements. By leveraging the context, you are able to hint for what particular candidate image to select from a set.
Example
On this website (https://webkit.org/demos/srcset/), if you run the following query:
{
image_url
}You get back {"image_url": "https://webkit.org/demos/srcset/image-src.png"}. However, inspecting the source, you see that this element can actually select from a number of different resolution images, depending on different properties from the client. If you want to select for the best quality image available, you can do this by leveraging the context as well, such as:
{
image_url(for the largest available image)
}This now hints to AgentQL that, though there are multiple correct image URLs, you are looking for the largest image, and you correctly get back {"image_url": "https://webkit.org/demos/srcset/image-4x.png"}!
