How to Embed Images in HTML

Embedding images in HTML is one of the most fundamental web development skills. This guide covers everything from basic image tags to advanced responsive techniques, all using CDN-hosted images from ImgLink.

Basic Image Tag

The src attribute points to the image URL. The alt attribute describes the image for accessibility and SEO.

Responsive Images

Fluid Width

  src="https://imglink.cc/cdn/abc123.png"
  alt="Responsive image"
  style="max-width: 100%; height: auto;"
/>

With CSS Class

Lazy Loading

  src="https://imglink.cc/cdn/abc123.png"
  alt="Lazy loaded image"
  loading="lazy"
/>

The loading="lazy" attribute tells browsers to only load the image when it's about to enter the viewport.

Image as Link

Shows the thumbnail and links to the full-size image.

CSS Background Image

.hero {
  background-image: url('https://imglink.cc/cdn/abc123.png');
  background-size: cover;
  background-position: center;
  min-height: 400px;
}

Figure with Caption

Picture Element for Art Direction

SEO Best Practices

1. Always include alt text - Describe what the image shows
2. Use descriptive filenames - product-dashboard.png not img1.png
3. Set width and height - Prevents layout shift (CLS)
4. Lazy load below-the-fold - Improves initial page load
5. Use CDN hosting - ImgLink's CDN ensures fast loading

Frequently Asked Questions

What image format should I use for HTML?

WebP for best compression, PNG for screenshots with text, JPEG for photos. ImgLink supports all formats.

Do I need to host images on my own server?

No. CDN-hosted images from ImgLink actually load faster than self-hosted images in most cases.

Is hotlinking allowed?

Yes. ImgLink supports hotlinking for websites and applications.

Start hosting images for free today. Upload your first image now or create a free account to unlock albums, dashboard analytics, and developer API access. It takes 10 seconds.