9/06/2017

settings_overscan print announcement

ملف توضيحي عن كيفية إستعمال تقنية سلسلة عناوين ورل للبيانات Data URLs لترميز خطوط الويب  بتشفيرة base64  لإستعمالها على الموقع الإلكتروني وبالأخص منصة البلوجر ، وكيف نستغل جميع الخطوط العربية الحاسوبية المجانية بتحويلها وتهيئتها لنستخدمها كخطوط ويب تعمل في جميع المتصفحات الحديثة، بما في ذلك إنترنيت إكسبلورر 8. كون هذه الألية أو التقنية نظام معرف موارد موحدة يسمح لك بتضمين عناصر البيانات المضمنة في صفحة ويب كما لو كانت يشار إليها كمصادر خارجية.  إلا أنها لا تقوم في الواقع بتحديد موقع أي شيء. بدلا من ذلك يتم تضمين بيانات المورد ضمن سلسلة عناوين ورل نفسها كسلسلة مشفرة base64. وهذا يغني المتصفح من الحاجة إلى تقديم طلبات HTTP إضافية للموارد الخارجية، وبالتالي يمكن زيادة سرعة تحميل الصفحة. تستطيع أن تكتشف الفارق عند تركيب خط بهذه التقنية ستلاحظ في مدة تحميل الصفحة يظهر الخط مع بداية أول دورة وبدون تأخير...وبما أنه لا شيء كامل فكما لهذه الخاصية عدة مزايا في نفس الوقت لها عيوب الأول لا يمكن تخزين عناوين Data URLs بشكل منفصل عن المستندات التي تحتوي عليها والثاني حجم الكود الضخم الذي ينتج من عملية التشفير وسيتضاعف بعدد الخطوط وفي نفس الوقت حجم ملف الخط نفسه كمثال الخط الأميــــــري لكن العجيب في الأمر أن الكود رغم كبره فلا يثقل القالب بل ويزيد من سرعة عرض الخط وهذا مجرب والأهم يعتبر حل فعال مع متصفح فاير فوكس وهذا ما نحن بصدد شرحه لكن قبل ذلك دعونا نعلم أسس عمل خطوط الويب لنعلم قيمة خاصية ترميز base64 ولماذا نحتاج إليها كحل فعال لأغلب المشاكل .


ألية عمل وعرض المتصفح للخط

المتصفح يُظهر خط مدونتك حسب التعليمات البرمجية كإسم الخط وخصائصه كالمقاس واللون والتنسيق...إلخ التي تكتبها على صفحة الأنماط CSS سواء داخل أو خارج النموذج برابط أو مسار إستدعاء ، فلو اخترت تضمين الخط الإفتراضي Arial على صفحة الأنماط CSS سيطلب المتصفح هذا الخط من مكتبة الخطوط في حاسوب المستخذم ، فإذا وجد هذا الخط سيتم عرضه بشكلٍ سليم، وان لم يوجد سيعرض المتصفح الموقع بخط آخر وغالباً سيكون tahoma . وتحسباً لإمكانية عدم وجود الخط المطلوب فإن المصمم يكتب أسماء ثلاثة خطوط أو أكثر يتم طلبها حسب ترتيبها فإذا لم يوجد الخط الأول يعرض الخط الثاني وهكذا . . . وكمثال يتم تحديد كود الخط هكذا

 body {font-family: Arial;} 

ولكتابة أكثر من خط ،  يأتي التنسيق مثلاً هكذا :


 body { font-family:'Amiri Quran', arial, tahoma, cursive; } 

في حالة إذا كان الخط رئيسي أو إحتوى على مسافة فارغه فيجب كتابة علامة تنصيص مفردة على جانبي اسم الخط
كما هو الإسم 'Amiri Quran'

صيغ الخطوط web fonts formats


