الورشة · الأيقونات وأيقونة الموقع
كيف تعمل : الأيقونات وأيقونة الموقع
أفلِتوا صورة. تنصرفون بأرشيف يحتوي ملف favicon.ico، وأيقونات التبويب، وأيقونة شاشة البداية في أجهزة iPhone، وأيقونات التطبيق القابل للتثبيت، والسطور التي تُلصق في صفحتكم بالضبط.
وضع أيقونة على موقع ويب ينبغي أن يكون شأن دقيقتين. أما في الواقع فيلزم سبعة ملفات بمقاسات مختلفة، وصيغة قديمة لم يعد أي برنامج يعرف كتابتها، وأيقونة خاصة بأجهزة iPhone، وأخرى يقصّها Android على شكله، ونصف دزينة من السطور تُلصق في الموضع الصحيح من الصفحة. ولهذا يوجد هذا الكم من مولّدات أيقونات المواقع، ولهذا تبدأ كلها بطلب شعاركم.
وهذا المولّد لا يطلبه. فصورتكم تُقرأ، ويُعاد رسمها بكل مقاس، ويُجمَّع الأرشيف في التبويب. وملف ico. يُبنى بايتا بايتا، لأن لا متصفح يعرف كتابته: وذلك مُتحقَق منه، لا مفترَض.
وإن كان مصدركم ملفا بصيغة SVG، أُعيد رسمه بكل مقاس بدل أن يُكبَّر أو يُصغَّر. وهذا بالضبط ما ينبغي فعله بصورة متجهية، وهو أفضل مصدر ممكن لطقم أيقونات.
كيف تعمل
- أفلِتوا صورتكم. والمربع الذي لا يقل ضلعه عن 512 بكسلا مثالي؛ وملف SVG أفضل منه، فسيُعاد رسمه واضحا بكل مقاس.
- اختاروا كيف تُعالَج الصورة غير المربعة، وهل تتلقى الأيقونات التي لا تدعم الشفافية خلفية بيضاء.
- انقروا على «الصناعة والتنزيل». ينزل أرشيف واحد، بالملفات التسعة وبمذكرة تحتوي السطور التي تُلصق.
الصيغ المقبولة
هذه العائلات الأربع تُفتح في كل المتصفحات المحدَّثة. ولصيغة SVG وضع خاص ومعالجة خاصة: فهي يُعاد رسمها بكل مقاس بدل أن تُحجَّم.
صورة PNG (.png)
أفضل خيار بعد SVG: فهي تحفظ الشفافية، وهذا يهم كثيرا في أيقونة تبويب. واستهدفوا 512 بكسلا للضلع على الأقل.
صورة متجهية SVG (.svg)
المصدر المثالي: فكل مقاس يُعاد رسمه انطلاقا من الرسم، لا يُكبَّر انطلاقا من بكسلات. ويجب أن يحمل ملف SVG مقاساته الخاصة أو منطقة رسم، وألا يحيل إلى أي خط ولا إلى أي صورة خارجية، وإلا أهملها المتصفح.
صورة JPEG (.jpg، .jpeg)
تعمل، لكن صيغة JPEG ليس فيها شفافية: فستكون لأيقونتكم دائما خلفية مستطيلة. وللشعار، آثروا صيغة PNG أو SVG.
صورة WebP (.webp)
تُفتح في كل مكان وتحفظ الشفافية. أما الأيقونات المنتَجة فهي دائما بصيغة PNG: وهي الصيغة الوحيدة التي يلزم المتصفح بكتابتها، والوحيدة التي تقبلها كل الأنظمة داخل ملف ico.
حدودها
20 ميغابايت لكل ملف
لا سبب لأن يكون مصدر أيقونة ثقيلا: ففوق عشرين ميغابايت لم نعد أمام شعار بل أمام صورة فوتوغرافية، والأرشيف الناتج سيكون هو نفسه. والحد يتفادى إشغال هاتف بلا طائل.
نحو 16.7 مليون بكسل لكل صورة
في أجهزة iPhone وiPad، ظل سطح اللوح زمنا مسقوفا عند 4096 في 4096 بكسل، ويفشل التخصيص فوق ذلك. والأداة تراقب المساحة قبل التخصيص وترفض رفضا نظيفا.
المصدر الصغير جدا لا يمكن تحسينه
إن كان ضلع صورتكم أقل من 512 بكسلا، كانت الأيقونات الكبيرة تكبيرا، أي مضبَّبة. ولا تستطيع أي أداة اختراع بكسلات غير موجودة، وهذه تقول لكم ذلك على الشاشة بدل أن تردّ إليكم أيقونة رخوة بلا تعليق.
ملف ico. يُجمَّع باليد، وفيه صور PNG
لا متصفح يعرف كتابة ملف ico.: قسنا ذلك، وطلب هذه الصيغة من لوح يردّ صورة PNG. لذلك تُبنى الحاوية بايتا بايتا حول ثلاث صور PNG. وصورة PNG داخل ملف ico. مقبولة منذ Windows Vista ومنذ Firefox 9؛ أما بقية المتصفحات فلم نجد فيها إلا أدلة استعمال، لا وثائق من الناشرين، ونحن نؤثر كتابة ذلك.
الأرشيف لا يحمل أي تاريخ
ملف zip يسجّل عادة تاريخ كل ملف وساعته. وستكون تلك المعلومة الوحيدة عنكم التي ينقلها الأرشيف. لذلك نكتب فيه تاريخا ثابتا، هو أقدم ما تجيزه الصيغة، وأرشيفان مصنوعان من الصورة نفسها متطابقان بايتا ببايت.
الصور المتحركة مرفوضة
الأيقونة ثابتة بطبيعتها، واللوح لا يحتوي إلا مشهدا واحدا. وبدل الاحتفاظ في صمت بأول صورة من حركة، تتوقف الأداة وتقول ذلك.
أسئلة عن هذه الأداة
هل تُرسَل صورتي إلى مكان ما؟
لا، ولستم مضطرين إلى تصديقنا. افتحوا أداة الفحص في متصفحكم بمفتاح F12، وانتقلوا إلى تبويب «الشبكة»، وأفرغوا القائمة، ثم أفلِتوا صورتكم. لن يظهر أي سطر. ويمكنكم أيضا قطع اتصالكم: تظل الأداة تعمل، والأرشيف كذلك.
أي صورة نعطي للحصول على نتيجة جيدة؟
ملف SVG إن كان عندكم: فيُعاد رسم كل أيقونة حينها واضحة بمقاسها النهائي. وإلا فصورة PNG مربعة ضلعها 512 بكسلا على الأقل، بخلفية شفافة. وتجنبوا صورة بتفاصيل دقيقة كثيرة: فعند ستة عشر بكسلا للضلع، يصير الرسم الدقيق بقعة. وأيقونات المواقع الجيدة هي دائما تقريبا شكل بسيط وتباين صريح.
لماذا تسعة ملفات، لا ملف واحد؟
لأن الأنظمة لا تطلب الشيء نفسه. فالمتصفحات تريد أيقونة صغيرة للتبويب وتبحث عن ملف favicon.ico في جذر الموقع من دون أن نقول لها. وiOS يريد أيقونة بـ180 بكسلا لشاشة البداية، وهو يضعها على سواد إن كانت شفافة. وAndroid يريد أيقونة قابلة للقص، يقصّها على الشكل السائد. وبيان التطبيق القابل للتثبيت يريد اثنتين أخريين. ولا واحدة من هذه الحاجات نزوة، ومذكرة الأرشيف تقول لكم أين يوضع كل واحد.
لماذا لا يحتوي الأرشيف أي تاريخ؟
لأن ملف zip يسجّل عادة تاريخ كل ملف وساعته، ولأن ذلك سيكون المعلومة الوحيدة عنكم التي ينقلها الأرشيف. لذلك نكتب فيه تاريخا ثابتا، هو أقدم ما تجيزه الصيغة. وهي تفصيلة، لكنها تفصيلة متسقة: فالأداة التي لا تستقبل شيئا لا سبب لأن تكتب شيئا عنكم في الملف الذي تردّه إليكم. ولذلك أثر جانبي طيب: فأرشيفان مصنوعان من الصورة نفسها متطابقان بايتا ببايت.
كيف تصنعون ملف ico. إن كان المتصفح لا يعرف كتابته؟
باليد. وقد بدأنا بالتحقق من ذلك بدل افتراضه: فطلب صيغة ico. من لوح يردّ صورة PNG، من دون تنبيه. لذلك يُجمَّع الملف بايتا بايتا، بترويسة فهرس أيقونات، وواصف لكل مقاس، وثلاث صور PNG متتالية. وهي نحو ثلاثين سطرا من الشيفرة، وهذا يتفادى دمج مكتبة من أجل صيغة عمرها ثلاثون سنة.
صورتي ليست مربعة. ماذا يحدث؟
تنبّهكم الأداة وتترك لكم الاختيار. فوضع الصورة كاملة يحفظ رسمكم كله ويضيف هوامش حوله: وهذا دائما تقريبا الخيار الصحيح للشعار، لأن شيئا لا يُقطع. أما إعادة القص من الوسط فتملأ المربع كله لكنها تقتطع من الحواف، وهذا يناسب الصورة الفوتوغرافية ونادرا ما يناسب شعارا.
هل تحتفظ الأيقونات بالشفافية؟
نعم، إلا اثنتين، وليس ذلك اختيارنا. فأيقونة شاشة البداية في أجهزة iPhone يضعها iOS على سواد إن كانت شفافة، والأيقونة القابلة للقص يقصّها Android على شكل النظام، وهذا يعطي أي شيء على الشفافية. لذلك تتلقى هاتان خلفية بيضاء، ويمكنكم تعطيل ذلك. أما البقية فتبقى شفافة.
أفلِتوا صورة. تنصرفون بأرشيف يحتوي ملف favicon.ico، وأيقونات التبويب، وأيقونة شاشة البداية في أجهزة iPhone، وأيقونات التطبيق القابل للتثبيت، والسطور التي تُلصق في صفحتكم بالضبط.
التحققالبرهان، خطوة خطوةالتحقق بفاحص الشبكة، مشروحا حركة حركة، مع لقطات الشاشة.
الركنركن الصورالصورة تروي أكثر مما تُظهر. هنا نراها، وننظفها، ونخففها، ونعيد قصّها، ونطمس ما لا يخص أحدا.