Créa-blog

00 jours et 00:00:00
Créa-code arrive !

Ressources pour développeur web

Comment convertir en BASE64 une image avec PHP

Temps de lecture : 12 minutes
Accueil → PHP 8 → Comment convertir en BASE64 une image avec PHP

La conversion d’une image en Base64 est une technique courante en développement web. Elle permet d’intégrer directement une image dans une page HTML sans passer par un fichier externe, ce qui peut simplifier le déploiement et améliorer la vitesse d’affichage pour de petits fichiers.

Dans ce tutoriel, nous allons décortiquer un script PHP complet qui permet de convertir une image en Base64 à partir d’une URL. Que vous soyez débutant en PHP ou curieux d’apprendre, ce tutoriel est fait pour vous.

Nous allons analyser ensemble chaque partie du code, étape par étape, et comprendre comment il fonctionne. À la fin, vous serez capable de créer votre propre convertisseur d’images en Base64.

Convertir une image en Base64 peut sembler complexe à première vue, mais en réalité, il s’agit d’une opération simple qui peut être très utile dans de nombreux projets web : envoi d’images via JSON, intégration directe dans des fichiers HTML/CSS, optimisation de requêtes HTTP, etc.

Qu’est-ce que le Base64 ?

Avant de plonger dans le code, prenons un instant pour comprendre ce qu’est le Base64. Il s’agit d’un système d’encodage binaire en texte. Cela permet de transformer n’importe quel fichier (comme une image) en une chaîne de caractères. Ce format est utile dans de nombreux cas :

  • Intégration directe dans les balises HTML (<img src="data:image/png;base64,..." />)
  • Transmission dans une API sans avoir à gérer un fichier
  • Éviter des requêtes supplémentaires (utile pour les icônes, par exemple)
Visualisez la démo

Comment convertir une image en Base64 avec PHP

Le code complet pour convertir une image en Base64 avec PHP

Vous pouvez retrouver l’ensemble de ce code gratuitement sur mon dépôt Github.