الصيغة تعريف
TTF تعني TrueType font النسخة القياسية المستخدمة في الحواسيب.من تطوير آبل وهي الصيغة الأشهر، ولن يخلو نظام حاسوبي إلا وفيه عدد كبير من الخطوط بهذه الصيغة، وستجد عدد كبير من الخطوط العربية المتوفرة في الشبكة العالمية بهذه الصيغة
OTF تعني OpenType Font وهي امتداد لصيغة TrueType أتت لتحل بعض مشاكل ttf وهي بدورها تعاني من مشاكل أكثر هذا النوع يحتوي على حزمة حروف أكبر وبالتالي أكثر قدرة على عرض وطباعة الحروف مع دعم أفضل للغات المختلفة ! وهو نتيجة تعاون بين فريق adobe و microsoft .
EOT تعني Embedded OpenType اشتقتها ميكروسوفت من صيغة OpenType، هذه الصيغة حصرية لمتصفح إنترنت اكسبلورر. هذا النوع قد يحتوي على عناوين لمواقع محددة يعمل لها فقط، لحفظ الحقوق فهو يحدد نطاقا واحدا لإستخدام الخط فيه .
WOFF تعني Web Open Font Format هذه الصيغة في حقيقتها مجرد وعاء لـ TrueType أو OpenType ، ولكن هذا الوعاء مضغوط قل بـ40% من ttf ليحقق حجم أقل ليناسب متطلبات المواقع من ناحية سرعة عرض الخطوط، بالإضافة إلى أن هذه الصيغة تحتوي على معلومات أساسية MetaData عن الخط مثل المصنع ورخصة الاستخدام ! لذلك هي الصيغة التي توصي بها رابطة الشبكة العالمية W3C . وهي الصيغة هي التي تسعى جميع المتصفحات لدعمها وهي كذلك الصيغة المطلوبة دائما لتحويل الخط إلى ملف Data URLs على شفرة base64
SVG تعني Scalable Vector Graphics تقنية خاصة بعرض الرسوم على شبكة الإنترنت لهذا في الواقع لا يعتبر الملف خطاً بالمعنى الحرفي،فهو تجسيد لكل الحروف على هيئة أشكال svg هذه الصيغة خاصة بأنظمة IOS وكون النظام المحدث من IOS يدعم ttf مثلاً ( ios لا يدعم خطوط الويب العربية ! ),ما يعيب هذا الخط هو حجمه الكبير جداً، فهو أكبر بـ 400% من ttf، وأكبر بـ 800% من woff كما أنّه لا يدعم العربية، فلا تستطيع استخدامه هناك.


دعم المتصفحات الأكثر إستعمالاً لصيغ خطوط الويب


دعم المتصفحات IE8 IE9 Firefox Chrome Safari Opera UC Browser
OTF
EOT
TTF
WOFF
EOT / TTF
EOT / WOFF
SVG

- الصيغة svg الصيغة otf كبير حجمها مقارنة بـ ttf !.
- النظام المحدث من ios لا يدعم خطوط الويب العربية!.
- الصيغة woff أقل بكثير من ttf وتغني عنها غالباً ، وتدعهما كل المتصفحات المعروفه.
- الصيغة eot يدعمها حصرياً متصفح انترنت اكسبلورر بجميع إصداراته.

مهم: لا يمكن الاستغناء عن الصيغة EOT لمجرد دعم IE8، فمتصفح الانترنت اكسبلورر الثامن IE8 ما زال مستعملا بشكل كبير في العالم العربي حسب الإحصائيات رغم إنخفاظ مستوى Rank في الأونة الأخيرة وهيمنة متصفح  الكروم وإليك نموذج إحصائي عن مستوى لكل متصفح أو قم بزيارة هذا الموقع المراقب لمدى قوة إستعمال المتصفح StatCounter


النتيجة:أفضل وأشمل استخدام هو الجمع بين الصيغتين ( EOT , WOFF , TFF )

كبف نحصل على خط بجميع الصيغ؟

في الوقت الحالي أصبح هذا الأمر أسهل بأشواط من الفترات السابقة فحاليا نجد مواقع تبذل جهدا كبيرا لتوفير خطوط عربية إحترافية ومجانا مثل مكتبة الخطوط العربية فونتـ فيس والتي توفر (أكثر من ١٤٠ خط عربي ) تستعمله أشهر وأقوى المواقع .
وعندنا كذلك مكتبة خطوط google fonts التي أصبحت مؤخرا تعتني بالخط الشرق أوسطي عموما وستجد مجموعة جيدة ولابأس بها .
و تبقى المسألة متوقفة على مهاراتك في البحث وإيجاد المعلومة على النت وستلاحظ أن في الخطوط العربية المجانية الكفاية. يبقى المشكل أن الخط عند تنزيله للإستعمال على الحاسوب تجده متوفر بالصيغة TTF أو OTF ومثلا المواقع التى ذكرناها أنفا توفر على المستخدم الكثير من العناء عبر تضمين رابط مباشر للخط على هيئة ملف style.css هذا في حالة أردت إستعماله على قالب المدونة ويكون شكله مثلا في الخط الكوفي DroidKufi توفره لنا مكتبة خطوط google  كالآتي...

