How to Make a JPG Image Clickable with an HTML Link

Put the image inside an anchor. Set the destination in href, the JPG file in src, and describe the destination or action in alt.

<a href="https://example.com/gallery">
  <img src="images/photo.jpg" alt="Open the photo gallery">
</a>

The whole image is now a link. A JPG file is not interactive by itself; HTML supplies the link behavior.

1. The basic clickable JPG pattern

Use an anchor element (<a>) as the outer element and place the image element inside it:

<a href="/gallery.html">
  <img src="images/photo.jpg" alt="View the photo gallery">
</a>

href is the destination.
src identifies the JPG resource.
alt is the accessible name when the image is the link’s only content.

Keep the opening and closing anchor tags around the image. Putting the two elements next to each other does not make the image clickable.

2. Link to pages on the same site

A site-relative URL starts with a slash and works from any page on that domain:

<a href="/about.html">
  <img src="team.jpg" alt="Read about our team">
</a>

A relative URL is resolved from the current document’s location:

<a href="gallery.html">
  <img src="images/photo.jpg" alt="Open the gallery">
</a>

Use a relative path when the destination is part of the same site and your directory structure is stable. Use a root-relative path such as /gallery.html when pages may live in different folders.

3. Link to an external website

Use an absolute HTTPS URL for another domain:

<a href="https://developer.mozilla.org/">
  <img src="images/mdn-logo.jpg" alt="Visit MDN Web Docs">
</a>

The browser follows the external destination when a visitor clicks anywhere on the image.

4. Open the destination in a new tab

Add target="_blank" when a new browsing context is intentional. Tell users that the link opens a new tab in the accessible name or nearby visible text:

<a href="https://example.com/gallery"
   target="_blank"
   rel="noopener">
  <img src="photo.jpg" alt="Open the gallery in a new tab">
</a>

target="_blank" changes where the destination opens. The disclosure in the alternative text makes that behavior clear to screen-reader users. rel="noopener" is a defensive compatibility practice for new-tab links; it is not what makes the image clickable.

5. Open the full-size JPG

Use a smaller image for the page and point the anchor to the larger file:

<a href="images/photo-large.jpg"
   target="_blank"
   rel="noopener">
  <img src="images/photo-thumb.jpg"
       alt="View the full-size photo in a new tab">
</a>

The thumbnail is loaded in the page, while the full-size JPG is requested only after the click.

6. Link to a section on the same page

An anchor can point to an element with a matching id:

<a href="#details">
  <img src="photo.jpg" alt="Jump to photo details">
</a>

<section id="details">
  <h2>Photo details</h2>
</section>

The browser scrolls to the element whose id is details.

7. Download a JPG instead of navigating

If the intended action is downloading the file, add the download attribute:

<a href="images/photo.jpg" download="event-photo.jpg">
  <img src="images/photo-preview.jpg" alt="Download the event photo">
</a>

Browser and server policies can affect downloads, especially for cross-origin URLs. For reliable downloads, serve the file from a domain you control with the appropriate response headers.

8. Write useful alternative text

When the image is the only content inside the link, alt becomes the link’s accessible name. Describe the destination or action rather than the file type:

Situation	Good alt text	Avoid
Gallery link	`Open the photo gallery`	`image`
Full-size view	`View the full-size mountain photo`	`JPG image`
Download	`Download the event photo`	`photo.jpg`
New tab	`Read the report (opens in a new tab)`	Leaving the new-tab behavior undisclosed

If nearby text already gives the same link destination and the image is redundant, use an empty alternative: alt="". Do not omit the alt attribute.

9. Style the linked image

CSS can control size, borders, hover feedback, and focus visibility without changing the HTML relationship:

.image-link {
  display: inline-block;
  line-height: 0;
}

.image-link img {
  display: block;
  max-width: 100%;
  height: auto;
}

.image-link:hover img {
  opacity: 0.85;
}

.image-link:focus-visible {
  outline: 3px solid #165dff;
  outline-offset: 4px;
}

<a class="image-link" href="/gallery.html">
  <img src="images/photo.jpg" alt="Open the photo gallery">
</a>

