如何通过邮件发送链接式图片（非嵌入）及所需HTML代码咨询

Hey there! I get it—trying to get external images to show up in email clients like Outlook and Gmail can be tricky, especially when your initial <img> tag didn't work. Let's break down the right approach and fix this issue.

First, Clarify: What "Linked (Non-Embedded)" Means #

I assume you want to display an image hosted on an external server (not attached as an embedded file in the email), and optionally make it clickable to a URL. Let's cover both scenarios.

Correct HTML Code for Linked (Clickable) Images #

If you want the image to act as a clickable link, wrap the <img> tag in an <a> element. Here's the optimized code for both Outlook and Gmail:

<a href="https://your-desired-link-url.com" style="text-decoration: none;">
  <img 
    src="https://www.konbini.com/wp-content/blogs.dir/3/files/2018/03/a9a08770bba415c3b9a14cb162.jpg"
    alt="Descriptive text for the image (important for accessibility and fallback)"
    width="600" 
    height="auto"
    style="border: none; display: block; max-width: 100%;"
  />
</a>

Correct HTML Code for Non-Clickable External Images #

If you just want to display the external image without making it a link, use this refined <img> tag:

<img 
  src="https://www.konbini.com/wp-content/blogs.dir/3/files/2018/03/a9a08770bba415c3b9a14cb162.jpg"
  alt="Descriptive text for the image"
  width="600" 
  height="auto"
  style="border: none; display: block; max-width: 100%;"
/>

Why Your Initial Code Failed #

There are a few common reasons your original <img> tag didn't work:

• Missing critical attributes: Alt text is required for accessibility, and some clients block images without it. Specifying width/height helps prevent layout breaks.
• HTTP vs HTTPS: Gmail and modern Outlook are stricter about HTTP (unsecured) resources. I swapped your link to HTTPS (since the domain supports it) to avoid blocking.
• No inline styles: Email clients have limited CSS support—inline styles like display: block prevent unwanted spacing below the image, and max-width: 100% ensures it fits on mobile devices.
• Default image blocking: Both Outlook and Gmail automatically block external images by default. Recipients will need to click "Download images" (Outlook) or "Display images below" (Gmail) to see it. You can add a friendly note in your email body about this.

Client-Specific Tips #

• Outlook: Desktop versions (especially older ones) have strict HTML/CSS rules. Stick to inline styles, avoid complex CSS, and use fixed width values (600px is a standard email width) instead of percentages alone.
• Gmail: Gmail may auto-resize large images, so max-width: 100% ensures responsiveness. If you send emails to the recipient regularly, Gmail may automatically whitelist your images over time.
• Check for hotlinking: Make sure the image host allows hotlinking (direct embedding in external sites/emails). If the site blocks hotlinking, the image won't load—you may need to host the image on a service like your own server or a dedicated image host.

内容的提问来源于stack exchange，提问作者ML_Enthousiast