صورة إلى عنوان بيانات

عنوان البيانات يضع الملف نفسه في العنوان. فبدل url("logo.png") المشيرة إلى ملف يجب على المتصفّح جلبه، تُكتب البايتات مضمَّنةً بترميز Base64 ويملكها المتصفّح أصلًا. طلب واحد أقلّ، ولا يمكن للصورة أن تصل متأخّرة ولا أن تعطي 404.

وBase64 يكلّف نحو الثلث. فثلاثة بايتات تصير أربعة محارف، فأيقونة بحجم 9 كيلوبايت تصير نحو 12 كيلوبايت من النص. وتلك هي المقايضة: تنفق بايتات لتوفّر رحلة ذهاب وإياب.

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

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

وما يصلح له هذا فعلًا. أيقونة SVG بحجم 2 كيلوبايت مستعملة في background-image. ونسيج صغير يتكرّر. وعنصر نائب يجب أن يظهر فورًا. وشعار داخل بريد HTML، حيث تُحجب الصور الخارجية افتراضيًا والمضمَّنة هي الشيء الوحيد الذي سيراه المستلم.

وما لا يصلح له. الصور الفوتوغرافية، والصور الرئيسية، وأي شيء فوق بضعة كيلوبايتات، وأي شيء مستعمل في أكثر من صفحتين. ويظهر التحذير فوق 10 كيلوبايتات ويستحق التصديق — فصورة ترويسة مضمَّنة بحجم 200 كيلوبايت هي صفحة تُعرض متأخّرة على نحو ملحوظ عمّا تحتاج.

ولـSVG خيار أفضل من Base64. رمّز الترميز بالنسبة المئوية بدلًا من ذلك والصقه في url() مباشرةً. فيبقى مقروءًا للإنسان، ويُضغط أفضل بكثير من Base64 (وهو شبه غير قابل للضغط، لكونه كثيفًا أصلًا)، وهو أصغر عادةً بنسبة 20% إلى 30%. فـBase64 هو الجواب الصحيح للصيغ الثنائية لا لـXML.

والمعاينة معروضة من عنوان البيانات نفسه لا من الملف الذي اخترته. فإن عُرضت، عملت السلسلة. وذلك هو الاختبار الوحيد الذي يستحق التشغيل، وهو يلتقط القطع الذي يحدث حين يُنسخ عنوان طويل جدًّا من طرفية.

وإن كانت الصورة أكبر ممّا تحتاج، فإن ضاغط الصور ومغيّر المقاس هما الخطوة قبل هذه — فتضمين ملف زائد الحجم لا يزيد الكلفة إلا سوءًا.