Put each image URL in an <img src>, place the images in a list, and use CSS Grid to make the list responsive. Set an aspect ratio and object-fit: cover if you want every thumbnail box the same shape. The example below works with local paths or publicly accessible image URLs.
Build a basic responsive gallery
Replace the sample paths with your image URLs. Give each image meaningful alternative text; use alt="" only when an image is decorative or its information is already provided nearby.
As an Amazon Associate I earn from qualifying purchases.
<ul class="gallery">
<li>
<img src="https://example.com/images/coast.jpg"
alt="Rocky coast beside blue water"
width="800" height="600" loading="lazy">
</li>
<li>
<img src="https://example.com/images/forest.jpg"
alt="Sunlight through a forest canopy"
width="800" height="600" loading="lazy">
</li>
<li>
<img src="https://example.com/images/city.jpg"
alt="Buildings along a city street"
width="800" height="600" loading="lazy">
</li>
</ul>.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 1rem;
padding: 0;
list-style: none;
}
.gallery img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}The list provides a meaningful collection structure, while Grid fits as many columns as the available width allows. The 12rem minimum, 1rem gap, and 4:3 frame are example design choices, not required values. Adjust them to suit the page and content. See MDN’s CSS Grid guide.
Recommended Free Tools
Use real image URLs
For a local image, use a path such as images/coast.jpg relative to the HTML file or site root as appropriate. For a remote image, set src to its direct image resource URL, not necessarily the URL of a webpage that displays the image. The address must be reachable by visitors’ browsers. The img element’s src identifies the image resource; alt supplies text that can stand in for it and helps people interpret the image. See MDN’s image element reference.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Keep thumbnail boxes consistent
aspect-ratio: 4 / 3 gives each rendered image a 4:3 box. object-fit: cover fills the box while cropping parts of images whose original proportions differ. If the subject is cut off, move the crop focus with object-position, for example:
.gallery img.portrait {
object-position: center 25%;
}Use object-fit: contain instead when showing the entire image matters more than filling the frame; it may leave empty space inside the box. MDN documents image fitting and positioning.
Reserve space and load images appropriately
Set width and height attributes to the image’s actual intrinsic dimensions, or to dimensions with the same aspect ratio as the intended reserved space. The CSS can still scale the image to the grid column. Reserving geometry helps prevent content from jumping as images load; the WHATWG HTML Standard encourages width and height on lazy-loaded images for this reason. See its embedded content guidance.
Rank #2
loading="lazy" is appropriate for gallery items likely to be below the initial viewport. It defers loading until needed; it does not replace correct sizing. Avoid lazy-loading images that are immediately visible if doing so would delay their display.
Choose between one URL, responsive sources, and alternate crops
A single src is simplest when only one image file exists for each item. If you have multiple resolutions, responsive image attributes let the browser select a suitable candidate for the rendered slot. MDN notes that responsive source selection can improve performance across devices by choosing a more appropriate resource, but the benefit depends on having suitable image variants.
Use srcset and sizes for different resolutions
With width-descriptor candidates, provide sizes so the browser can estimate the image’s display width:
<img
src="https://example.com/images/coast-800.jpg"
srcset="https://example.com/images/coast-400.jpg 400w,
https://example.com/images/coast-800.jpg 800w,
https://example.com/images/coast-1200.jpg 1200w"
sizes="(min-width: 60rem) 25vw, (min-width: 36rem) 50vw, 100vw"
alt="Rocky coast beside blue water"
width="1200" height="900" loading="lazy">Make sure the listed files actually exist and that the width descriptors match their pixel widths. The sizes expression should reflect the gallery’s layout: this example estimates one quarter of a wide viewport, half of a medium viewport, or the full viewport on narrow screens. Consult MDN’s guide to responsive images.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Use picture when the asset itself should change
Use picture when you need a different crop at a breakpoint or an alternate format, while retaining an img fallback:
<picture>
<source media="(min-width: 50rem)"
srcset="https://example.com/images/coast-wide.jpg"
width="1200" height="600">
<img src="https://example.com/images/coast-square.jpg"
alt="Rocky coast beside blue water"
width="800" height="800" loading="lazy">
</picture>Choose this when the composition should vary, not merely when the same image needs a different download size. The browser uses the matching source where applicable and falls back to the nested img. See MDN’s picture element reference and the WHATWG images standard.
Rank #4
Or skip the browser setup
If what you need is a screenshot thumbnail of a webpage rather than an image file already hosted at a URL, ScreenshotNeo can return a screenshot from one GET request. This cURL example saves a WebP capture of a webpage:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for setup and options. Cookie banners, popups, and chat widgets are removed before capture; bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots, and the Free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Sign up for free.
Troubleshoot missing or awkward thumbnails
- Broken image icon: Open the exact
srcURL in a browser. Check spelling, capitalization, file availability, and whether the URL points directly to an image rather than a page. For remote images, confirm the host permits the image to be embedded. - Thumbnails have different heights: Apply the same
aspect-ratioandobject-fitrule to every gallery image. Check that a more specific CSS selector is not overriding it. - The subject is cropped out: Keep
coverif uniform filled frames matter, then tuneobject-positionfor that image. Usecontainif cropping is unacceptable. - The page jumps while images load: Supply accurate
widthandheightattributes and ensure the reserved ratio matches the displayed image or selected source. - The wrong responsive file appears: Verify that all
srcsetcandidates exist, their width descriptors are accurate, andsizesdescribes the actual gallery slot. Width-descriptorsrcsetneeds asizesvalue. - The gallery does not form multiple columns: Confirm that the stylesheet is loaded and that the container has enough width for another column beyond the
minmax()minimum plus grid gaps. Reduce the minimum width if the design allows.
Frequently Asked Questions
Can a gallery use image URLs from another website?
Yes, if the URL identifies an image resource and its host allows browsers to display it on your site. A page URL that merely contains an image is not necessarily an image URL.
Do I need a media query for every gallery column count?
No. The example uses Grid’s auto-fit and minmax() to fit columns based on available space. Use media queries only when the design needs a deliberate layout change beyond that behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
