Hur man visar bilder i HTML-e-postmeddelanden

Mia Chevalier
Lördag 20 april 2024 20:00:27
HTML and CSS

Lösning av bildvisningsproblem i Outlook-e-postmeddelanden

Att stöta på problem med bilder som inte visas i HTML-e-postmeddelanden kan vara frustrerande, särskilt när de visas korrekt på liveservrar. Detta vanliga problem uppstår ofta i e-postklienter som Outlook, där bilder måste vara korrekt inbäddade och refererade till. Att se till att dina bildwebbadresser är tillgängliga och korrekt formaterade i din e-post HTML-kod är avgörande för synlighet.

I det beskrivna fallet kvarstår problemet trots att bilden är värd online och anropas via dess URL. Det här scenariot tyder på potentiella problem med Outlooks hantering av bildlänkar eller dess säkerhetsinställningar, vilket kan blockera bilden från att visas. Att förstå dessa nyanser är viktigt för att felsöka och korrigera skärmproblemet.

Kommando Beskrivning
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Anger teckenkodningen för HTML-dokumentet, vilket är avgörande för e-postmallar för att säkerställa att tecken visas korrekt i olika e-postklienter.
curl_init() Initierar en ny session och returnerar ett cURL-handtag för användning med funktionerna curl_setopt(), curl_exec() och curl_close() i PHP.
curl_setopt() Ställer in alternativ för en cURL-session. Det här kommandot används för att ange webbadressen som ska hämtas och olika andra parametrar som att returnera resultatet som en sträng.
curl_exec() Exekverar cURL-sessionen och hämtar URL-adressen som anges i funktionen curl_setopt().
curl_getinfo() Får information om en specifik överföring, som används här för att hämta HTTP-statuskoden för den hämtade URL:en för att verifiera tillgängligheten.
curl_close() Stänger en cURL-session och frigör alla resurser. Det är nödvändigt att stänga sessionen efter alla cURL-funktioner för att undvika minnesläckor.

Förstå HTML- och PHP-skript för e-postbildvisning

Det medföljande HTML-skriptet är speciellt utformat för att bädda in en bild i en HTML-e-postmall. Det här skriptet använder tagga för att bädda in en onlinebild, vilket säkerställer att den är tillgänglig när e-postmeddelandet visas. Införandet av inom avsnittet är avgörande eftersom det ställer in innehållstyp och teckenkodning, vilket hjälper till att visa e-postinnehållet korrekt i olika e-postklienter.

PHP-skriptet förbättrar tillförlitligheten för bildvisning i e-postmeddelanden genom att verifiera tillgängligheten för bildens URL med flera cURL-kommandon. Kommandon som , , och arbeta tillsammans för att initiera en cURL-session, ställa in nödvändiga alternativ för URL-hämtning och köra sessionen. Funktionen curl_getinfo() används sedan för att hämta HTTP-statuskoden, som bekräftar om bilden är tillgänglig eller inte. Om svarskoden är 200 betyder det att bilden är tillgänglig via internet.

Se till att HTML-e-postbilder visas i Outlook

HTML och CSS implementering

<!-- HTML part of the email -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Email with Image</title>
<style>
  body, html, table {
    margin: 0px; padding: 0px; height: 100%; width: 100%;
    background-color: #5200FF;
  }
</style>
</head>
<body>
<table>
  <tr>
    <td style="text-align: center;">
      <img src="https://d.img.vision/datafit/logoWhite.png" alt="Logo" style="max-height: 200px; max-width: 200px;">
    </td>
  </tr>
</table>
</body>
</html>

Verifiera och fixa bildtillgänglighet för e-postklienter

Server-Side Scripting med PHP

//php
// Define the image URL
$imageUrl = 'https://d.img.vision/datafit/logoWhite.png';
// Use cURL to check if the image is accessible
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $imageUrl);
curl_setopt($ch, CURLOPT_NOBODY, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_exec($ch);
$responseCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
// Check if the image is accessible
if ($responseCode == 200) {
  echo 'Image is accessible and can be embedded in emails.';
} else {
  echo 'Image is not accessible, check the URL or permissions.';
}
curl_close($ch);
//

Optimera HTML-e-postkompatibilitet mellan e-postklienter

En avgörande aspekt som ofta förbises när man bäddar in bilder i HTML-e-postmeddelanden är att säkerställa kompatibilitet mellan klienter. E-postklienter som Outlook, Gmail och Apple Mail kan tolka HTML-kod på olika sätt, vilket leder till skillnader i hur e-postmeddelanden visas. För att optimera HTML-e-postmeddelanden för olika klienter är det viktigt att använda inline CSS och undvika CSS-stilar som inte stöds av alla e-postklienter. Till exempel stöder vissa klienter inte externa eller ens interna stilmallar, och egenskaper som "max-width" ignoreras ofta, särskilt i äldre versioner av Outlook.

Dessutom är det tillrådligt att testa e-postmeddelanden över flera klienter innan du skickar ut dem. Verktyg som Litmus och Email on Acid kan ge förhandsvisningar på olika enheter och e-postklienter, vilket säkerställer att alla element, inklusive bilder, återges korrekt. Detta proaktiva tillvägagångssätt hjälper till att identifiera potentiella problem som kan påverka e-postmeddelandets layout eller bildsynlighet, vilket möjliggör justeringar innan den slutliga leveransen.

  1. Varför visas inte bilder i Outlook-e-postmeddelanden?
  2. Outlook kan blockera bilder från externa källor av säkerhetsskäl eller kanske inte stöder vissa CSS-egenskaper som används i e-postmeddelandet.
  3. Hur kan jag se till att mina bilder visas i alla e-postklienter?
  4. Använd inline CSS för styling, håll dina bilddimensioner flexibla och testa din e-post på olika klienter innan du skickar.
  5. Vilken är den rekommenderade storleken för bilder i HTML-e-postmeddelanden?
  6. Det är bäst att hålla e-postbilder under 600px breda för att säkerställa att de passar i den typiska e-postläsrutan.
  7. Kan jag använda webbteckensnitt i mina HTML-e-postmeddelanden?
  8. Ja, men kom ihåg att inte alla e-postklienter stöder webbteckensnitt. Tillhandahåll reservteckensnitt för att säkerställa kompatibilitet.
  9. Är det nödvändigt att lagra bilder på en säker server?
  10. Ja, att använda HTTPS för att vara värd för bilder hjälper till att förhindra problem relaterade till säkerhet och tillgänglighet i de flesta e-postklienter.

Att framgångsrikt bädda in bilder i HTML-e-postmeddelanden kräver att du förstår nyanserna i e-postklientens beteende, särskilt med klienter som Outlook. Att se till att bilder är tillgängliga via HTTPS, använda inline CSS för styling och förebyggande testa e-postmeddelanden med verktyg som Litmus eller Email on Acid kan avsevärt förbättra tillförlitligheten för bildvisning. I slutändan är grundliga tester och efterlevnad av bästa praxis inom e-postdesign avgörande för att uppnå konsekventa resultat på alla plattformar.