Otomatik Olarak Sanat Yönlü Duyarlı Görüntüler? Hadi bakalım.

Birçok projede, duyarlı görüntüler teknik bir konu değil, stratejik bir endişedir . Farklı görüntüleri farklı ekranlara teslim etmek teknik olarak srcset ve boyutları ve <picture> elemanı ve Picturefill (veya benzeri) polyfill ile mümkündür; ancak tüm bu görüntü çeşitlerinin oluşturulması, ayarlanması ve mevcut CMS'nin mantığına göre pişirilmesi gerekiyor. Ve bu kolay değil.

Bunun da ötesinde, duyarlı görüntü işaretlemesi oluşturulmalı ve HTML'ye eklenmelidir ve bir noktada yeni bir resim varyantı devreye girerse (örneğin, WebP gibi bir dosya formatı veya büyük bir yatay/portre varyantı), işaretleme güncellenecek. Gereken ekstra iş miktarı genellikle soruna neden olur - bu nedenle, mükemmel bir ürün çekiminiz varsa, mobil ve dikey ve yatay ve daha büyük görünümler için manuel olarak varyantlar oluşturmanız veya süreci bir şekilde otomatikleştirmek için eklentiler ve uzantılar oluşturmanız gerekir.

Bazen geçici çözümler de işe yarar. Bunlardan biri, sıkıştırma seviyesinin fiziksel boyutlarından daha fazla bir fark yarattığını öne süren akıllı bir teknik olan sıkıştırılmış görüntüler. Bu nedenle, Scott Jehl'in sözleriyle, “bir web sitesinde aynı boyutta görüntülenen iki özdeş resim verildiğinde, eğer hem yüksek oranda sıkıştırılmışsa hem de boyut olarak görüntülendiğinden çok daha büyükse, biri dosya boyutunda diğerinden çok daha küçük olabilir. ”

SmashingMag'de Daha Fazla Okuma :

• CSS Arka Plan Resimleri ile Basit Duyarlı Resimler
• Mobify.js ile Duyarlı Resimlerinizi Otomatikleştirin
• Duyarlı Web Tasarımında Uyarlanabilir Görseller Nasıl Çözülür?
• Sanat Yönetimi ile WordPress'te Duyarlı Görseller
  

Temel olarak, belirli bir görüntüyü büyütebilir, Photoshop'ta mümkün olan en kötü kalitede kaydedebilir ve yeniden ölçeklendirmeyi tarayıcıya bırakabiliriz - ortalama olarak, ağa gönderilen gerçek görüntünün boyutları daha büyük, ancak yaklaşık %50-65'i daha küçük olacaktır. Dosya boyutu. Şimdi, bu oldukça fark. Ve gerçek projelerde çalışır.

Dezavantajı: işi müşteriye devrediyoruz ve kullanıcı görüntüyü kaydetmeyi seçerse, bunun oldukça düşük bir versiyonunu alacaklar. Ve sanata yönelik görüntülerde de bize yardımcı olmuyor. Bu, aradığımız pek temiz bir çözüm değil.

Şeytan Arka Uçta!

Yaygın bir senaryo, içerik yöneticilerinin görüntüleri yüklemesine, verilen her görüntü için odak noktaları tanımlamasına ve anında her görüntünün kırpılmış tüm varyantlarını oluşturmasına olanak tanıyan bir tür arka uç mantığını CMS'ye entegre etmek olacaktır.

"Kırpma" kısmı zor bir iştir ve resimleri sanat yönü olmadan yeniden boyutlandırmak ve tarayıcının en uygun olduğunu düşündüğü bir resmi seçmesine izin vermek konusunda gayet iyiyseniz, bu büyük bir güçlük olmayacaktır. yeniden ölçeklendirme için ImageMagick veya başka bir resim düzenleme aracı kullanın, yoksa CMS eklentileri sizin için halledebilir: örneğin Mobify.js API, WordPress çekirdeğinde Duyarlı Görüntüler ve Drupal için de bir çözüm var.

