كيفية تحويل الصور والأيقونات الى نص واستخدامها في المواقع بواسطة اكواد CSS

كثير من المصممين يلجأوا الى استخدام روابط خارجية للصور والايقونات ، وهذا مايؤثر على اداء الموقع وسرعته ، وخاصة اذا كانت هذه الصور مستخدمة من قبل الجميع وعليها ضغط بالتحميل ، او وجدت مشكلة في ذلك السيرفر.

ولحل هذه المشكلة اتاحت لنا تقنية CSS تحويل الصور والأيقونات الى نص ونستخدمه بشكل طبيعي حيث يتم تحويله الى الصورة المحددة عند فتح الموقع.

طبعا اقصد الأيقونات والصور الصغيرة للموقع التي تستخدم بشكل دائم عند فتح اي صفحة من الموقع ، سنوضح لكم في هذا الدرس كيف يتم ذلك في خطوتين :

الخطوة الأولى: تحويل الصورة الى نص عن طريق تشفير base64

يتم تحويل النص عن طريق تشفير base64 او مايسمى (Base64 Encoder) وتوجد طريقتين للتحويل :
1. عبر الانترنت (Online): توجد الكثير من المواقع التي تقدم هذه الخدمة ، ولكن اخترت لكم هذا الموقع الذي استخدمه شخصيا هذا رابط الموقع .

بعد الدخول الى الموقع اختار ترميز النص (charset) من القائمة المنسدلة القيمة UTF-8 بعد ذلك اختار الصورة التي تريد تحويلها واضغط Convert the source data بعد اتمام عملية التحويل انسخ النص وحفظته بملف.

2. عن طريق برنامج هذا رابط تحميله Base64EncoderDecoder.exe استخدام البرنامج يتم بطريقة سهلة جدا اضف الصورة التي تريد تحويلها وملف الخرج سجله بصيغة txt واضغط على Do it .

الخطوة الثانية : تكويد CSS مع النص المحول.

طبعا ماسنستخدمه هو جعل الصورة كخلفية لأي عنصر في الموقع ، وايضا يمكن استخدام هذه الطريقة مع اكواد HTML ولكن سأشرحة في تدوينة قادمة، طبعا لاتمام هذه العمليه نحتاج لهذا الكود الصغير فقط :

background-image:url(data:image/png;base64,iVBORw0KGgoA.....II=);

انسخ النص الناتج من الخطوة الأولى واستبدله بالنص الذي باللون الأحمر ثم استبدل صيغة الصورة قبل تحويلها بدلا عن png باللون الازرق .

وبذلك تكون اتممت شرح كيفية تحويل الصور والأيقونات الى نص واستخدامها في المواقع بواسطة اكواد CSS ، واتمنى انني وفقت بايصال الفكرة لك اخي الكريم ، واذا واجهت اي مشكلة ضعها في تعليق .