Keep a visible :focus-visible style so keyboard users can see which link is active. Make the clickable image large enough to activate comfortably on touch devices when the design allows.

10. Complete example page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Clickable JPG example</title>
  <style>
    .image-link { display: inline-block; line-height: 0; }
    .image-link img { display: block; max-width: 100%; height: auto; }
    .image-link:focus-visible { outline: 3px solid #165dff; outline-offset: 4px; }
  </style>
</head>
<body>
  <main>
    <h1>Featured photo</h1>
    <a class="image-link"
       href="images/photo-large.jpg"
       target="_blank"
       rel="noopener">
      <img src="images/photo-thumb.jpg"
           alt="View the full-size featured photo in a new tab"
           width="800"
           height="533">
    </a>
  </main>
</body>
</html>

The explicit dimensions reserve layout space while the image loads. The CSS keeps it responsive on narrow screens.

11. Paths, URLs, and file names

Use photo.jpg for a file beside the current HTML document.
Use images/photo.jpg for a file in an images folder below the current document.
Use /images/photo.jpg for a root-relative path on the same site.
Use https://cdn.example.com/photo.jpg for an absolute image URL.

Case matters on many web servers: Photo.jpg and photo.jpg may be different files. URL-encode spaces and special characters, or rename files with simple lowercase names and hyphens.

12. Common mistakes and fixes

Symptom	Cause	Fix
Clicking does nothing	The image is not nested inside an anchor, or `href` is missing.	Put `<img>` between `<a>` and `</a>` and provide a real URL.
Broken image icon	The `src` path or filename is wrong, or case does not match.	Open the image URL directly and correct the path, extension, or capitalization.
Wrong page opens	A relative `href` is resolved from the current folder.	Use the correct relative path or a root-relative path beginning with `/`.
Screen reader announces an unhelpful link	`alt` says “image” or is missing.	Describe the destination or action in `alt`.
Keyboard focus is hard to see	Site CSS removed the outline.	Add a clear `:focus-visible` outline.
New-tab behavior surprises users	`target="_blank"` was not disclosed.	Say “opens in a new tab” in the accessible name or nearby text.
Download opens in the browser	Cross-origin restrictions or server headers override the `download` hint.	Serve the file from your own origin and configure download response headers.
Image is clipped or distorted	CSS forces both width and height without preserving the ratio.	Use `height: auto` or set matching intrinsic dimensions.

13. Performance and reliability checklist

Use a reasonably sized thumbnail when the page does not need the full-resolution JPG immediately.
Set width and height attributes to reduce layout shifts.
Use loading="lazy" for below-the-fold images when appropriate.
Serve images over HTTPS and verify the destination also uses HTTPS to avoid mixed-content issues.
Keep the link target available; a perfectly formed anchor cannot fix a 404 destination.
Test with a keyboard: Tab to the image, confirm the focus indicator, then press Enter.
Test the image URL and destination URL directly before debugging HTML.

14. Or skip the browser setup

If you need generated screenshots rather than a hand-authored clickable image, ScreenshotNeo returns a clean PNG, JPEG, WebP, or PDF from one GET request. Its cookie and consent step accepts banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether it was billed.

See the ScreenshotNeo API documentation for all options. A direct cURL request:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://stripe.com \
  -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo also provides an MCP server so Claude, Cursor, and other MCP clients can take screenshots, inspect pages, and capture PDFs. One thousand screenshots per month are free with no card; paid plans start at $5 for 3,000. Create a free ScreenshotNeo account.

15. FAQ

Can I make a JPG clickable without JavaScript?

Yes. The anchor-and-image pattern is native HTML and needs no JavaScript.

Does the JPG need to be hosted on the same domain?

No. The image can come from another URL, although remote servers, CORS policy, hotlink protection, or outages can affect whether it loads.

Should I use a button instead?

Use an anchor for navigation, downloads, and fragment jumps. Use a button for an action that changes the current page or application state.

Can one image link to several destinations?

No. One anchor has one destination. Use separate links or an image map when distinct regions need different destinations.

Is `href="#"` a valid placeholder?

No. Use a real URL for a link. If the interaction is an action, use a button instead of a fake anchor.