Bununla birlikte, sanat yönetmenliği önemliyse - örneğin çok özel ürün çekimlerini farklı türde ekranlara göndermek istiyorsanız - daha gelişmiş seçeneklere bakmanız gerekir. Dar görüntü alanı için küçültülmüş geniş bir manzara fotoğrafı özellikle yararlı olmayacaktır ve geniş bir ekranda tüm görüntü alanını dolduracak şekilde büyütülmüş dar bir görüntü de yardımcı olmayacaktır. İşte bu noktada daha iyi, daha akıllı çözümlere ihtiyacımız var.

Peki Seçenekler Nelerdir?

Photoshop'taki içeriğe duyarlı dolgu aracılığıyla toplu işleme çalıştırabilir veya JavaScript ile içeriğe duyarlı görüntü kırpmanın oldukça basit bir uygulaması olan Smartcrop.js gibi araçları kullanabiliriz. Potansiyel olarak, smartcrop-cli'yi (ImageOptim-CLI ile birlikte) Grunt ve Gulp oluşturma süreçlerimize entegre edebilir ve görüntüleri anında kırpabiliriz. imgix'i otomatik ilgi noktası kırpma özelliğiyle de kullanabilirsiniz. Bu zaten harika bir başlangıç, ancak tüm bu varyantlar için işaretlemeyi manuel olarak yazmamız gerekecek.

İyi haber: Mahallede yeni bir çocuk var. Yalnızca birkaç gün önce, görüntüleriniz için etkileşimli olarak kesme noktalarını hesaplamanıza olanak tanıyan küçük bir açık kaynaklı araç olan Duyarlı Görüntü Kesme Noktaları Oluşturucu hakkında yazmıştık. Temel olarak, bir görüntü yükleyebilirsiniz ve araç uygun kesme noktalarını algılar, görüntüleri yeniden ölçeklendirir ve ardından HTML'nize kopyalayıp/yapıştırabileceğiniz duyarlı görüntü işaretlemesi oluşturur . Aracın API'sini kullanarak daha da ileri gidebilir ve otomatik olarak doğrudan duyarlı görseller oluşturabilirsiniz.

Eric Portis'in makalesinde açıkladığı gibi, Cloudinary API kullanırken, CSS'de background-size: cover taklit etmenize izin veren bir crop_mode belirtebilirsiniz. Yükseklik ve genişlik sağlamanın yanı sıra, gravity parametresini, yakınlaştırma faktörünü ve URL'lerin okunmasını biraz daha kolaylaştırabilecek en boy oranlarını kullanarak odak noktasını belirleyebilirsiniz. Aslında, API yüz algılamayı destekler, bu nedenle resimleriniz insan yüzleri içeriyorsa, sanat yönetmenliği daha yüksek bir oldukça makul kırpma olasılığıyla otomatikleştirilebilir.

Görüntüler için odak noktalarını açıkça tanımlayabilmek istiyorsanız, Google Drive ve Dropbox ile entegre edilebilen ve kırpmayı değiştirmenize olanak tanıyan bir tarayıcı içi toplu görüntü işleme aracı olan Sizzlepig'e (ücretsiz değil) bakmak isteyebilirsiniz. ve her görüntü için ölçeklendirme.

Özet

İdeal olarak, "yeterince akıllı" kırpmalar oluşturacak ve duyarlı görüntü işaretlemesini yapıya otomatik olarak ekleyecek ya da görüntülerin odak noktasını görsel olarak ayarlamak ve "hazır" çıktı almak için bir arayüz sağlayacak bir araca sahip olmayı çok isteriz. git” işareti. Henüz tam olarak orada değiliz, ama yakında olabiliriz.

Bu arada, yukarıda listelenen araçlar, görsellerin sanata yönelik türevlerini üretme gibi oldukça göz korkutucu bir görevin üstesinden gelirken, ya manuel olarak ya da özel CMS eklentileri oluşturarak dikkate alınması gereken yeterince iyi seçenekler olabilir.