الصورة إلى Base64: كيفية تشفير الصور كعناوين URI للبيانات (وعندما ينبغي عليك ذلك فعليًا)

لدي اعتراف من شأنه أن يجعل مهندسي الأداء يغمزون. في إصدار مبكر من لوحة معلومات WordPress لـ WP Adminify، قمت بتشفير كل رمز بشكل أساسي وأدرجها مباشرة في CSS لأنني سئمت من إدارة أوراق الكائنات. لقد نجح. ظهرت الرموز على الفور، دون أي طلبات إضافية، ولا وميض من الصورة المفقودة. ثم تضخمت ورقة الأنماط إلى ما يزيد عن ميغابايت وشعرت الصفحة بأنها أبطأ عند التحميل الثاني، لأنه لا يمكن تخزين أي من تلك الصور المضمنة مؤقتًا بمفردها. هذا المشروع هو المكان الذي تعلمت فيه ذلك &quot؛ صورة إلى base64&quot؛ هي تقنية مفيدة حقًا وسهلة الاستخدام أيضًا.

يغطي هذا الدليل نصفي هذا الدرس. سأوضح كيفية تحويل الصورة إلى الأساس 64 باستخدام الصورة إلى محول Base64 في Toolz.dev، كيفية فك تشفير base64 مرة أخرى إلى صورة، وما هو URI للبيانات حقًا، والمقايضات الصادقة حتى تتمكن من تضمين الأصول التي تستفيد وتترك الأصول التي لا تستفيد منها.

ليرة تركية؛DR: يؤدي تحويل صورة إلى base64 إلى تحويل محتوياتها الثنائية إلى سلسلة نصية، وعادةً ما يتم تغليفها في معرف URI للبيانات مثل data:image/png;base64,iVBORw0KG.... يتم تضمين هذه السلسلة مباشرة في HTML أو CSS أو SVG أو JSON بدون طلب ملف منفصل. يقوم محول Toolz.dev بالتشفير وفك التشفير في كلا الاتجاهين، ويعمل بالكامل في متصفحك بحيث لا يتم تحميل أي صورة على الإطلاق، ويمنحك القاعدة الأولية64، وURI بيانات جاهزة، و <img> العلامة، ومقتطف CSS. يعمل Base64 على تضخيم الحجم بحوالي الثلث، لذا فإن الأصول الصغيرة المضمنة مثل الرموز، وليست الصور الكبيرة.

ما هي الصورة الأساسية 64 بالضبط؟

Base64 هو نظام تشفير، وليس ضغطًا وليس تشفيرًا. يتم تعريف المخطط بواسطة RFC 4648و ال data: URI الذي يغلفها RFC 2397. يمثل بيانات ثنائية عشوائية باستخدام 64 حرف ASCII قابل للطباعة: الحروف من A إلى Z ومن a إلى z، والأرقام من 0 إلى 9، بالإضافة إلى + و /مع = تستخدم للحشو. تم تعريف المخطط في RFC 4648، وهو نفس المعيار الذي يحكم القاعدة 64 التي تراها في مرفقات البريد الإلكتروني وحمولات JSON.

سبب وجودها هو أن الكثير من الإنترنت &#39؛ تم تصميم السباكة للنص، وليس البايتات الأولية. يمكن أن تحتوي البيانات الثنائية على قيم بايتات ستشوهها القناة الموجهة نحو النص. يتجنب Base64 ذلك عن طريق أخذ ثلاث بايتات من الإدخال، وتقسيم تلك البتات الـ 24 إلى أربع مجموعات مكونة من ستة، وتعيين كل مجموعة إلى واحدة من الأحرف الـ 64. ثلاث بايتات، وأربعة أحرف خارج. هذه النسبة من ثلاثة إلى أربعة هي بالضبط السبب وراء كون الإخراج المشفر أكبر بنسبة 33 بالمائة تقريبًا من المصدر، وهو رقم يستحق الحفظ لأنه يقرر ما إذا كان التضمين فكرة جيدة.

أ &quot؛ صورة واقتباس 64؛ هو ببساطة ملف صورة تم تشغيله من خلال هذا التشفير. السلسلة في حد ذاتها مجرد نص. ما يجعلها قابلة للعرض هو تغليفها في URI للبيانات.

ما هو URI للبيانات ولماذا يعرضه المتصفح؟

عنوان URI للبيانات هو عنوان URL يحمل حمولته مضمنة بدلاً من الإشارة إلى مورد بعيد. شكله المحدد في RFC 2397 هو data:[<media-type>][;base64],<data>. بالنسبة لـ PNG الذي يبدو data:image/png;base64,iVBORw0KGgo....