<?php
// Traitement PHP
$base64 = '';
$error = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $imageUrl = trim($_POST['image_url'] ?? '');

    if (!empty($imageUrl)) {
        if (filter_var($imageUrl, FILTER_VALIDATE_URL)) {
            $imageData = @file_get_contents($imageUrl);
            if ($imageData !== false) {
                $finfo = new finfo(FILEINFO_MIME_TYPE);
                $mimeType = $finfo->buffer($imageData);
                $base64 = 'data:' . $mimeType . ';base64,' . base64_encode($imageData);
            } else {
                $error = "Impossible de récupérer l'image depuis l'URL fournie.";
            }
        } else {
            $error = "L'URL fournie n'est pas valide.";
        }
    } else {
        $error = "Veuillez entrer une URL.";
    }
}
?>

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Convertir une image en Base64</title>
    <style>
        /* Style général */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f5f5f5;
            margin: 0;
            padding: 30px;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #ffffff;
            padding: 30px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            border-radius: 8px;
        }

        h1, h2 {
            color: #333333;
        }

        form {
            margin-bottom: 30px;
        }

        label {
            font-weight: bold;
            display: block;
            margin-bottom: 10px;
        }

        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #cccccc;
            border-radius: 4px;
            margin-bottom: 20px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            background-color: #007BFF;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }

        .error {
            color: #d9534f;
            margin-top: 10px;
            font-weight: bold;
        }

        .textarea-container {
            position: relative;
            margin-top: 20px;
        }

        textarea {
            width: 100%;
            height: 250px;
            padding: 10px;
            font-family: monospace;
            border: 1px solid #cccccc;
            border-radius: 4px;
            background: #f8f8f8;
            box-sizing: border-box;
            resize: vertical;
        }

        /* Bouton copier */
        .copy-btn {
            position: absolute;
            top: -40px;
            right: 0;
            background-color: #28a745;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .copy-btn:hover {
            background-color: #218838;
        }

        .copy-success {
            color: #28a745;
            margin-top: 10px;
            font-weight: bold;
        }

        img {
            max-width: 100%;
            height: auto;
            margin-top: 20px;
            border-radius: 4px;
            box-shadow: 0 0 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>

<div class="container">
    <h1>Convertisseur d'image en Base64</h1>

    <form method="post" action="">
        <label for="image_url">URL de l'image :</label><br><br>
        <input type="text" name="image_url" id="image_url" value="<?= htmlspecialchars($_POST['image_url'] ?? '') ?>">
        <input type="submit" value="Convertir">
    </form>

    <?php if ($error): ?>
        <div class="error"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <?php if ($base64): ?>
        <h2>Image Encodée en Base64 :</h2>
        <div class="textarea-container">
            <button class="copy-btn" onclick="copyToClipboard()">Copier</button>
            <textarea id="base64text" readonly><?= $base64 ?></textarea>
        </div>
        <div id="copySuccess" class="copy-success" style="display:none;">Texte copié !</div>

        <h2>Prévisualisation :</h2>
        <img src="<?= $base64 ?>" alt="Image encodée">
    <?php endif; ?>
</div>

<script>
function copyToClipboard() {
    const textarea = document.getElementById('base64text');
    textarea.select();
    textarea.setSelectionRange(0, 99999); // mobile support
    document.execCommand('copy');

    const successMsg = document.getElementById('copySuccess');
    successMsg.style.display = 'block';

    // Cache le message après 2 secondes
    setTimeout(() => {
        successMsg.style.display = 'none';
    }, 2000);
}
</script>

</body>
</html>

Le script PHP expliqué pas à pas

Voici la première partie du script. Nous allons l’analyser bloc par bloc.

1. Initialisation des variables

$base64 = '';
$error = '';

👉 Ici, on prépare deux variables :

  • $base64 : contiendra le résultat final de l’image convertie en chaîne Base64
  • $error : contiendra un message d’erreur si un problème survient (URL vide, image introuvable…)

Cette préparation est essentielle pour ensuite afficher les résultats ou les erreurs à l’utilisateur.

2. Traitement du formulaire

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $imageUrl = trim($_POST['image_url'] ?? '');

💡 Explication :

  • On vérifie si la requête HTTP est de type POST, ce qui signifie que le formulaire a été soumis.
  • On récupère ensuite la valeur de image_url (le champ du formulaire), et on utilise trim() pour supprimer les espaces en trop.

L’opérateur ?? est là pour éviter les erreurs si le champ n’existe pas. C’est une sécurité pour que notre script soit plus robuste.

3. Validation de l’URL

if (!empty($imageUrl)) {
    if (filter_var($imageUrl, FILTER_VALIDATE_URL)) {

🔍 Ici, on s’assure que :

  • L’URL n’est pas vide (!empty)
  • L’URL est bien formée et valide (filter_var avec FILTER_VALIDATE_URL)

Cela évite de lancer des traitements sur des valeurs incorrectes ou malicieuses.

4. Récupération de l’image

$imageData = @file_get_contents($imageUrl);

✅ Cette ligne tente de récupérer le contenu de l’image via son URL.

  • file_get_contents() va lire les données binaires de l’image.
  • Le @ est utilisé pour masquer les éventuels warnings (par exemple, si l’image est introuvable).

⚠️ Attention : cette fonction ne fonctionne que si l’option allow_url_fopen est activée dans votre fichier php.ini.

5. Détection du type MIME

if ($imageData !== false) {
    $finfo = new finfo(FILEINFO_MIME_TYPE);
    $mimeType = $finfo->buffer($imageData);

🔍 Détails :

  • On vérifie que l’image a bien été récupérée (!== false)
  • On utilise finfo pour détecter dynamiquement le type MIME de l’image (image/jpeg, image/png, etc.)
  • Cela permet de construire plus tard une chaîne Base64 correctement formatée.

6. Encodage en Base64

$base64 = 'data:' . $mimeType . ';base64,' . base64_encode($imageData);

C’est ici que la magie opère !

  • base64_encode() convertit le binaire de l’image en texte Base64.
  • On assemble le tout dans une syntaxe reconnue par les navigateurs (data:[type];base64,[contenu])

7. Gestion des erreurs

} else {
    $error = "Impossible de récupérer l'image depuis l'URL fournie.";
}
  • Si l’image n’a pas pu être chargée, on stocke un message d’erreur.

Un peu plus bas dans le code, on traite aussi les autres cas d’erreur :

} else {
    $error = "L'URL fournie n'est pas valide.";
}

et

} else {
    $error = "Veuillez entrer une URL.";
}

Ces messages seront affichés dans l’interface pour aider l’utilisateur à corriger son erreur.

L’interface HTML : formulaire et affichage

Le reste du code HTML sert à :

  • Afficher un formulaire simple
  • Montrer le résultat encodé
  • Proposer une prévisualisation
  • Offrir un bouton « Copier dans le presse-papier »

Formulaire HTML pour saisir l’URL de l’image à convertir en Base64

Le cœur de l’interface est un formulaire simple :

<form method="post" action="">
    <label for="image_url">URL de l'image :</label><br><br>
    <input type="text" name="image_url" id="image_url" value="<?= htmlspecialchars($_POST['image_url'] ?? '') ?>">
    <input type="submit" value="Convertir">
</form>

Explication :

  • method="post" permet d’envoyer les données à notre script PHP.
  • Le champ input[type="text"] permet à l’utilisateur de saisir l’URL de l’image.
  • <?= htmlspecialchars(...) ?> permet d’afficher la dernière URL saisie, même après soumission. On utilise htmlspecialchars pour éviter les injections HTML.

✅ Bonnes pratiques :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?
  • Toujours lier l’attribut for du label à l’id du champ.
  • Préremplir un champ après soumission améliore l’expérience utilisateur.

Affichage des messages d’erreur

<?php if ($error): ?>
    <div class="error"><?= htmlspecialchars($error) ?></div>
<?php endif; ?>

Si une erreur survient lors de l’encodage (URL vide, mauvaise URL, image introuvable…), un message s’affiche dynamiquement. Cela évite toute page blanche ou comportement imprévu.

Zone de résultat : affichage du code Base64

<?php if ($base64): ?>
    <h2>Image Encodée en Base64 :</h2>
    <div class="textarea-container">
        <button class="copy-btn" onclick="copyToClipboard()">Copier</button>
        <textarea id="base64text" readonly><?= $base64 ?></textarea>
    </div>
    <div id="copySuccess" class="copy-success" style="display:none;">Texte copié !</div>

Cette section apparaît uniquement si l’encodage a réussi.

Détails importants :

  • <textarea> : permet de voir et copier le code encodé.
  • Bouton « Copier » : un appel JavaScript copie le contenu dans le presse-papiers.
  • Message de confirmation « Texte copié ! » : feedback visuel pour l’utilisateur.

Affichage de l’image encodée

Juste après le champ Base64, on prévisualise le résultat :

<img src="<?= $base64 ?>" alt="Image encodée">

C’est une excellente manière de rassurer l’utilisateur : il voit que l’image a bien été convertie et peut être utilisée immédiatement dans une balise <img>.

Style CSS : responsive, clair et moderne

Un style épuré améliore considérablement l’expérience utilisateur. Le CSS utilisé ici est simple, mais efficace :

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f5f5f5;
    margin: 0;
    padding: 30px;
}

