Set an image as a link

@helloadam showed the core idea — wrap an image in an anchor to make it clickable — but a few modern, practical tweaks make that pattern robust, accessible, and future‑proof.

Always provide meaningful alt text (or alt="" for purely decorative images). Prefer CSS over deprecated presentational attributes (avoid border="0" in markup). Include the image’s intrinsic width and height attributes so browsers can reserve space (reduces layout shift), and then control sizing with CSS or srcset/sizes for responsive images.

To answer @Dani about the 65×38 values: those are fixed sizes and were likely chosen to match the image used. Today the recommended approach is to set the image’s real pixel width/height in HTML (so the browser knows the aspect ratio) and then scale visually in CSS:

/* reserve aspect ratio in HTML, but make images responsive in CSS */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

To address @tuputips and the “red lines” in old IE: those were browser focus/border behaviors. Use CSS to remove the default image border and — critically — provide a custom focus style so keyboard users still get visible focus:

a img { border: 0; }           /* remove old image borders */
a:focus, a:focus img {
  outline: 3px solid #1a73e8;  /* visible, custom focus for accessibility */
  outline-offset: 2px;
}

For @uringinteristi: “drop my link URL with normal word” means using anchor text instead of an image. Use descriptive text (better for accessibility and SEO) — avoid “click here”:

<a href="https://example.com">Download the brochure</a>

If the image is the link target, make its alt describe the destination (or use the same phrasing as the anchor text). Avoid removing focus outlines altogether — style them instead so links remain usable for keyboard and assistive‑technology users.