القطعة المهمة هي نوع الوسائط، image/png في هذا المثال. يخبر المتصفح بكيفية تفسير البايتات التالية. نظرًا لأن معرف URI للبيانات يعلن عن نوع MIME الخاص به، فيمكن للمتصفح التعامل معه data:image/png;base64,... كصورة، في اللحظة التي تقوم فيها بتوزيع سمة تتوقع عنوان URL، سواء كان ذلك هو عنوان URL src من <img> أو ال url() في CSS background-image. لا تحدث رحلة ذهابًا وإيابًا عبر الشبكة، لأنه لا يوجد شيء يمكن جلبه. الصورة موجودة بالفعل، ومكتوبة في العلامات.

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

كيف يمكنني تحويل صورة إلى base64 على Toolz.dev؟

ال الصورة إلى محول Base64 له اتجاهان، والتشفير هو الافتراضي.

اختر &quot؛ الصورة إلى Base64&quot؛ الاتجاه، ثم تحميل صورتك أو إسقاطها. تقرأ الأداة الملف محليًا باستخدام واجهة برمجة تطبيقات ملفات المتصفح، ولأن هذه القراءة تحدث في متصفحك، فإن الصورة لا تنتقل أبدًا إلى الخادم. بمجرد تحميله، تحصل على معاينة بالإضافة إلى أربعة مخرجات، لكل منها زر النسخ الخاص به.

القاعدة الأولية 64 هي السلسلة العارية، وهي مفيدة عندما يكون لديك بالفعل غلاف خاص بك. URI للبيانات كاملة data:... سلسلة جاهزة للصقها في src أو url(). HTML <img> العلامة هي عنصر كامل يمكنك إسقاطه في القالب. CSS background-image الإعلان جاهز لورقة الأنماط. إلى جانب تلك التي ترى حجم البايت الذي تم فك تشفيره وعدد الأحرف الأساسي 64، حتى تتمكن من الحكم على الوزن قبل الالتزام. إذا كان الرقم يبدو مثيرًا للقلق، فهذه هي الأداة التي تقوم بعملها: صورة بحجم 200 كيلو بايت تصبح سلسلة بحجم 270 كيلو بايت في HTML الخاص بك هي بالضبط اللحظة المناسبة لإعادة النظر.

كيف يمكنني فك تشفير base64 مرة أخرى إلى صورة؟

التبديل إلى &quot؛Base64 إلى Image&quot؛ الاتجاه واللصق إما سلسلة أساسية 64 خام أو URI بيانات كاملة. المحول متسامح بشأن الإدخال: فهو يجرد المسافات البيضاء، وإذا قمت بلصق مسافة كاملة data:image/png;base64,... سلسلة تقرأ نوع MIME مباشرة من البادئة. إذا قمت بلصق القاعدة 64 العارية بدون بادئة، فإنها تفترض PNG، وهو الإعداد الافتراضي الآمن لمعظم لقطات الشاشة والأصول المصدرة.

يتحقق من صحة السلسلة أولاً. إذا كان ما قمت بلصقه غير معقول، فالأداة 64، مما يعني أنه يحتوي على أحرف خارج أبجدية RFC 4648، فإن الأداة تخبرك بدلاً من إظهار صورة مكسورة. عند التحقق من الإدخال، تحصل على معاينة مباشرة وزر تنزيل يعيد بناء الملف الثنائي الأصلي ويحفظه بالامتداد الصحيح. يكون هذا الاتجاه مفيدًا حقًا عندما تجد معرف URI للبيانات مدفونًا في ورقة أنماط أو استجابة API وتريد رؤية ماهيته بالفعل، أو استخراجها مرة أخرى إلى ملف حقيقي.

كل شيء هنا هو من جانب العميل، وهو نفس الوعد الذي يمر عبر بقية صندوق الأدوات، من النص الموجه محول BASE64 الى تشفير URL. إذا كنت تريد المنطق الأوسع وراء الاحتفاظ بهذا النوع من العمل في المتصفح، فإن دليل الترميز BASE64 يتعمق أكثر في التشفير نفسه.

متى يجب أن أقوم بتضمين الصورة كقاعدة 64، ومتى لا ينبغي لي ذلك؟

هذا هو القرار الذي توجد الأداة لإبلاغه، لذا إليك الجدول الذي أستخدمه بالفعل.

حالة	مضمنة كقاعدة 64؟	لماذا
أيقونة أو شعار صغير يستخدم على مستوى الموقع	في كثير من الأحيان نعم	يزيل الطلب، ويظهر على الفور، والحمل الزائد صغير
خلفية SVG صغيرة أو 1px	نعم	النفقات العامة البالغة 33 بالمائة لا تذكر على بضع مئات من البايتات
تصدير HTML أو البريد الإلكتروني بملف واحد	نعم	يجب أن يكون الملف مستقلاً بذاته، ولا يسمح بأي أصول خارجية
صورة بطل كبير أو لافتة	لا	الجزء العلوي كبير ولا يمكن تخزين الصورة مؤقتًا بشكل منفصل
إعادة استخدام الصورة عبر العديد من الصفحات	لا	يتم تخزين الملفات المرتبطة مؤقتًا مرة واحدة ويتم مشاركتها؛ يؤدي التضمين إلى تكراره في كل مكان
صورة المحتوى التي تتغير كثيرًا	لا	لا يمكن للمحررين تبديل النقطة الأساسية 64 بسهولة مثل الملف

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

