الصور المستجيبة الموجهة بالفن تلقائيًا؟ ها أنت ذا.

في العديد من المشاريع ، لا تمثل الصور المتجاوبة مشكلة تقنية ولكنها مصدر قلق استراتيجي . من الممكن تقنيًا تقديم صور مختلفة إلى شاشات مختلفة باستخدام srcset والأحجام و <picture> و Picturefill (أو ما شابه). ولكن يجب إنشاء كل هذه المتغيرات من الصور وتعديلها وإدخالها في منطق نظام إدارة المحتوى الحالي. وهذا ليس بالأمر السهل.

علاوة على ذلك ، يجب إنشاء ترميز الصور المتجاوبة وإضافتها إلى HTML أيضًا ، وإذا تم تشغيل متغير صورة جديد في مرحلة ما (على سبيل المثال تنسيق ملف مثل WebP أو متغير أفقي / عمودي كبير) ، ليتم تحديثه. غالبًا ما يتسبب مقدار العمل الإضافي المطلوب في حدوث مشكلات - لذلك إذا كان لديك لقطة مثالية للمنتج ، فأنت بحاجة إما إلى إنشاء متغيرات يدويًا للجوال والعمودية والمناظر الطبيعية والعروض الأكبر ، أو إنشاء مكونات إضافية وإضافات لأتمتة العملية بطريقة ما.

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

مزيد من القراءة على SmashingMag:

• صور مستجيبة بسيطة مع صور خلفية CSS
• أتمتة صورك المتجاوبة مع Mobify.js
• كيفية حل الصور التكيفية في تصميم الويب سريع الاستجابة
• صور مستجيبة في ووردبريس مع التوجيه الفني
  

لذلك يمكننا بشكل أساسي تكبير صورة معينة ، وحفظها بأسوأ جودة ممكنة في Photoshop ، والسماح للمتصفح بإجراء إعادة القياس - في المتوسط ​​، ستكون الصورة الفعلية المرسلة على الشبكة أكبر في الأبعاد ولكن حوالي 50-65٪ أصغر في حجم الملف. الآن ، هذا فرق كبير. وهي تعمل في مشاريع حقيقية.

الجانب السلبي: نقوم بإلغاء تحميل العمل على العميل وإذا اختار المستخدم حفظ الصورة ، فسيحصل على نسخة دون المستوى الأمثل منها. ولا يساعدنا أيضًا في الصور الموجهة بالفن. هذا ليس حلاً نظيفًا تمامًا نبحث عنه.

الشيطان في ... النهاية الخلفية!

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

بت "الاقتصاص" صعب ، وإذا كنت على ما يرام تمامًا مع تغيير حجم الصور بدون توجيه فني والسماح للمتصفح بتحديد الصورة التي يشعر أنها مناسبة بشكل أفضل ، فلن يكون ذلك مشكلة كبيرة - يمكنك استخدم ImageMagick أو أي أداة أخرى لتحرير الصور لإعادة القياس ، أو يمكن لمكونات CMS أن تهتم بها نيابةً عنك: على سبيل المثال Mobify.js API ، و Respive Images في WordPress core وهناك حل لـ Drupal أيضًا.

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

إذا ما هي الخيارات؟

حسنًا ، يمكننا تشغيل معالجة الدُفعات من خلال التعبئة المدركة للمحتوى في Photoshop ، أو استخدام أدوات مثل Smartcrop.js ، وهو تنفيذ بسيط إلى حد ما للمحتوى المدرك للصورة باستخدام JavaScript. من المحتمل أن نتمكن من دمج smartcrop-cli (جنبًا إلى جنب مع ImageOptim-CLI) في عمليات بناء Grunt و Gulp وصور المحاصيل أثناء الطيران. يمكنك أيضًا استخدام imgix مع الاقتصاص التلقائي لنقاط الاهتمام. إنها بالفعل بداية رائعة ، لكننا سنحتاج إلى كتابة الترميز لجميع هذه المتغيرات يدويًا.

بشرى سارة: هناك طفل جديد حول المبنى. منذ بضعة أيام فقط كتبنا عن "مُولِّد نقاط توقف الصور المستجيبة" ، وهي أداة صغيرة مفتوحة المصدر تسمح لك بحساب نقاط التوقف لصورك بشكل تفاعلي. في الأساس ، يمكنك تحميل صورة ، وستقوم الأداة باكتشاف نقاط التوقف المناسبة ، وإعادة قياس الصور وإنشاء ترميز للصور سريعة الاستجابة يمكنك بعد ذلك نسخها / لصقها في ملف HTML الخاص بك. يمكنك الذهاب إلى أبعد من ذلك وفن الصور سريعة الاستجابة تلقائيًا باستخدام واجهة برمجة التطبيقات الخاصة بالأداة.

كما يوضح Eric Portis في مقالته ، عند استخدام Cloudinary API ، يمكنك تحديد نمط crop_mode الذي يسمح لك بتقليد background-size: cover في CSS. بالإضافة إلى توفير الارتفاعات والعرض ، يمكنك أيضًا تحديد النقطة المحورية باستخدام معلمة gravity وعامل التكبير ونسب العرض إلى الارتفاع ، مما يجعل قراءة عناوين URL أسهل قليلاً. في الواقع ، تدعم واجهة برمجة التطبيقات (API) اكتشاف الوجه ، لذلك إذا كانت صورك تحتوي على وجوه بشرية ، فيمكن أتمتة التوجيه الفني مع احتمالية أعلى لقص مناسب جدًا.

إذا كنت تريد أن تكون قادرًا على تحديد النقاط المحورية للصور بشكل صريح ، فقد ترغب في النظر إلى Sizzlepig (ليس مجانيًا) ، وهي أداة معالجة مجمعة للصور في المتصفح يمكن دمجها مع Google Drive و Dropbox ، وتسمح لك بتغيير الاقتصاص وقياس كل صورة.

ملخص

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

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