Sådan viser du billeder i HTML-e-mails

Mia Chevalier

Lørdag den 20. april 2024 kl. 19.20.14

Løsning af billedvisningsproblemer i Outlook-e-mails
At støde på problemer med billeder, der ikke vises i HTML-e-mails, kan være frustrerende, især når de vises korrekt på live-servere. Dette almindelige problem opstår ofte i e-mail-klienter som Outlook, hvor billeder skal være korrekt indlejret og refereret til. At sikre, at dine billedwebadresser er tilgængelige og korrekt formateret i din e-mail-HTML-kode er afgørende for synlighed.
I det beskrevne tilfælde fortsætter problemet på trods af, at billedet hostes online og kaldes via dets URL. Dette scenarie antyder potentielle problemer med Outlooks håndtering af billedlinks eller dets sikkerhedsindstillinger, som kan blokere billedet i at blive vist. Det er vigtigt at forstå disse nuancer for at fejlfinde og rette skærmproblemet.

Kommando Beskrivelse

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Angiver tegnkodningen for HTML-dokumentet, hvilket er afgørende for e-mail-skabeloner for at sikre, at tegn vises korrekt på tværs af forskellige e-mail-klienter.

curl_init() Initialiserer en ny session og returnerer et cURL-håndtag til brug med funktionerne curl_setopt(), curl_exec() og curl_close() i PHP.

curl_setopt() Indstiller indstillinger for en cURL-session. Denne kommando bruges til at angive den URL, der skal hentes, og forskellige andre parametre som at returnere resultatet som en streng.

curl_exec() Udfører cURL-sessionen og henter den URL, der er angivet i curl_setopt()-funktionen.

curl_getinfo() Henter information vedrørende en specifik overførsel, der bruges her til at hente HTTP-statuskoden for den hentede URL for at bekræfte tilgængelighed.

curl_close() Lukker en cURL-session og frigør alle ressourcer. Det er nødvendigt at lukke sessionen efter alle cURL-funktioner for at undgå hukommelseslækager.

Kommando	Beskrivelse
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	Angiver tegnkodningen for HTML-dokumentet, hvilket er afgørende for e-mail-skabeloner for at sikre, at tegn vises korrekt på tværs af forskellige e-mail-klienter.
curl_init()	Initialiserer en ny session og returnerer et cURL-håndtag til brug med funktionerne curl_setopt(), curl_exec() og curl_close() i PHP.
curl_setopt()	Indstiller indstillinger for en cURL-session. Denne kommando bruges til at angive den URL, der skal hentes, og forskellige andre parametre som at returnere resultatet som en streng.
curl_exec()	Udfører cURL-sessionen og henter den URL, der er angivet i curl_setopt()-funktionen.
curl_getinfo()	Henter information vedrørende en specifik overførsel, der bruges her til at hente HTTP-statuskoden for den hentede URL for at bekræfte tilgængelighed.
curl_close()	Lukker en cURL-session og frigør alle ressourcer. Det er nødvendigt at lukke sessionen efter alle cURL-funktioner for at undgå hukommelseslækager.

Forstå HTML- og PHP-scripts til e-mail-billedvisning

Det medfølgende HTML-script er specifikt designet til at indlejre et billede i en HTML-e-mail-skabelon. Dette script bruger tag for at indlejre et onlinebillede, hvilket sikrer, at det er tilgængeligt, når e-mailen ses. Inddragelsen af indenfor sektionen er afgørende, da den indstiller indholdstypen og tegnkodningen, hvilket hjælper med at vise e-mail-indholdet korrekt på tværs af forskellige e-mail-klienter.

PHP-scriptet forbedrer pålideligheden af billedvisning i e-mails ved at verificere tilgængeligheden af billed-URL'en ved hjælp af flere cURL-kommandoer. Kommandoer som , , og arbejde sammen om at initialisere en cURL-session, indstille de nødvendige indstillinger for URL-hentning og udføre sessionen. Funktionen curl_getinfo() bruges derefter til at hente HTTP-statuskoden, som bekræfter, om billedet er tilgængeligt eller ej. Hvis svarkoden er 200, betyder det, at billedet er tilgængeligt via internettet.

Sikring af visning af HTML-e-mailbilleder i Outlook

HTML og 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>

Bekræftelse og rettelse af billedtilgængelighed for e-mail-klienter

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);
//

Optimering af HTML-e-mail-kompatibilitet på tværs af e-mail-klienter

Et afgørende aspekt, der ofte overses, når billeder indlejres i HTML-e-mails, er at sikre kompatibilitet på tværs af klienter. E-mail-klienter som Outlook, Gmail og Apple Mail kan fortolke HTML-kode forskelligt, hvilket fører til uoverensstemmelser i, hvordan e-mails vises. For at optimere HTML-e-mails til forskellige klienter er det vigtigt at bruge inline-CSS og undgå CSS-stile, der ikke understøttes af alle e-mail-klienter. For eksempel understøtter nogle klienter ikke eksterne eller endda interne stylesheets, og egenskaber som 'max-width' ignoreres ofte, især i ældre versioner af Outlook.

Derudover er det tilrådeligt at teste e-mails på tværs af flere klienter, før du sender dem ud. Værktøjer som Litmus og Email on Acid kan give forhåndsvisninger på tværs af forskellige enheder og e-mail-klienter, hvilket sikrer, at alle elementer, inklusive billeder, gengives korrekt. Denne proaktive tilgang hjælper med at identificere potentielle problemer, der kan påvirke e-mailens layout eller billedsynlighed, hvilket muliggør justeringer før den endelige afsendelse.

Hvorfor vises billeder ikke i Outlook-e-mails?
Outlook blokerer muligvis billeder fra eksterne kilder af sikkerhedsmæssige årsager eller understøtter muligvis ikke visse CSS-egenskaber, der bruges i e-mailen.
Hvordan kan jeg sikre mig, at mine billeder vises i alle e-mail-klienter?
Brug inline CSS til styling, hold dine billeddimensioner fleksible, og test din e-mail på tværs af forskellige klienter, før du sender.
Hvad er den anbefalede størrelse for billeder i HTML-e-mails?
Det er bedst at holde e-mail-billeder under 600px brede for at sikre, at de passer ind i den typiske e-maillæserude.
Kan jeg bruge webskrifttyper i mine HTML-e-mails?
Ja, men husk på, at ikke alle e-mail-klienter understøtter webskrifttyper. Giv reserveskrifttyper for at sikre kompatibilitet.
Er det nødvendigt at hoste billeder på en sikker server?
Ja, brug af HTTPS til hosting af billeder hjælper med at forhindre problemer relateret til sikkerhed og tilgængelighed i de fleste e-mail-klienter.

En vellykket indlejring af billeder i HTML-e-mails kræver forståelse for nuancerne af e-mailklientadfærd, især med klienter som Outlook. Sikring af, at billeder er tilgængelige via HTTPS, brug af inline CSS til styling og forebyggende test af e-mails med værktøjer som Litmus eller Email on Acid kan forbedre pålideligheden af billedvisning markant. I sidste ende er grundig test og overholdelse af bedste praksis inden for e-maildesign afgørende for at opnå ensartede resultater på tværs af alle platforme.