What's the valid way to include an image with no src?

Dealing with data URIs

Employing data URIs allows you to embed images directly into your HTML markup, enabling you to preload an image without rendering it on the webpage or necessitating an individual HTTP call for a minor placeholder.

However, you should remain mindful of browser support, particularly when dealing with IE7 or lower, as these older versions may not reliably support data URIs. Furthermore, with content security policies that may inhibit inline media embedding, consistency requires vigilance.

Placeholder perfection

If you're not comfortable with data URIs, you can avoid the dreaded broken image icon using a protocol-relative URL that points nowhere:

<img src="//:0" alt="Placeholder">


Ensure that the <img> tag is present at page load and ensure to assign a valid alt attribute to provide helpful alternative text. This approach is compatible with major browsers and navigates around HTTPS "insecure content warnings.

Dynamic disco with JavaScript

In scenarios where your image source will be dynamically populated with JavaScript, make sure the <img> you plan to populate forms part of the initial page load. You can then conveniently populate the src attribute using JavaScript:

// Because who doesn't want to dynamically insert cat pictures, right?
document.getElementById("dynamicImage").src = "path-to-your-cat-picture.jpg";   


Using jQuery? You can employ DOM-manipulating functions like .appendTo() to insert images:

// No jQuery was harmed in the making of this image.
$("<img>", { src: "path-to-your-cat-picture.jpg", alt: "Dynamic image" }).appendTo("#imageContainer"); 


Be the SVG svengali

Explore the use of inline SVG in your data URI for an image placeholder:

<img src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEiIHdpZHRoPSIxIj48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ0cmFuc3BhcmVudCIgLz48L3N2Zz4=" alt="Invisible placeholder">


Inline SVG in data URIs offers widespread compatibility and serves as a scalable and transparent placeholder. Remember, the default SVG dimension is 300x150 pixels, adjust the width and height styles of your <img> tag to suit your needs.

Expect the unexpected: Edge Cases

Plan for various scenarios when working with images:

• Preloading: Use placeholders to preload images for efficiency.
• Content Security: Confirm your chosen method aligns with site content security policies.
• Dynamic Insertion: Adopt reliable methods for dynamic image source insertion.
• Fallbacks: Always provide sensible fallbacks in error scenarios.

Choose methods that best suit your target browsers and website policies. Always keep to HTML standards to ensure functionality and accessibility.

Setting, meeting, exceeding expectations

Consider the following when handling images:

• Avoid Broken Icons: Use data URIs or SVG placeholders to prevent broken image situations.
• Specify Dimensions: Predefine image sizes to maintain design consistency.
• Assistive Technology: Use alt text to describe image content for assistive technologies i.e.", screen readers.

Enhance progressively

When building web pages, progressive enhancement is key:

• No-script scenarios: Display crucial content without JavaScript using <noscript> tags as fallback.
• Optimized SVG: If leveraging SVG placeholders, optimize them for improved performance across browsers.