بالنسبة لـ &quot؛no&quot؛ الصفوف، عادةً ما تكون الحركة الأفضل هي تحسين الملف وتقديمه بشكل طبيعي. هذا هو المكان الذي تشبه فيه الأداة ضغط الصورة أو ال محول التنسيق يكسب الاحتفاظ به، مما يؤدي إلى تقليص الأصل بحيث تكون النسخة المرتبطة خفيفة قدر الإمكان. لقد كتبت المزيد عن سير العمل بأكمله في مجموعة أدوات مطور الويب مرشد.

هل يحافظ base64 على خصوصية صورتي؟

نعم ولا، والتمييز مهم. Base64 هو ترميز، لذا يمكن لأي شخص لديه السلسلة فك تشفيرها مرة أخرى إلى الصورة الأصلية بالضبط. فهو لا يوفر أي سرية. لا تتعامل مع URI للبيانات كوسيلة لإخفاء أي شيء، لأن &quot؛Base64 إلى Image&quot؛ اتجاه هذه الأداة بالذات يعكسها في عجينة واحدة.

ما هو خاص هو التحويل نفسه. في Toolz.dev، تتم قراءة الصورة وترميزها بالكامل في متصفحك باستخدام File API، ولا يتم تحميل أي شيء. لذا فإن العمل الفني ولقطة الشاشة وشعار العميل الذي تقوم بتشفيره لا يترك جهازك أبدًا أثناء العملية. وهذا ضمان مختلف عن التشفير الذي يخفي المحتوى، وأحاول أن أكون دقيقًا بشأنه لأن &quot؛خاص وعارض؛ يتم طرحها بشكل فضفاض. الخصوصية موجودة في المعالجة المحلية، ويتم تغطيتها على نطاق أوسع في خصوصية البيانات دليل، وليس في الأساس 64 كمخطط.

بعض النصائح العملية من شحن هذا

تفضل SVG للأيقونات عندما تستطيع ذلك، وقم بتضمين ترميز SVG مباشرة بدلاً من ترميزه الأساسي 64. SVG عبارة عن نص بالفعل، لذا فإن تغليفه في الأساس 64 يضيف فقط ضريبة بنسبة 33 بالمائة مقابل لا شيء. يتألق Base64 للتنسيقات النقطية مثل PNG وJPEG الثنائية حقًا.

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

حافظ على نوع MIME صادقًا. إذا قمت بتصدير ملف JPEG ولكن قمت بتسمية معرف URI للبيانات الخاص به على أنه image/png، بعض المتصفحات تتعامل مع الأمر والبعض الآخر لا يفعل ذلك. يكتشف المحول النوع الحقيقي من الملف بحيث يكون الإخراج صحيحًا، ولكن إذا قمت بتجميع معرف URI للبيانات يدويًا في مكان آخر، فقم بمطابقة نوع الوسائط مع البايتات الفعلية.

وعندما ترث قاعدة تعليمات برمجية مليئة بعناوين URI للبيانات الغامضة، تذكر اتجاه فك التشفير. لصق واحد في &quot؛Base64 إلى Image&quot؛ يعد التنزيل الجانبي والضرب أسرع طريقة لمعرفة ما يتم شحنه بالفعل من ورقة الأنماط.

كيف يعمل ترميز base64 فعليًا، خطوة بخطوة؟

من المفيد رؤية الآليات مرة واحدة، لأن القصة العامة البالغة 33 بالمائة بأكملها تخرج منها بشكل طبيعي. يعمل Base64 على مجموعات من ثلاث بايتات في المرة الواحدة. ثلاث بايتات هي 24 بت. يقوم المشفر بتقسيم تلك الـ 24 بت إلى أربع قطع كل منها ستة بتات. يمكن أن تمثل ست بتات 64 قيمة، من 0 إلى 63، وكل من هذه القيم يتم تعيينها إلى حرف واحد في الأبجدية الأساسية 64: من A إلى Z للأرقام من 0 إلى 25، ومن A إلى Z للأرقام من 26 إلى 51، والأرقام من 0 إلى 9 للأرقام من 52 إلى 61، إذن + ل 62 و / ل 63.

لذا فإن ثلاث بايتات إدخال تصبح دائمًا أربعة أحرف إخراج. هذا هو مصدر زيادة الحجم. أربعة أحرف تحمل معلومات ثلاثة بايت، وهي نسبة 4 إلى 3، وهو نفس القول بأن الإخراج أكبر بمقدار الثلث من الإدخال. لا توجد طريقة للتغلب عليه، لأنه يتم دمجه في كيفية عمل المخطط.

