New format
Image link: how to make an image clickable
An image link is a picture that leads to a URL on click: a banner, a header logo, a gallery preview. In HTML that is `<a href="…"><img …></a>`.
Below: when to use it, how to mark up the code, which attributes matter, and how an image link differs from a text link for SEO and UX. Link-type basics are in related pieces.
Why people use image links
Visuals catch the eye faster than text: logo to home, product preview to a card, map to contacts, promo banner to a landing.
For crawlers, text anchors and structure matter more. Images support UX; do not hang the whole site’s internal linking on them.
Good scenarios:
- logo → homepage
- preview in a catalog or blog
- promo banner → landing
- lightbox/gallery (click opens larger — UX, not necessarily an SEO anchor)
HTML: a + img wrapper
Basic template: `<a href="/catalog/"><img src="/images/banner.webp" alt="Pump catalog" width="600" height="200"></a>`.
In a CMS usually: select the image → “insert link” → set the URL. Check that href is complete and goes where it should (https, no typos).
Useful img attributes:
- `src` — path to the file on your hosting
- `alt` — meaning for screen readers and if the file fails
- `width` / `height` — proportions in the layout
- `loading="lazy"` — for below-the-fold banners (not for the LCP hero)
Your own files and weight
Upload images to your server or CDN. Someone else’s hotlink breaks when the donor changes the URL or blocks external requests.
Compress: WebP/AVIF where the pipeline supports it, correct size for the slot (not 4000px in a 300px column). width/height attributes do not replace file optimization.
Weight checklist:
- your own creatives
- compression without mushing banner text
- do not stack a dozen heavy banners on one page
- check mobile width
UX and SEO hygiene
Caption and alt should match the link destination. “Click here” on an image with no alt is a weak pattern.
Hover effects (shadow, opacity) are fine if they do not hurt touch taps: the tap target must be large enough.
Placement rules:
- moderation: banners do not cover text and forms
- match the page topic
- for menus and key CTAs also add a text link nearby
- do not present ads as “just a picture” where labeling is required
Short takeaway
An image link is handy for visual jumps: wrap img in `<a>`, set alt, and serve a light file from your hosting. For meaning and SEO, text links are stronger — combine them; do not replace all navigation with images.
FAQ
Is a text link better than an image for SEO?
For passing anchor meaning — usually yes: text is unambiguous. An image needs clear alt and context. Menu navigation is more often text.
Is alt required?
Yes for accessibility and clarity when the image carries meaning. For purely decorative — empty alt="", but then do not make them the only path to an important section.
Can I link to someone else’s image by URL?
Technically yes (hotlink); in practice bad: rights, speed, their CDN may serve a stub. Host files yourself and optimize them.
Do width and height speed up the site?
They reserve layout space (fewer shifts). The file itself does not get lighter — you need compression, a modern format, and a sensible pixel size.
Is an image link the same as a banner?
A banner is a special case: an ad creative with a link. Same rules: file weight, clear offer, do not cover content.
Need image links that don’t kill page speed?
We’ll wrap banners and logos cleanly — with alt, light files, and no hotlink surprises.
Discuss the task
