Imagini responsive direcționate automat de artă? Poftim.

În multe proiecte, imaginile receptive nu reprezintă o problemă tehnică, ci o preocupare strategică . Livrarea diferitelor imagini pe diferite ecrane este posibilă din punct de vedere tehnic cu srcset și dimensiuni și elementul <picture> și Picturefill (sau un polyfill similar); dar toate acele variante de imagini trebuie create, ajustate și integrate în logica CMS-ului existent. Și asta nu este ușor.

În plus, trebuie să se genereze și să se adauge și în HTML o nouă variantă de imagine (de exemplu, un format de fișier precum WebP sau o variantă mare peisaj/portret), marcajul are a fi tinut la curent. Cantitatea de muncă suplimentară necesară provoacă adesea probleme - așa că, dacă aveți o fotografie perfectă a produsului, trebuie fie să creați manual variante pentru mobil și portret și peisaj și vederi mai mari, fie să creați pluginuri și extensii pentru a automatiza cumva procesul.

Uneori și soluțiile de soluționare funcționează bine. Una dintre ele este imaginile compresive, o tehnică inteligentă care sugerează că nivelul de compresie face mai multă diferență decât dimensiunile sale fizice. Deci, în cuvintele lui Scott Jehl, „avand în vedere două imagini identice care sunt afișate la aceeași dimensiune pe un site web, una poate fi dramatic mai mică decât cealaltă în dimensiunea fișierului dacă este atât foarte comprimată, cât și dramatic mai mare în dimensiuni decât este afișată. ”

Citiți suplimentare despre SmashingMag:

• Imagini simple receptive cu imagini de fundal CSS
• Automatizați-vă imaginile receptive cu Mobify.js
• Cum să rezolvi imaginile adaptive în designul web responsiv
• Imagini receptive în WordPress cu direcție artistică
  

Deci, practic, am putea mări o anumită imagine, să o salvăm la cea mai proastă calitate posibilă în Photoshop și să lăsăm browserul să facă redimensionarea - în medie, imaginea reală trimisă în rețea ar fi mai mare ca dimensiuni, dar cu aproximativ 50-65% mai mică în mărime fișier. Acum, asta este o diferență destul de mare. Și funcționează în proiecte reale.

Dezavantajul: descarcăm munca către client și dacă utilizatorul alege să salveze imaginea, va primi o versiune destul de suboptimă a acesteia. Și nu ne ajută nici cu imaginile art-directed. Aceasta nu este o soluție curată pe care o căutăm.

Diavolul este în... back-end!

Un scenariu comun ar fi integrarea unui fel de logică de back-end în CMS, permițând managerilor de conținut să încarce imagini, să definească puncte focale pentru fiecare imagine dată și să genereze toate acele variante decupate ale fiecărei imagini din mers.

Bitul de „decupare” este unul complicat și dacă ești perfect în regulă să redimensionezi imaginile fără direcția artistică și să permiti browserului să selecteze o imagine care consideră că s-ar potrivi cel mai bine, nu va fi o mare bătaie de cap - ai putea utilizați ImageMagick sau orice alt instrument de editare a imaginilor pentru redimensionare, sau pluginurile CMS s-ar putea ocupa de asta pentru dvs.: de exemplu, API-ul Mobify.js, Imagini receptive în nucleul WordPress și există și o soluție pentru Drupal.

Cu toate acestea, dacă direcția artistică contează - de exemplu, dacă doriți să trimiteți fotografii cu produse foarte specifice pe diferite tipuri de ecrane - va trebui să căutați opțiuni mai avansate. O fotografie amplă de peisaj redusă pentru fereastra de vizualizare îngustă nu va fi deosebit de utilă și nici o imagine îngustă mărită pentru a umple întreaga zonă de vizualizare pe un ecran lat. Acolo avem nevoie de soluții mai bune și mai inteligente.

Deci, care sunt opțiunile?

Ei bine, am putea rula procesarea loturilor prin completarea conștientă de conținut în Photoshop sau să folosim instrumente precum Smartcrop.js, care este o implementare destul de simplă a decupării imaginilor conștient de conținut cu JavaScript. Potențial, am putea chiar să integrăm smartcrop-cli (împreună cu ImageOptim-CLI) în procesele noastre de construire Grunt și Gulp și să decupăm imaginile din mers. De asemenea, puteți utiliza imgix cu decuparea automată a punctelor de interes. Acesta este deja un început excelent, dar ar trebui să scriem manual markup pentru toate acele variante.

Vești bune: există un copil nou în jurul blocului. Cu doar câteva zile în urmă am scris despre Responsive Image Breakpoints Generator, un mic instrument open source care vă permite să calculați punctele de întrerupere pentru imaginile dvs. în mod interactiv. Practic, puteți încărca o imagine, iar instrumentul va detecta punctele de întrerupere adecvate, va redimensiona imaginile și va genera un marcaj de imagini receptive pe care apoi le puteți copia/lipi în HTML. Puteți merge și mai departe și puteți crea automat imagini cu răspuns direct folosind API-ul instrumentului.

După cum explică Eric Portis în articolul său, atunci când utilizați Cloudinary API, puteți specifica un crop_mode care vă permite să imitați background-size: cover în CSS. În plus față de furnizarea de înălțimi și lățimi, puteți specifica și punctul focal utilizând parametrul gravity , factorul de mărire și raporturile de aspect ale furnizării, ceea ce poate face URL-urile puțin mai ușor de citit. De fapt, API-ul acceptă detectarea feței, așa că dacă imaginile dvs. conțin fețe umane, direcția artistică poate fi automatizată cu o probabilitate mai mare de decupare destul de decentă.

Dacă doriți să puteți defini punctele focale pentru imagini în mod explicit , vă recomandăm să căutați Sizzlepig (nu este gratuit), un instrument de procesare a loturilor de imagini în browser care poate fi integrat cu Google Drive și Dropbox și vă permite să schimbați decuparea și scalare pentru fiecare imagine.

rezumat

În mod ideal, ne-ar plăcea să avem un singur instrument care fie să genereze decupări „destul de inteligente” și să introducă automat marcajul imaginilor receptive în construcție, fie să ofere o singură interfață pentru a regla vizual punctul focal al imaginilor și a scoate „gata de a- markup”. Nu suntem încă acolo, dar s-ar putea să ajungem în curând.

Între timp, instrumentele enumerate mai sus ar putea fi opțiuni suficient de bune pentru a fi luate în considerare atunci când abordați o sarcină destul de descurajantă de a produce variante de imagini orientate către artă - fie manual, fie prin construirea de plugin-uri CMS personalizate.