Nous avons aussi utilisé :

  • Des conteneurs centrés avec marges automatiques
  • Des boutons stylisés avec transitions au survol
  • Des textareas à fond gris clair pour faciliter la lecture du code
  • Un bouton vert « Copier », visuellement distinct et incitatif

✅ Conseil SEO + UX :

  • Utilisez des couleurs contrastées pour la lisibilité.
  • Privilégiez un style responsive, qui s’adapte aux écrans mobiles.
  • Mettez en valeur les éléments interactifs (boutons, liens, champs).

JavaScript : copier dans le presse-papiers

Voici le script JS qui rend le bouton « Copier » fonctionnel :

function copyToClipboard() {
    const textarea = document.getElementById('base64text');
    textarea.select();
    textarea.setSelectionRange(0, 99999); // support mobile
    document.execCommand('copy');

    const successMsg = document.getElementById('copySuccess');
    successMsg.style.display = 'block';

    setTimeout(() => {
        successMsg.style.display = 'none';
    }, 2000);
}

Ce script :

  1. Sélectionne le contenu de la <textarea>
  2. Le copie dans le presse-papiers
  3. Affiche un message de confirmation pendant 2 secondes

⚠️ À noter : document.execCommand('copy') est un peu ancien. Pour les applications modernes, utilisez l’API navigator.clipboard.writeText() (sous réserve de compatibilité).

