كيفية تحويل الصور إلى عناوين URL بيانات Base64

ما هو عنوان URL بيانات الصورة Base64؟

يضمّن عنوان URL بيانات الصورة Base64 ملف الصورة بالكامل مباشرة في مستند الويب كسلسلة نصية، مما يلغي الحاجة إلى طلب HTTP منفصل لتحميل الصورة. بدلاً من قيام المتصفح بجلب ملف خارجي، تكون بيانات الصورة موجودة بالفعل في HTML أو CSS.

يبدو التنسيق كما يلي:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

تفصيله:

• data: — بادئة نظام URI البيانات
• image/png — نوع MIME للصورة المضمنة
• ;base64 — يشير إلى ترميز Base64
• ,iVBORw0... — بيانات الصورة الفعلية المُرمّزة بـ Base64

لماذا نحول الصور إلى Base64؟

تضمين الصور كـ Base64 مفيد في عدة سيناريوهات:

تقليل طلبات HTTP

يتطلب كل ملف صورة خارجي طلب HTTP منفصلاً. تلغي عناوين URL بيانات Base64 هذه الطلبات، مما يمكن أن يحسّن وقت تحميل الصفحة — خاصة على الاتصالات ذات زمن الانتقال العالي أو للصفحات التي تحتوي على العديد من الأصول الصغيرة.

مستندات قائمة بذاتها

تجعل صور Base64 ملفات HTML قابلة للنقل بالكامل. يعمل قالب بريد إلكتروني يحتوي على صور Base64 حتى عندما يحظر عميل البريد الإلكتروني للمستلم الموارد الخارجية. وبالمثل، يمكن مشاركة مستند HTML يحتوي على صور مضمنة كملف واحد دون القلق بشأن مسارات الصور المعطلة.

الصفحات الحساسة للأداء

بالنسبة للصور الرئيسية في الجزء المرئي من الصفحة وعناصر واجهة المستخدم الحرجة، يمكن أن يؤدي إلغاء الرحلة الإضافية إلى تحسين مقاييس مثل Largest Contentful Paint (LCP). ومع ذلك، هذا يفيد الصور الصغيرة فقط — بالنسبة للصور الكبيرة، يكون التضمين نتائجه عكسية.

العمل دون اتصال

عندما تكون الصورة مضمنة كعنوان URL بيانات، فإنها تعمل دون الوصول إلى الشبكة. هذا قيّم لتطبيقات الويب دون اتصال وتطبيقات الويب التقدمية (PWAs).

كيفية تحويل صورة إلى Base64

الطريقة 1: استخدام أداة عبر الإنترنت (الأسهل)

أسرع طريقة لتحويل صورة إلى Base64 هي استخدام أداة مخصصة عبر الإنترنت. ارفع أو اسحب وأفلت صورتك في أداة ترميز Base64 المجانية عبر الإنترنت، وستحصل على عنوان URL البيانات الكامل جاهزًا للصقه في كودك.

الطريقة 2: استخدام JavaScript في المتصفح

توفر واجهة FileReader طريقة مباشرة لتحويل الصور التي يختارها المستخدم إلى Base64:

function imageToBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = () => reject(new Error('Failed to read file'));
    reader.readAsDataURL(file);
  });
}

// Usage with a file input
document.getElementById('imageInput').addEventListener('change', async (event) => {
  const file = event.target.files[0];
  if (!file) return;

  const dataUrl = await imageToBase64(file);
  console.log(dataUrl);
  // Output: data:image/jpeg;base64,/9j/4AAQ...
});

الطريقة 3: استخدام واجهة Canvas

إذا كنت بحاجة إلى تغيير حجم الصورة أو قصها أو ضغطها قبل تحويلها إلى Base64، فإن واجهة Canvas هي الخيار المناسب:

function canvasToBase64(canvas, format = 'image/webp', quality = 0.8) {
  return canvas.toDataURL(format, quality);
}

// Example: Resize an image before converting
async function resizeImageToBase64(file, maxWidth = 800) {
  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement('canvas');
  const ratio = Math.min(maxWidth / bitmap.width, 1);
  canvas.width = bitmap.width * ratio;
  canvas.height = bitmap.height * ratio;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return canvas.toBase64('image/jpeg', 0.85);
}

الطريقة 4: استخدام Node.js

على جانب الخادم، استخدم وحدة fs مع Buffer لتحويل ملفات الصور إلى Base64:

const fs = require('fs');
const path = require('path');

