الويب هو وسيلة بصرية. الغالبية العظمى من هذا المشهد المرئي هو بفضل ملفات الصور. بينما يمكن تحقيق الكثير باستخدام CSS ، و SVG المضمنة ، فإن معظم المواقع لا تزال بحاجة إلى ملفات صور.
في المتوسط ، تمثل الصور اكثر من النصف حجم الصفحة في العام الماضي ، وزيادة حجم الصور على مدار العام ؛ كان هناك نمو 21 ٪ بحجم الصورة في عام 2014 وحده.
في الوقت نفسه ، يستمر عدد وتنوع الأجهزة التي تصل إلى الويب في النمو. القرارات تختلف الآن في أي مكان بين 72ppi (شائع بشكل متناقض) وأكثر من 600ppi.
يعد إنشاء صورة للشاشة تكون ذات جودة كافية لأي جهاز أمرًا بسيطًا: احفظه على 1000ppi واحصل عليه يوميًا. ستكون الصورة الناتجة واضحة حتى في أعلى أجهزة Hi-res. ولكن في حين أن جودة جهازك ستكون عالية ، فإن جودة ملفاتك ستكون كبيرة أيضًا. مع وقت تحميل الصفحة العامل الرئيسي في UX يتعين علينا ضمان تسليم المواقع لمستخدمينا على الفور. عندما تكون الصور عالية الجودة لدرجة أنها تستغرق اثنتي عشرة ثانية للتنزيل على اتصالات النطاق العريض ، ناهيك عن اتصالات الهاتف المحمول ، فعندئذ تكون غير قابلة للاستخدام على نحو فعال.
الهدف من الصور المتجاوبة إذن ، ليس تقديم صورة عالية الجودة للشاشات التي يمكنها عرضها (التي يمكننا القيام بها بسهولة) ، والهدف هو تقديم أعلى جودة للصورة مدعومة ولا شيء أكثر من ذلك.
تم تصميم هذا الدليل ليعلمك ما ينجح ، حيث لا تزال المشكلات والمزالق قائمة ، وكيف يمكنك استخدام الصور المتجاوبة في مواقع الويب ، اليوم.
أشعر بالحاجة ، والحاجة إلى السرعة
لماذا السرعة مهمة؟ بالتأكيد لا أحد على اتصال 3G بعد الآن؟ لا أحد يستخدم الاتصال الهاتفي. إذا كانت الديموغرافية المستهدفة لعميلك تسكن في مانهاتن ، فلماذا يجب أن تهتم بمنطقة ليسوتو الريفية؟ والحقيقة هي أنه من الأساطير أننا جميعًا نملك خدمة برودباند فائق السرعة ، نبيعها لنا شركات تستفيد من الرغبة في الحصول على سرعات متزايدة.
معظم الناس يقضون ساعتين على الأقل كل يوم على اتصال أدنى. غالباً ما أجد نفسي مع معظم الوقت للتصفح عند التنقل ، حتى عندما يكون اتصال 3G الموثوق به يبدو وكأنه حلم بعيد.
في أبريل أعلنت جوجل أنه سيتم استخدام التوافق مع الجوّال كعامل ترتيب لعمليات البحث التي يتم إجراؤها على الأجهزة التي تعتبرها "جوّال". حتى قبل ذلك ، كانت السرعة عامل في تصنيف الصفحة - سواء بشكل صريح كجزء من حسابات Google ، أو ضمنيًا كعامل مساهم في معدل الارتداد.
في موقعين متماثلين ، يمكن أن يسقطك 1 كيلوبايت إضافي من النقطة الثالثة على Google ، إلى الرابع أو الخامس. يمكن أن ينزل إليك من العاشرة إلى الحادية عشرة - وبعبارة أخرى من الصفحة 1 إلى الصفحة 2 - مع كل التأثير المرتبط على إيرادات العميل.
هل حقا بحاجة لهذه الصورة؟
الصورة المحسنة للغاية ، لا توجد صورة على الإطلاق. إذا كان لديك خمس صور على موقعك وقمت بإسقاط واحد منها ، فقد قمت بحفظ نفسك بنسبة 20٪ ، وربما الأهم من ذلك ، أنك قمت بحفظ نفسك طلب http. إذا أسقطنا جميع الصور من مواقعنا ، فقد وفرنا أنفسنا 100٪ ، وجميع طلبات http الخمسة. فلماذا لا تفعل ذلك؟
لا نقوم بإسقاط الصور من مواقعنا لأنها تتواصل بشكل أكثر فعالية من النص على المدى القصير. فهي تنشئ اتصالًا عاطفيًا يجذب المستخدمين إلى المحتوى.
نحن نعرف ذلك لا يقرأ المستخدمون صفحات الويب . عدد قليل جدًا من الأشخاص يقرأون محتوى مفصلاً عبر الإنترنت. تتيح لنا الصور التواصل مع علامة تجارية والاتصال بها وتعزيزها في جزء من الوقت الذي يمكن أن يديره هذا النص.
قد تكون الصور كبيرة الحجم وغير عملية التنزيل ، ولكن بمجرد تقديمها في المتصفح فهي أكثر كفاءة بكثير من النص لإنشاء مشاركة المستخدم وتعزيز رسالة العلامة التجارية.
تساعدنا الصور المتجاوبة في ضمان عدم فقد بنية صور الاتصال العاطفي عندما يضغط المستخدم غير المستقر على زر الرجوع.
ماذا عن SVG؟
SVG (Scaleable Vector Graphics) هي واحدة من التقنيات الرائدة الحقيقية للويب. إنه حتى الآن متقدم على المنحنى الذي ما زال معظم المصممين لم يعترفوا بإمكانياته الحقيقية.
SVG - كما يوحي الاسم - يعتمد على المتجه. هذا يعني أن رسومات SVG مبنية من النقاط والزوايا والمسافات. كما أن SVG - كما يوحي الاسم - قابل للترقية ، مما يعني أنها ستعرض بشكل جيد على جهاز iMac بقدرة 5 كيلوبايت أو هاتف ذكي يعمل بنظام Android ، دون أي خسارة في الجودة أو أي تغيير في حجم الملف.
إذا كان لديك رسم بياني مسطح ، أي رمز ، أو شعار ، أو أي شيء يمكن عرضه على هيئة SVG ، فإن SVG هي الطريقة المثلى.
معظم الصور على الويب هي صور نقطية. بشكل عام ، الطريقة التي تعمل بها الصورة النقطية هي وصف كل بكسل في كل مرة ، ولونها (في RGB - الأحمر ، والأخضر ، والقيم الزرقاء) وفي بعض الحالات الشفافية. إذا كانت لديك صورة بحجم 100 بكسل × 100 بكسل ، فستكون لديك صورة بها 10000 بكسل ؛ إذا كان لكل بكسل 4 قيم لوصفها ، فستتضمن الصورة 40000 وحدة من البيانات المرتبطة بها. يبدو وكأنه الكثير أليس كذلك؟ في بعض الأحيان ، هذا أقل من رسم متجه.
ضع في اعتبارك صورة 1 بكسل × 1 بكسل ؛ التي تتطلب 4 بتات من البيانات لتسجيلها كصورة نقطية (أحمر ، أخضر ، أزرق وقيم ألفا). الآن ضع في اعتبارك نفس مربع البيكسل المسجل كمتجه ؛ التي تتطلب x ، y ، عرض ، وارتفاع المستطيل ، بالإضافة إلى قيم RGBA.
هذه أمثلة خفية ، لكنها دقيقة. في كثير من الأحيان ، يتجاوز إصدار متجه لصورة - حتى إذا كان لدينا واحد متاح لنا - حجم ملف الصورة النقطية المكافئة ، ثم تكون الصورة النقطية هي الخيار الوحيد المعقول.
(Mis) باستخدام JavaScript
مثل معظم المشاكل في الحياة (إذا كانت حياتك على الإنترنت) يمكن حل الصور المتجاوبة عن طريق JavaScript. في الواقع لعدد من السنوات كان JavaScript هو الطريقة الوحيدة لحل المشكلة. بإمكان جافا سكريبت اختبار قدرات وكيل المستخدم ، وتحديد نوع المتصفح ، وكتابة علامة صورة HTML قياسية ، تحتوي على الصورة المناسبة.
مصممي الويب الذين يعترضون على استخدام جافا سكريبت عادة ما يفعلون ذلك بعض الناس يوقفونه . ومع ذلك ، لم يعد الأمر كذلك ، خاصةً على ويب الجوال ، ولكن هناك بعض المشكلات المستمرة: إن كتابة صورة باستخدام جافا سكريبت تعني أن الصورة لن يتم تحليلها بواسطة برامج تتبع محركات البحث ، وسيتم عرضها فقط بعد النص البرمجي كما المدى ، على سبيل المثال.
تتمثل المشكلة الأكبر في استخدام جافا سكريبت في أنها إساءة استخدام لغرض جافا سكريبت الأساسي. يحتفظ HTML بالبيانات ، وعرض مقابض CSS ، ووظائف مقابض JavaScript. عندما ننفصل عن هذه الأدوار المنظمة ، نبدأ في مواجهة مشكلات تتطلب من الخارقة إصلاحها. الصور هي بيانات ، وينبغي بالتالي التعامل معها بتنسيق HTML.
عناء مع المتصفحات
منذ أن تم التفكير لأول مرة في RWD ، كانت الصور أكبر حجر عثرة. لكن الآن ، بدأنا في إيجاد طرق لحل المشاكل المختلفة. تقنيات متينة ومفعمة بالنجاح بحيث تعتبر أفضل الممارسات. لقد تخلى المطورون المتخصصون عن وقتهم للضغط على WC3 للحصول على حلول رسمية ، والآن ، ولأول مرة ، تكون الصور المتجاوبة عملية.
مفتاح الصور المتجاوبة ، هو أنها قد تم تصميمها مع إدراك كامل لأوجه فشل الويب. وقد تم الحرص على التأكد من أن حلول الصور المتجاوبة لا تؤدي إلى كسر المتصفحات الحالية ، بحيث أنه حتى في المتصفحات التي لا تدعم الصور المتجاوبة ، ستفشل الشفرة في صمت ودون استجابة ، وسيتم عرض الصور الافتراضية.
في هذه المقالة سنبحث عن عنصرين HTML متجاوبينللصورة الرسمية: srcsetوالصورة.
في الوقت الحالي ، تدعم Edge و Safari و iOS Safari مجموعة فرعية فقط من مواصفات srcset . فايرفوكس ، و Chrome ، و Opera ، و Android Browser ، والإصدارات القادمة من Safari و iOS Safari تدعمه تمامًا. (سنناقش الاختلافات أدناه.)
في الوقت الحالي ، يتم دعم عنصر الصورة بالكامل بواسطة Firefox و Chrome و Opera و Android Browser. لا تدعم Edge و Safari و iOS Safari ذلك ، ولم يعلنوا عن جدول زمني لتطبيقه.
حتى بين المتصفحات التي تدعم الكود الجديد ، هناك تناقضات حيث يفسر مصنعو المستعرضات المختلفة مواصفات W3C بطرق مختلفة. على سبيل المثال ، عند تحديد تغيير الصورة من صغير إلى كبير استنادًا إلى حجم إطار العرض ، ستتحول بعض المتصفحات إلى الصورة الكبيرة عندما يكون حجم إطار العرض أكبر بمقدار 1 بكسل من الحجم المفضل للصورة الصغيرة ، بينما يتحول الآخرون إلى الصورة الكبيرة فقط عندما يكون إطار العرض يفضلها بالكامل من قبل صورة كبيرة.
باختصار ، يتم تقسيم المتصفحات إلى اثنين من المعسكرات: تلك التي تفضل الصور عالية الجودة قدر الإمكان ، وتلك التي تفضل التنزيلات أصغر قدر الإمكان. لا يزال مصنعو المستعرض يتابعون هذا الأمر ، وفي النهاية سيثبت تنفيذ شخص ما أنه الأكثر شعبية - وأنا شخصياً آمل أن يكون هذا الأخير ، لأنه كما لوحظ أعلاه ، فإن الأداء مهم للغاية لتجربة المستخدم.
أما الآن ، فإن أفضل خيار لمصممي الويب هو الالتزام بالمواصفات وعدم محاولة تخمين المتصفح. بعد كل شيء ، فإن التجربة الافتراضية في المتصفح (جودة أعلى ، أو تنزيلات أسرع) هي جزء مما يحدده المستخدم لمستعرض افتراضي ، لذلك إذا كان المستخدم على دراية بنهج مختلفة ، فحينئذٍ يكون تفضيل المتصفح هو تفضيل المستخدم أيضًا. .
أفضل ممارسات الصور سريعة الاستجابة (2015)
على مدار تاريخ الويب ، استخدمنا عنصرًا واحدًا للإشارة إلى صورة ، عنصر img . في HTML5 ، خضع عنصر img تحولًا دقيقًا في دوره ، تم تصميمه لتمكين الصور المتجاوبة: لم يعد عنصر img يمثل صورة ، إنه الآن عنصر نائب لصورة.
هذا التمييز مهم ، لأنه في حين أن عنصر img سابقًا كان يحمل مجموعة واحدة من بيانات الصورة - سواء كانت تلك الصورة النقطية أو المتجهية - الآن يمكن للصورة أن تعقد مجموعات متعددة من البيانات.
يبدو عنصر img (للتلخيص لأي من غير المبرمجين) كما يلي:
يبدو إصدار الصورة المتجاوب لعنصر img كالتالي:
بالكاد أي تغيير على الإطلاق. بالنظر إلى هذا الرمز ، تلاحظ شيئًا مهمًا واحدًا: الرمز متوافق مع الإصدارات السابقة. إذا حدث مستعرض على طول ذلك لا يفهم سمة srcset ، فسوف يتجاهله ببساطة ويعرض الصورة وفقًا لمواصفات 1993 الأصلية.
ما يعنيه هذا ، هو أنه يمكننا الآن استخدام الصور المتجاوبة في ترميزنا ، دون الحاجة إلى اكتشاف الميزات.
في عنصر img المتجاوب الجديد ، يتم استخدام src بشكل أساسي كصورة افتراضية وللمتصفحات التي لا تتعرف على srcset ، بينما تحتوي srcset على جميع صور التنسيق عالية الدقة لهذا العنصر النائب.
عند عرض عنصر img ، سيحدد المتصفح نفسه أي ملف صورة هو الأنسب.
باستخدام srcset
الآن بعد أن علمنا أن srcset ستفشل بصمت في المتصفحات التي لا تدعمها ، سنتمكن من إضافة صورة إضافية:
في هذه الحالة ، سيعرض أي متصفح يدعم srcsetimage-b.jpg وأي متصفح لا يدعم srcset سيعرض image-a.jpg.
من المهم ملاحظة أن المتصفح سيقوم فقط بتنزيل الصورة التي يقرر عرضها ، ولا يقوم بتنزيل الصورتين ثم اختيار صورة واحدة.
للأسف هذا لا يجعلنا بعيداً جداً ، لأنه ما لم نعرض دعم srcset ، فليس هناك تطبيق عملي لتحويل الصور استنادًا إلى دعم srcset وحده.
الحل هو توفير معلومات إضافية للمتصفح عن الصورة التي يجب أن تختارها. من أجل القيام بذلك ، نحتاج إلى توفير معلومات حول المساحة المتاحة ، أو كثافة البكسل.
باستخدام إكس واصف
يخبر X-واصف المتصفح كيف كثافة وحدات البكسل في الصورة.
على سبيل المثال ، إذا كنت تريد توفير صورة درجة شبكية العين مع مضاعفة عدد البكسلات كصورة قياسية ، فعليك تحديد صورة شبكية العين في srcset ، متبوعة بمسافة ، ثم الكلمة الأساسية "2x".
لدينا صورتنا:
لإضافة خيار شبكية العين للمتصفح ، نضيف srcset التالية:
في هذه الحالة ، هناك ثلاث نتائج محتملة:
إذا كان المستعرض لا يدعم srcset فسوف يستخدم ملف الصورة المحدد في سمة src ؛
إذا كان المستعرض يدعم srcset ، ويحتوي على شاشة قادرة على حل مزدوج ، فسيستخدم الصورة المحددة في سمة srcset ؛
إذا كان المستعرض يدعم srcset ولكن ليس به شاشة عالية الدقة ، فسيستخدم الصورة المحددة في السمة src (عندما لا يتم تحديد صورة "1x" في السمة srcset ، يفترض أن السمة src هي تلك الصورة اختيار).
دعم المتصفح جيد ، ويتحسن بسرعة. مع سمة واحدة قمنا بحل لغز الصور المتجاوبة ، ياي لنا!
آخر شيء يجب ملاحظته حول x-descriptor: اختيار الصورة التي يتم تحميلها يعتمد على كثافة البكسل ، لذلك إذا قام المستخدم بتكبير متصفحه إلى 200٪ (تقليل حجم الصورة إلى النصف فعليًا ، وبالتالي مضاعفة كثافة البكسل) سيتم تحميل الصورة. يمكن أن يكون لذلك تأثير ضار على إمكانية الوصول - فنحن لا نريد بالتأكيد مشاهدة المواقع التي يتم تحميلها بشكل أبطأ للمعاقين بصريا ، وذلك ببساطة لأنهم يختارون تكبير المتصفح الخاص بهم.
باستخدام w-descriptor
واصف w هو أكثر تقدما من X-Descriptor. يعمل واصف w عن طريق إخبار المستعرض عن عدد البكسلات الفعلية الموجودة على المحور x (العرض) لخيار صورة معين.
لا تدعم Edge و Safari و iOS Safari w-Descriptor في وقت كتابة هذا التقرير ، لذلك يتم تقليل فائدته إلى حد ما.
دعنا نعود إلى صورتنا الأصلية:
إذا كانت هذه الصورة على نطاق 1600 بكسل تقريبًا وإذا أردنا إضافة صورة شبكية ، كما فعلنا مع x-descriptor أعلاه ، فسنحدد صورة في السمة srcset التي يبلغ عرضها 3200 بكسل:
يوجد مسكوكة رئيسية واحدة مع واصف w: على الرغم من أن السمة src تعامل كإعداد افتراضي عند تحديد الصور باستخدام x-descriptor ، إلا أنه يتم تجاهلها تمامًا بواسطة المتصفحات التي تدعم srcset إذا كنت تستخدم واصف w. عند استخدام واصف w يجب علينا تحديد الافتراضي بشكل صريح عن طريق إضافة خيار صورة ثانية srcset ، مع واصف w الخاص به ، وفصلها بفاصلة:
الأمر الذي يقودنا إلى ...
باستخدام صور متعددة
أن تكون قادراً على تحديد خيار صورة عالية الدقة للمتصفح مباشرة في كود HTML الخاص بنا هو أمر رائع ، ولكن كما تعلمون ، يصبح أكثر برودة عندما نحدد صور متعددة.
الهدف من الصور المتجاوبة هو تقديم أفضل جودة للصورة يمكن استخدامها بواسطة جهاز الوصول ، ولكن ليس أكثر. لذا ، ببساطة ، لا يكفي توفير صورة شبكية العين ، نحتاج إلى توفير الصور على سبيل المثال ، 1x ، 1.5x ، 2x ، 2.5x ، 3x.
مرة أخرى ، إليك الترميز الأصلي للصورة:
هنا هو مع صورة درجة شبكية العين المقدمة كخيار للمتصفح:
هنا ، هذه المرة مع خيارات إضافية في srcset ، مفصولة بفواصل:
نظرًا لأن الكلمات الرئيسية تعني أشياء مختلفة لأشخاص مختلفين ، أجد أنه من المستحسن تسمية صوري وفقًا لـ x-descriptor الذي ينتمون إليه ، كمساعدات ذاكرة شخصية ، ولضمان أن الأحجام المختلفة واضحة لأعضاء الفريق الآخرين:
تذكر أننا لا نطلع المتصفح على الصورة التي يتم عرضها ، فنحن نسمح لها بمعرفة الخيارات المتاحة لها ، والسماح لها بالاختيار لنفسها. سوف يقوم المتصفح بتنزيل أحد هذه الصور فقط.
حشوة واحدة مع صور متعددة: لا تحدّد أيًا من الصورتين في السمة srcset مع وصف x-descriptor ووصفw ، على سبيل المثال:
تعتبر سمة الأحجام إضافة مميزة للغاية للمواصفات ، لأن سمة الأحجام تأخذ قيمها بالنسبة إلى منفذ العرض ، وليس الصورة.
باستخدام قيمة vw (عرض إطار العرض) ، نحدد منطقة الصورة المتعلقة بعرض المستعرض - تذكر ، إن عنصر img الآن هو بالفعل عنصر نائب ، لذلك نحن لا نحدّد الحجم الفعلي للصورة ، نحن نحدد حجم العنصر النائب الذي سيحتوي على الصورة.
100vw هي 100٪ من عرض إطار العرض ، و 50 vw هي 50٪ من عرض إطار العرض ، و 25 vw 25٪ من عرض إطار العرض ، إلخ.
إذا أردنا تعيين عرض img إلى نصف عرض المتصفح ، فسنستخدم:
هذا ليس مفيدًا بشكل خاص ، حتى نقوم بدمجه مع استعلامات الوسائط ...
استخدام استعلامات الوسائط
تصبح سمة الأحجام أكثر قوة عندما ندمجها مع استعلامات الوسائط. يمكننا فصل عروض عرض إطار متعددة باستخدام الفواصل ، وإخبار المتصفح الذي يستخدمه باستخدام استعلام وسائط نمط CSS.
على سبيل المثال ، تخيل أننا نريد أن تمثل الصورة 80٪ من عرض إطار العرض على معظم الأجهزة ، ولكن على الأجهزة الصغيرة (مثل الهواتف) بعرض 380 بكسل أو أقل ، نريد تحقيق أقصى استفادة من المساحة المتاحة بنسبة 100٪ من العرض ، سنكتب ذلك على النحو التالي:
باتباع هذا المنطق ، سيعمل أي متصفح يحتوي على إطار عرض 380 بكسل أو أقل على تعيين عرض الصورة على 100٪ من منفذ العرض. سيؤدي أي متصفح آخر إلى إرجاع استعلام الوسائط false وسيتحرك المستعرض إلى القيمة التالية لسمة الأحجام ، والتي تكون 80vw في هذه الحالة.
كقاعدة عامة ، أنا غير مرتاح باستخدام استعلامات الوسائط في HTML. مثلما تنتمي بيانات الصورة المتجاوبة إلى HTML (ليس JavaScript) ، تنتمي استعلامات الوسائط إلى CSS (وليس HTML). ومع ذلك ، فإن الخيار متاح لك إذا كنت بحاجة إليه.
أفضل صورة مستجيبة متجاوبة (2016؟)
أنا لا أعرف عنك ، ولكن أنا متحمس جدا من احتمالات srcset. إنه حل بسيط لمشكلة صعبة ، ويبدو أنه يقدم كل ما نحتاجه.
ولكن ، مثل الحافلات ، تنتظر 20 عامًا للحصول على حل رسمي للصور سريعة الاستجابة ، ثم تنتقل إلى اثنين في وقت واحد. بالإضافة إلى سمة srcset لعنصر img ، لدينا أيضًا عنصر الصورة .
عنصر الصورة هو عنصر نائب آخر ، وإن كان أكثر تقليدية. تم تصميمه ليحاكي عناصر الفيديووالصوت في HTML5 ، لذلك سيكون تركيبه مألوفًا لمعظم. عنصر الصورة هو لاستخدامه عندما تحتاج إلى مزيد من التحكم مما توفره srcset .
للأسف ، فإن عنصر الصورة لديه دعم متصفح أقل بكثير من srcset ولا يفشل دائمًا بصمت.
باستخدام عنصر الصورة
هذا هو عنصر الصورة الأصلية لدينا:
هنا تتداخل صورة لدينا داخل عنصر صورة:
يمكننا أيضًا تحديد srcset لعنصر img داخل عنصر صورة :
باستخدام عنصر المصدر
لا يظهر عنصر الصورة في الحياة حتى نضيف عنصر المصدر :
عند تحديد الملف الذي سيتم استخدامه ، يبدأ المتصفح بعنصر المصدر الأول ، وينتقل عبر العناصر إلى أن يعثر على إحدى سمات وسائطه التي يتم حلها إلى true ، ثم ستستخدم srcset عنصر المصدر هذا .
على سبيل المثال ، يمكننا تحديد صور مختلفة للتنسيقات الرأسية والأفقي:
يمكننا أيضًا تحديد صور متعددة باستخدام x-descriptor و w-descriptor:
كما هو الحال مع استخدام استعلامات الوسائط في سمة الأحجام ، أود أن أشكك في حكمة التحكم في إصدارات الصور استنادًا إلى النمط ، في الترميز بدلاً من ورقة الأنماط. ومع ذلك ، يوجد خيار استخدام سمة الوسائط إذا كنت بحاجة إليه.
باستخدام نوع
عنصر الصورة حقا يأتي في حد ذاته عندما تستخدم لمبادلة أنواع مختلفة من الصور.
تخيل أن لدينا ملف PNG قياسيًا ، لكننا نريد استخدام ملف PNG ملف WebP ، وهي أصغر بنسبة 26٪ عادةً - تذكر أن الصور المتجاوبة تدور حول تقديم أفضل جودة للصور ، في أصغر حجم - ولكنها لا تدعم حاليًا سوى Chrome وأوبرا ومتصفح Android. سنحتاج إلى استخدام السمة type لتحديد ما إذا كان WebP مدعومًا:
في هذه الحالة ، سيتحقق المتصفح مما إذا كان تنسيق صورة WebP مدعومًا أم لا. إذا كان الأمر كذلك ، فسيحدد ما إذا كانت الشاشة تحتوي على كثافة بيكسل كافية لعرض صورة retina-image.webp ، وإلا فستعرض صورة image.webp . إذا لم يكن WebP مدعومًا ، فسيقوم المتصفح بالانتقال مباشرةً إلى عنصر img والعمل من خلال خيارات srcset و src بالطريقة التي نعرفها بالفعل.
وتعني السمة type أنه يمكننا توفير تنسيقات صور أصغر بكثير عند دعمها ، مما يؤدي إلى حجم ملف أصغر.
مشاكل معروفة
IE9 لديه مشكلة معروفة ، يمنع عنصر الصورة من الفشل بصمت. لكي تتمكن من التعامل مع IE9 ، عليك خداع IE9 بحيث تعتقد أن عناصر المصدر جزء من عنصر الفيديو :
< !—[if IE 9]>< ![endif]—>
إنه حل قبيح ، ولكنه أفضل من عدم وجود حل على الإطلاق. لا يسعنا إلا أن نأمل في أن يسرع إصدار Windows 10 من زوال IE9 ، لأنه في حين أن Edge لا يدعم عنصر الصورة بعد ، فإنه لا يدعمها بالطريقة الصحيحة (بتجاهلها).
هناك polyfills يمكن أن تساعدك على دعم عنصر الصورة على IE ، ولكن أفضلي هو تجنبها. لا أثق في مشاكل الترقيع مع جافا سكريبت ، فهو يؤثر على الأداء ويؤدي إلى تعليمات برمجية أقل صيانًا.
لهذا السبب ، أوصي بتجنب عنصر الصورة في الوقت الحالي. ما لم تكن تشغل موقعًا للتجارة الإلكترونية على نطاق واسع ، فإن الادخار الإضافي في وقت التنزيل الذي يقدمه تنسيق WebP ليس من المرجح أن يفوق إزعاج تصحيح الترميز مع النص البرمجي.
بمجرد انخفاض IE9 إلى أقل من 1٪ ، وهو ما سيحدث في مرحلة ما من السنة التالية ، سيصبح عنصر الصورة قابلاً للتطبيق. إذا كنت تقرأ هذا في عام 2016 ، فأنت على الأرجح على ما يرام.
خلق صور تستجيب
على عكس SVG ، لا ترتفع الصور النقطية. تتمثل استراتيجيتنا للتعامل معها ، سواء كنت تستخدم srcset أو عنصر الصورة ، في توفير صورة مختلفة استنادًا إلى إمكانيات المتصفح. من أجل معالجة ذلك ، نحتاج إلى توفير مجموعة متنوعة من أحجام الصور المختلفة.
معظم تطبيقات تحرير الصور قد أتمت عملية تصدير إصدارات متعددة من صورة واحدة. لا يهم أي تطبيق تستخدمه ، بشرط أن ينتهي بك الأمر مع أحجام صور متعددة دون الحاجة إلى تغيير حجم كل واحد يدويًا وحفظه.
أدوبي فوتوشوب هو محرر الصور الواقعية. إنه ليس خيارًا رائعًا للعمل التصميمي ، ولكن سير العمل في معالجة الصور يكون سلسًا وموثوقًا به. يعد إنشاء دقة صور متعددة في Photoshop بسيطًا نسبيًا:
افتح الصورة التي تريد توليد إصدارات متعددة منها ، وضعها في طبقة خاصة بها.
إعادة تسمية الطبقة كاسم الملف الذي تريد إنشاؤه (بما في ذلك الامتداد).
حدد File> Generate> Image Assets وسيتم حفظ مجلد مع صورتك الجديدة إلى جانب PSD الخاص بك.
قم بإعادة تسمية الطبقة ، مع تحديد كل صورة ترغب في إنشائها مسبوقة بالمقياس المقصود. لا تحتاج إلى تكرار الخطوة 3 ، بمجرد إعادة تسمية الطبقة سيتم إنشاء الصور تلقائيًا.
الائتمان للصورة يذهب إلىفيليب كوليير.
لمزيد من المعلومات حول توليد الصور في Photoshop ، انظر هنا.
استنادًا إلى هذه الصور ، يمكننا أن نقدم للمتصفح خمسة خيارات مختلفة:
استنتاج
لقد حان عنصر img شوطا طويلا في 20 عاما. أو ، لتكون أكثر دقة ، كان عنصر img غير مناسب لمدة 18 عامًا ، ثم انتقل للخط في العامين الماضيين ، لدرجة أنه أصبح الآن متطوراً نسبياً.
الشيء المهم ، هو أننا وصلنا إلى الحل (الحلول).
من الخيارين المتاحين ، srcsetوالصورة ، الأول هو الأكثر دعمًا بكثير. إذا كنت تقوم ببناء 95٪ من المواقع هناك ، فإن الدعم المتفوق والتنفيذ الأبسط لسمة srcset هو أفضل خيار لك.
إذا كنت تدير موقعًا كبيرًا للتجارة الإلكترونية ، مع الآلاف من صور المنتجات ، فقد يكون العمل الإضافي لخدمة تنسيق WebP جديرًا بالاهتمام ، خاصة مع زيادة دعم عنصر الصورة خلال العامين المقبلين.
أكبر نقطة ضعف في الخيارات الحالية هي أن المتصفحات لا تملك حاليًا طريقة لتحديد صورة استنادًا إلى سرعة الاتصال الخاصة بها. نحن مضطرون لأن نثق بأن الأجهزة الأكثر قدرة هي أيضاً على اتصالات متفوقة.
في نهاية المطاف ، يمكننا أخيرًا تقديم صور بأعلى جودة ممكنة عمليًا ، بأصغر حجم. وهذا يعني تجربة أفضل ، في وقت أقصر ، والتي لا يمكن إلا أن تكون شيئا لاحتضان.
استخدام الصورة المميزة ،صورة جبليةوصورة الجهازعبر Shutterstock.