<link href='//fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

موضع رابط التضمين في المكان الصحيح أسفل <head> أسفل أكواد الميتاتاج أو ببساطة  فوق   <b:skin><![CDATA[  ويأتي دائما مع رابط التضمين كود صغير هو  وسم الإستعمال للخط  يكون على الشكل التالي

 font-family: 'Droid Arabic Kufi', serif; 

كما تلاحظ الوسم يحمل نفس الإسم الذي بالون ▊ الأخظرالموجود في أخر رابط التضمين يوضع هذا الوسم في الأماكن التي تختارها لعرض الخط أو يمكن إستبداله مكان وسم خط قالبك إبحث فقط عن font-familyأوfont
الآن لوأننا دخلنا على الرابط المحدد باللون ▊ الأزرق سيعرض لك صفحة style.css  بها مجموعة من الأكواد تحمل روابط لنفس الخط لكن بجميع الصيغ التي ذكرناها سالفا لو أنك قمت بإختيار أي رابط من المجموعة ودخلت عليه مرة أخرى سيقوم بتنزيل ملف الخط على جهاز حاسوبك بالصيغة التي إخترتها ولايعني هذا أنك تستطيع تنزيل جميع صيغ الخطوط بهذه الطريقة لأن هناك خطوط لا تحتوي إلا على صيغة واحدة لكن معدلة وفي الغالب تكون صيغة WOFF إذن ما العمل؟
الحل بسيط أولا ما عليك سوى الحصول على الخط بصيغة TTF وهي الصيغة الأوفر التي نثبتها على نظام الحاسوب فإذن هي متوفرة بكثرة ...ثم تاليا نقوم بالإستعانة بأدوات لتحويل الخط إلى جميع الصيغ وهذه السكريبتات والبرمجيات والمواقع لا يمكن حصرها لذلك  سنضرب عنها صفحا ونعفيك من ذلك عبر موقعين :
  1. مواقع لتحويل صيغ الخط
  2. الأول Font Squirrel : موقع  لعرض الخطوط ، بالإضافة الى خدمة تحويل صيغ الخطوط ، هو الأكثر استخداماً على ما أعتقد. بالنسبة للخطوط العربية لابد من اختيار التبويب EXPERT ثم وضع علامة عند الخيار  No Subsetting وتحدد على الصيغ المراد تحويلها أو كذلك تستطيع إختيار التبويب BASIC مباشرة دون تعقيدات ستجد شروحات كثيرة حول التعامل مع هذا الموقع  .
  3. معلومة
    - Ethan - صاحب هذا الموقع Font Squirrel إقترح حلاً فعالاً لمشكلة تنسيق كود إستدعاء الروابط ، وهو وضع نوع الخط بعد مساره، وترتيب الخطوط بطريقة فعالة حتى لا يحمل أيّ متصفح الخط مرتين وسنعرف المقصود عمليا عندما نصل إلى مرحلة المثال التطبيقي عن  طرق إدراج الخط في القالب
  4. الموقع الثاني web font generator أستعمله انا شخصيا سهل وبسيط وفعال وبحمد الله لم أجد أي مشاكل خصوصا في التعامل مع الخط العربي المبارك .
    بعد الدخول على الموقع فقط قم بالضغط على زر Shoose file قم بإختيار ملف الخط بصيغة TTF أو OTF من على جهازك ثم حدد فقط على الخيارالثاني ثم إضغط على زر Generate web font إنتظر قليلا حتى يظهر معك زر تنزيل المجلد به الخط بجميع الصيغ.

في كلا الموقعين ستحصل على مجلد يحتوي على جميع صيغ الخط بالإضافة لملف style.css جاهز لربطه بقالبك وهذا طبعاً مع بعض التعديلات والتي سنعرفها في المرحلة التالية.

إدراج الخطوط @font-face في ملف CSS

لو أنك دخلت على رابط التضمين المباشر في المثال الذي طرح سابقا كنت قد لا حظت مجموعتين من الأكواد بداية كل مجموعة @font-face تحتوى على روابط خاصة بكل أنواع الصيغ وليكن هذا مثالنا ...سنختار الجزء الأول وهو نفسه في الجزء الثاني الفارق في سمك الخط Bold  قبل أن نشرح الكود ( بإيجاز)  إذا أردت الإستزادة والتوسع في هذه الجزئية طالع هذا المقال الجيد على صفحة google للمطورين تحسين خط الويب

 @font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot);
  src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'),
       url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype');
} 

     المحدد بهذا اللون خاص بوسم (إسم الخط) مكانه هنا في الكود للتعريف بالخط حتى يعرفه قالب المدونة عند إستدعاء الخط.
    المحدد بهذا اللون خاص بتنسيق الخط مثلا (نضع italic بدلاً من normal إذا كان الخط المدرج مائل).
    المحدد بهذا اللون خاص بسمك الخط والرقم ما تحت 600 يعني خط أخف ومافوق 700 يعني سميك.
    المحدد بهذا اللون تلا حظ أنه رابط بصيغة eot مكرر الفارق في العلامة?#iefixوهي لتفادي مشكل تعثر متصفح EI
    المحدد بهذا اللون رابط مكرر بصيغة woff بالنسبة لـ woff2 هي إصدار على المتصفحات التي تتوافق معه
    المحدد بهذا اللون في أخر الكود هو رابط ملف الخط بصيغة ttf
    ملاحظة مهمة
    حافظ دائما على هذا الترتيب والتنسيق للكود لا يجب أن ندرج كل خط لوحده في عبارته الخاصة،أو حتى أن ندرج أكثر من امتداد في عبارة واحدة ، لأن ذلك يجعل المتصفح يُحمل كل الخطوط مما يعني ثقلاً على المستخدم، وبطء في تحميل وظهور الصفحة والخط ، وهذا أمر لا تريده على الاطلاق! لهذا توصل المطورون إلى أن أحسن تنسيق وترتيب لكود التضمين على صفحة style.css هو الشكل الذي أمامك بالضبط (الأن تكون قد عرفت ماذا كان يقصد المطور - Ethan - صاحب موقع Font Squirrel).
    كيفية عمل هذا الترتيب
    نجد الكود السابق يقوم أولاً بالبحث عن نسخة محلية Local من الخط لها اسم مشابة، فإن لم تتوفر يقوم بإستدعاء الخط المطلوب وعرضه مثلا متصفح فايرفوكس أو الكروم سيبدأ من أول سطر وبما أنه لا يدعم صيغة eot ينتقل للسطر التالي سيجد صيغة woff لذا سيتوقف هناك، بمعنى أنّه لن ينتقل للسطر الذي بعده،وهذا يعني تقليل من المساحة والوقت اللازمين لتحميل كل مكونات الصفحة المطلوبة. ، فالترتيب مهم حتى لو أدرجت خطاً أخر أو وزن عادي/Bold و سميك/Normal وأنت لا تستعمل في القالب إلا Normal ، فإن المتصفح لن يستدعي Bold
    فمتى يكون الثقل؟..فقط يكون عندما تستدعي أكثر من خط على قالب مدونتك لهذا الجميع من خلال التجربة ينصح بإستعمال نوعين أو خطين فقط ... ( واحد للعناوين ) و (الآخر للنصوص)      
    كيف نستدعي الخط؟
    هذا سهل!!...ولنطبق المثال على نفس الكود المدرج وهو الخط المشهور عربي كوفي لكن أولا دعنا ننسق الكود فقبل استخدام خط الويب الخاص بمدونتك، الأحسن تنسيق خطوط المدونة بالخطوط الأساسية مثل arial أو tahoma وغيرها ، ثم بعد الانتهاء من ذلك قم بكتابة اسم خط الويب الرئيسي  قبلها في الترتيب ؛ وهذا حتى في حال تعطل خط الويب لأي سبب يكون التنسيق الأساسي هو الذي يتحكم بمظهر المدونة. و التنسيق كالتالي:
    
     font-family: 'Droid Arabic Kufi', arial, tahoma, serif; 
    
  • إذا أردت جعل الخط على كامل القالب قم بوضعه داخل الوسم body{
  • إذا أردت جعل الخط على العناوين مثلا ضعه داخل الوسوم h1, h2, h3, h4{
  • في مايخص هذه المرحلة بقي عندي سؤال؟
    لقد قمت بتحميل خط بصيغة TTF يعمل جيدا على الحاسوب بدون مشاكل  وقمت بتحويله إلى جميع الصيغ وقمت بضبط أكواد التضمين على الترتيب الصحيح وكذلك أعددت وسم الإستدعاء في كامل قالب مدونتي ...لكن بقى مشكل الرابط المباشر HotLink لجميع الصيغ التي حصلت عليها؟.
    المشكل إذن في إيجاد موقع معتمد يوفر روابط مباشرة ...الجواب هو ان هذا المشكل كلنا نعاني منه ليس مع ملفات الخطوط فحسب والأغلب يعتمد على الإستضافات المدفوعة  ففي كل مرة نلاحظ تغيرات في سياسات المواقع التي تقدم خدمات إستدعاء الملفات وكما نعلم أن Google Code  قد تم إغلاق هذه الميزة ونفس السياسة تم تطبيقها مع google drive وكذلك موقع DropBox أما بالنسبة لــ Google Sites لازال يعمل لكن بمساحة محدودة لا تتعدى 200MB وحتى لو وجدت إستضافة جيدة  وحصلت على  الروابط المباشرة لصيغ الخط فسنواجه مشكلة أخرى وهي عدم عرض الخط على متصفح فاير فوكس!! 

مشكلة خطوط الويب مع FireFox

برغم من أن هذا المتصفح يعرض الخطوط بأدق جماليته تماما كمتصفح IE عكس متصفح كروم الذي لم يجد حلا إلى الآن سوى في صيغة SVG ولا أحد يريدها نظرا لحجمها الكبير ونطاقها المحصور نجد في المقابل أن المتصفح فاير فوكس يعاني مشكلتين كونه لايتعامل أصلا مع صيغة SVG هذه نقطة والأخرى لا تعتبر مشكلة بالمعنى الحرفي وإنما سياسة صارمة يطبقها فريق العمل على الخطوط المرفوعة بروابط مباشرة فالسياسة المطبقة لا تسمح باستخدام خطوط الويب إلا إذا كانت محفوظة في نفس الموقع الذي ستظهر فيه الخطوط. بتعبير آخر فيرفوكس يرفض عرض خطوط ويب في مدونتك لأنها محفوظة في موقع آخر...تدعى هذه السياسة  بـ تقاسم الموارد عبر المصدر  CORS و في موضوعنا هي منع استيراد الخطوط الخارجية.. هذا لأن مسؤولي هذا المتصفح مهتم بحقوق ملكية الخطوط  ! ، بالرغم من أن صاحب الموقع الذي يملك حق استخدام خط الويب يمكنه منع استخدام الخط ...فتجد الأغلبية القصوى التطرق إلى إرفاق ملف htaccess إلى ملفات الخط ليعطي تصريح  لنظام التحكم بتصاريح العبور للمواقع الخارجية بإستعمال هذا الخط بلا قيد أو شرط ومع ذلك ستواجه عائق أخر وهو إيجاد  الموقع المستضيف الذي يدعم خاصية اعطاء تصريح الربط أو العبور، و ربما تجد حتى الاستضافات المدفوعة قد لا تدعم هذه الخاصية مثل : ixwebhosting و استضافة أمازون . . . فعليك أن تتأكد من مزايا الاستضافة قبل استخدامها.
كما تلاحظ ...لقد دخلنا في دوامة مشاكل وعراقيل فماهو الحل أو على الأقل حل فعال ومرضي نسبيا امام هذه السياسات والقيود؟

الحل بواسطة تشفير ملفات الخطوط base64

كما تلاحظ وصلنا إلى نقطة الصفر ولم أعمد المرور على كل تلك المراحل إلا لنعي قيمة وفعالية تقنية سلسلة عناوين Data URLs أو ترميز المحتوى ...وستلاحظ كم هي وسيلة فعالة خصوصا مع مشكلة المتصفح موزيلا   فماهو العمل إذا ؟.

- لقد سبق وقمنا بإعداد مشروع بسيط يسهل على المدون العربي خصوصا المبتدأ (وكلنا مبتدؤون) أن يحصل على الأكواد وملفات الخطوط بجميع الصيغ المعهودة دون تعب أو عناء فقط النسخ واللصق ما عليك سوى الدخول على الصفحة التابعة لمدونة بلوجر كود عبر الرابط بلوجر خطوط

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

كيف تتم عملية ترميز base64 وإعداد الملفات؟

إستعمال الترميز مع الخطوط

الطريقة جدا بسيطة كما وضحنا سابقا بعد حصولك على صيغ الخط فقط تختار ملف واحد وهو صيغة WOFF ذلك لأن جميع المتصفحات الحديثة  تدعم هذه الصيغة وثانيا هي الأصغر حجما من بين الصيغ  .
الآن  تتوجه إلى موقع dataurl.net والذي  يقوم بترميز المحتوى بصورة جيدة جدا حتى الآن ...ستقوم بالضغط على إختيار ملف Choose file  ثم تختار من على جهازك فقط ملف الخط الذي بصيغة WOFF وإنتظر قليلا ليظهر لك كود الترميز ستلاحظ أنه كبير الحجم وكما قلت سابقا هذا لا يعني شيئاً فقط حاول أن تختار خط ذو حجم صغير.
حذاري!!...لاتقم بتحويل جميع الصيغ ووضعها في قالبك فقط ملف الخط بصيغة WOFF

لاتنسى أخذ نسخة إحتياطية من القالب

طريقة وضع كود Data URLs


 @font-face {
  font-family: 'إسم الخط';
  src:  url(كود الخط) format('woff');
  font-weight: normal;
  font-style: normal;
} 
    التعديل على الكود
    في الكود الذي أمامك قم بوضع كود الترميز مكان كود الخط
    إستبدل إسم الخط بالإسم المراد تضمينه تستطيع كذلك وضع إسم الخط الذي في المدونة دون الحاجة لإعادة تعديل القالب من جديد... إحذر أن تضع رموز أو أرقام يجب أن تكون حروف لاتينية
    بقية الأكواد سبق وشرحناها
  • بعد ضبط الكود قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع الكود كامل ...ومبروك عليك.
  • للإشارة..لايعني عدم إختيار صيغة أخرى مثل TTF لاتصلح بل على العكس تستطيع ترميز الخط بهذه الصيغة وسيعمل بدون أي مشاكل فقط نختار صيغة WOFF لأنها صغيرة الحجم ولاتحتوى على مشاكل في الغالب سواء مع الخطوط العربية أو الأجنبية .

إستعمال الترميز مع الصور

تماما مثلما أعددنا ملفات الخط كذلك بنفس الطريقة مع الصور... تستطيع تحويل الصور الثابتة وأيقونات مدونتك إلى رابط Data URLs مشفر فقط يفضل أن تكون صور بحجم معقول حتى لا نحصل على توليفة ترميز هائلة الحجم .
ماتفعله هو الذهاب لنفس الموقع ثم إختيار الصورة أو الأيقونة المراد تحويلها عند حصولك على كود الترميز إعتبره رابط ويب عادي ثم قم بوضعه في المكان المحدد لإستدعاء الصور وإليك مثال بسيط عن طريقة تضمين صورة أو أيقونة
  • لاحظ هذا كود فارغ لتضمين صورة
  • 
     <a target='_blank' title='الوصف' href='رابط التوجية'><img src='رابط الصورة'/></a>  
    
  • سنضيف الآن كود الترميز للصورة مكان الرابط
  • 
     <a target='_blank' title='الوصف' href='رابط التوجية'><img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAApCAYAAABDV7v1AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAF4SURBVHja7Na/S1dRGAfgb1iJEDSooYvgUEOmCEFiNPgfPC2NKZES6BCJg0NqQUsgrrUYuDgEGS0NQUMQGARBOihC0g9ag4ZCRbwub3CQcDG8NznDWT73DM/lvO97Tq0oitr/sGoZmqEZmqEZmqEZmqH7LXTgJkYxjBHcRnsloDiBu/iBDyiS9QLnSoeiDmOBuhfZLWzgF85X4ujRiC8BvZLkryN7kGRnMYDmMqBN+BSowSSfjWwyyYYi6y376D+jC8exHDXbnuy99i/K4aDN9DCw37GKdVyMH5nDO6xhG0tYxP2yxtPp6PICb1Af+Tim8QpbeIoZDBw6FN24jrfJaFpAY7LnBnZwqawanQrYCh7jEb5FNr+nRtfRXQZ0JEDP9+QX8DWapzWyZvTgVBnQ9wHt/8u3hajJtioM/D/zcgmXkylwFb/xEseqAD2DJ4H9iY8xnjbxDC2VeT3hJDrj5pnAHfShIb9HMzRDMzRDMzRDM/TIQncHAPw6Pk501GLGAAAAAElFTkSuQmCC'/></a>  
    

و ربما في الأخير ستسألني مافائدة هذا كله؟

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

للأمانة / ساعدنا بتزويد المعلومات مقال لمدونة بلوجر (جاسر الحربي)