function encodeImageToBase64(filePath) {
  const buffer = fs.readFileSync(filePath);
  const base64 = buffer.toString('base64');

  // Detect MIME type from extension
  const ext = path.extname(filePath).toLowerCase();
  const mimeTypes = {
    '.png': 'image/png',
    '.jpg': 'image/jpeg',
    '.jpeg': 'image/jpeg',
    '.gif': 'image/gif',
    '.webp': 'image/webp',
    '.svg': 'image/svg+xml',
    '.ico': 'image/x-icon',
  };
  const mimeType = mimeTypes[ext] || 'image/png';

  return `data:${mimeType};base64,${base64}`;
}

const dataUrl = encodeImageToBase64('logo.png');
console.log(dataUrl);

الطريقة 5: استخدام سطر الأوامر

على Linux و macOS، يمكنك استخدام أمر base64 المضمن:

# Encode to Base64 and wrap as a data URL
echo "data:image/png;base64,$(base64 -w 0 image.png)"

كيفية استخدام صور Base64 في HTML

مباشرة في وسم <img>:

<img
  src="data:image/webp;base64,UklGRpYCAABXRUJQVlA4WAoAAAA..."
  alt="Inline Logo"
  width="200"
  height="100"
/>

كيفية استخدام صور Base64 في CSS

كصورة خلفية:

.icon-warning {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PGxpbmUgeDE9IjEyIiB5MT0iMTYiIHgyPSIxMiIgeTI9IjEyIi8+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyLjAxIiB5Mj0iOCIvPjwvc3ZnPg==');
  width: 24px;
  height: 24px;
}

اعتبارات الأداء وأفضل الممارسات

متى تساعد صور Base64

• الأيقونات الصغيرة وعناصر واجهة المستخدم أقل من 10 كيلوبايت
• الصور الحرجة في الجزء المرئي من الصفحة التي تحجب العرض
• رسوميات sprite وأيقونات SVG المستخدمة عبر الصفحة
• قوالب البريد الإلكتروني حيث غالبًا ما تُحظر الصور الخارجية
• تطبيقات الويب دون اتصال أولاً والمستندات القائمة بذاتها

متى تضر صور Base64

• الصور الفوتوغرافية الكبيرة أو عالية الدقة (100 كيلوبايت+) — الحمل الإضافي لـ Base64 وتأخير التحليل يضران بالأداء
• الصور التي تتغير بشكل متكرر — إبطال ذاكرة التخزين المؤقت للمتصفح لحمولة HTML كبيرة إهدار للموارد
• الصور المشتركة عبر صفحات متعددة — الملفات الخارجية تستفيد من ذاكرة التخزين المؤقت المشتركة للمتصفح
• الصور المخدّمة عبر CDN — شبكات CDN تحسّن توصيل الملفات بشكل أفضل من البيانات المضمنة

قاعدة 10 كيلوبايت التقريبية

إرشاد شائع: إذا كانت الصورة أقل من 10 كيلوبايت، فكّر في تضمينها كـ Base64. إذا كانت أكبر، فاخدمها كملف منفصل. هذا يوازن بين الحمل الإضافي لطلبات HTTP والحمل الإضافي لبيانات Base64 في HTML الخاص بك.

ومع ذلك، يعتمد الحد الأمثل على حالتك الخاصة:

• يقلل تعدد الإرسال في HTTP/2 من عقوبة الطلبات المتعددة، مما يجعل الملفات الخارجية أكثر جاذبية
• على الاتصالات البطيئة، يمكن أن يكون إلغاء الطلبات قيّمًا حتى للصور الأكبر
• بالنسبة لموارد مسار العرض الحرج، قم بتضمين حتى الصور الأكبر إذا كان ذلك يعني رحلة ذهاب وإياب أقل

اعتبار الضغط

إذا كنت تحوّل صور JPEG أو PNG إلى Base64، فكّر في استخدام WebP بدلاً من ذلك. يوفر WebP ضغطًا أفضل بنفس مستوى الجودة، مما ينتج عنه سلاسل Base64 أصغر. تتيح لك العديد من الأدوات عبر الإنترنت إعادة ترميز الصور قبل تحويلها إلى Base64.

حوّل صورك إلى Base64

هل أنت مستعد لتضمين الصور مباشرة في كودك؟ استخدم أداة ترميز وفك ترميز Base64 المجانية عبر الإنترنت لرفع الصور والحصول على عناوين URL بيانات كاملة لـ HTML و CSS و JavaScript — لا حاجة للتثبيت.