Pour améliorer votre convertisseur

Voici quelques idées si vous souhaitez aller plus loin :

1. Valider que l’image est bien une image

Actuellement, le script se base sur finfo, ce qui est déjà une bonne pratique. Vous pouvez aussi ajouter une vérification sur l’extension de l’URL (.jpg, .png, .webp, etc.).

2. Limiter la taille de l’image

Certains navigateurs ont des limites de taille pour les images Base64 dans HTML. Vous pouvez ajouter une condition :

if (strlen($imageData) > 1000000) { // ~1MB
    $error = "L'image est trop grande pour être encodée.";
}

3. Prévoir l’upload d’un fichier local

Actuellement, l’image doit être en ligne (URL). Pourquoi ne pas proposer aussi un champ <input type="file"> pour permettre l’envoi local ? Cela élargirait l’usage.

4. Ajouter une barre de chargement ou un spinner

Cela améliore l’expérience utilisateur, surtout si le chargement est un peu long.

Conclusion

Créer un convertisseur d’image en Base64 avec PHP est une excellente manière de mettre en pratique plusieurs compétences :

  • Traitement des formulaires
  • Manipulation des fichiers
  • Utilisation du Base64
  • Intégration HTML/CSS/JS
  • Expérience utilisateur et accessibilité

Ce type de petit projet peut aussi devenir un vrai outil utile en ligne.

🔗 Ressources complémentaires

Questions fréquentes sur la conversion d’image en Base64

Qu’est-ce que le format Base64 ?

Le Base64 est un format qui permet de convertir n’importe quel fichier binaire (image, son, vidéo) en texte ASCII. Cela permet d’envoyer facilement des données à travers des systèmes qui n’acceptent que du texte.

Est-il recommandé d’utiliser Base64 pour toutes les images d’un site web ?

Non, pour les grandes images ou des quantités importantes, il vaut mieux conserver les fichiers classiques. Le Base64 est parfait pour les petites images ou les emails HTML.

Est-ce que convertir en Base64 ralentit un site web ?

Oui, si utilisé à l’excès : chaque fichier en Base64 est 30% plus gros que le fichier d’origine. Il faut donc l’utiliser intelligemment.

Vous pouvez retrouver l’ensemble de ce code gratuitement sur mon dépôt Github.

Découvrez d’autres projets codés et expliqués :

Live on Twitch

    Articles relatifs

    1. String PHP : 40 fonctions essentielles pour les manipuler
      Dans cet article, nous allons découvrir les fonctions permettant de manipuler les chaîne de caractères ou String PHP les plus populaires et vous fournir des exemples simples. Bonne lecture ! Principaux…
    2. Tester et valider les entrées d’un formulaire en javascript
      Tester et valider un formulaire en javascript est une étape importante dans le développement web. Elle permet de s’assurer que les données saisies par l’utilisateur sont correctes et complètes avant…
    3. Coder un formulaire de Login sécurisé en PHP | Tutoriel
      Créer un formulaire de connexion ou login sécurisé en PHP est une étape essentielle dans la plupart des projets web modernes. Que vous développiez un site vitrine avec une zone d’administration, un…
    4. Header HTTP : Guide complet pour sécuriser son site web PHP
      La sécurité d’un site web est un enjeu crucial, et l’une des premières lignes de défense repose sur les Header HTTP en PHP. Ces en-têtes permettent de protéger votre application contre…