الحشو يتعامل مع بقايا الطعام. إذا لم تكن بياناتك مضاعفًا نظيفًا لثلاث بايتات، فإن برنامج التشفير يقوم بتوسيع المجموعة النهائية بحيث يستمر في إنتاج عدد صحيح من الأحرف، ويلحق حرفًا أو حرفين = علامات لتسجيل مقدار الحشو الذي أضافته. ولهذا السبب غالبًا ما تنتهي سلاسل base64 = أو ==. زائدة واحدة = يعني أن المجموعة الأخيرة تحتوي على بايتين؛ مزدوج == يعني أنه يحمل واحدة. يتعامل محول Toolz.dev مع الحشو تلقائيًا في كلا الاتجاهين، وعند فك التشفير فإنه يقبل بسعادة السلاسل مع أو بدون زائدة =لأن بعض الأنظمة تجرده.

يمكنك مشاهدة هذا اللعب بمثال صغير. بايتات ASCII الثلاثة للأحرف &quot؛ رجل واقتباس؛ تشفير إلى الأحرف الأربعة &quot؛TWFu&quot؛ مثال مشهور مباشرة من أدبيات التشفير. قم بإسقاط نفس الأحرف الثلاثة في URI للبيانات كنص ويمكنك رؤية الرحلة ذهابًا وإيابًا، أو تشغيل صورة حقيقية من خلال الأداة ولاحظ أن عدد الأحرف في الإخراج يبلغ دائمًا حوالي أربعة ثلثي عدد البايتات الموضحة بجانبه.

إن فهم هذا يفسر أيضًا سبب كون base64 غير مناسب للصور الكبيرة ومناسبًا جيدًا للصور الصغيرة. الحمل هو نسبة مئوية ثابتة، لذلك على أيقونة 300 بايت يكلفك 100 بايت، لا أحد يهتم. في الصورة التي تبلغ سعتها ميجابايت، يكلفك ذلك ثلثي ميجابايت من انتفاخ النص النقي في المستند، ويجب تنزيل هذا المستند وتحليله قبل أن تتمكن الصفحة من عرضه. لا تتغير الرياضيات مع الحجم، ولكن العواقب تتغير.

الأسئلة المتداولة

كيف يمكنني تحويل الصورة إلى Base64؟

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

ما هو URI البيانات؟

Uri للبيانات عبارة عن سلسلة تتضمن ملفًا مضمنًا بدلاً من الارتباط به، في بيانات النموذج: [نوع mime]؛base64،[data]. بالنسبة لـ PNG، تبدو البيانات مثل:image/png؛base64،iVBORw0KGgo... تعرضه المتصفحات كصورة حيثما كان عنوان URL متوقعًا، لذلك لا حاجة إلى طلب منفصل.

هل يمكنني تحويل Base64 مرة أخرى إلى صورة؟

نعم. قم بالتبديل إلى Base64 لتوجيه الصورة والصق إما سلسلة Base64 أولية أو URI بيانات كاملة. تقوم الأداة بفك تشفيرها، وتعرض معاينة، وتتيح لك تنزيل ملف الصورة المعاد بناؤه.

ما هي تنسيقات الصور المدعومة؟

يتم دعم كل من PNG وJPG/JPEG وGIF وWebP وSVG وBMP وICO وAVIF. يتم اكتشاف نوع MIME الصحيح من الملف بحيث يتم عرض URI للبيانات الناتجة بشكل صحيح.

لماذا سلسلة Base64 أكبر من صورتي؟

يمثل Base64 ثلاث بايتات من البيانات الثنائية بأربعة أحرف نصية، لذا فإن الإخراج المشفر أكبر بحوالي 33 بالمائة من المصدر. هذا الحمل هو السبب في أن Base64 يناسب الرموز والشعارات الصغيرة أكثر من الصور الفوتوغرافية الكبيرة.

هل من الآمن تحويل الصور هنا؟

نعم. تتم قراءة كل صورة وترميزها بالكامل في متصفحك باستخدام File API. لا يتم تحميل أي ملف أو سلسلة أو نتيجة إلى الخادم، لذلك تبقى الصور الخاصة على جهازك.

هل يجب علي تضمين الصور كـ Base64 في الإنتاج؟

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

هل يعمل المحول دون اتصال بالإنترنت وعلى الهاتف المحمول؟

نعم. نظرًا لأن كل المعالجة تتم من جانب العميل، فإنها تعمل بعد تحميل الصفحة حتى بدون اتصال، وتكون الواجهة سريعة الاستجابة عبر متصفحات سطح المكتب والهاتف المحمول الحديثة.