Immagini reattive dirette automaticamente dall'art? Ecco qui.

In molti progetti, le immagini reattive non sono un problema tecnico ma una preoccupazione strategica . La distribuzione di immagini diverse su schermi diversi è tecnicamente possibile con srcset e dimensioni e l'elemento <picture> e il polyfill Picturefill (o simile); ma tutte queste varianti di immagini devono essere create, adattate e integrate nella logica del CMS esistente. E non è facile.

Inoltre, il markup delle immagini reattive deve essere generato e aggiunto anche in HTML, e se a un certo punto entra in gioco una nuova variante dell'immagine (ad esempio un formato di file come WebP o una variante orizzontale/verticale di grandi dimensioni), il markup ha da aggiornare. La quantità di lavoro extra richiesta spesso causa problemi, quindi se hai una perfetta ripresa del prodotto, devi creare manualmente varianti per dispositivi mobili e verticali e orizzontali e viste più grandi, oppure creare plug-in ed estensioni per automatizzare in qualche modo il processo.

A volte anche le soluzioni alternative funzionano bene. Uno di questi sono le immagini di compressione, una tecnica intelligente che suggerisce che il livello di compressione fa la differenza più delle sue dimensioni fisiche. Quindi, nelle parole di Scott Jehl, “date due immagini identiche che vengono visualizzate con le stesse dimensioni su un sito Web, una può essere notevolmente più piccola dell'altra in termini di dimensioni del file se è sia altamente compressa che di dimensioni notevolmente maggiori di quelle visualizzate. "

Ulteriori letture su SmashingMag:

• Immagini reattive semplici con immagini di sfondo CSS
• Automatizza le tue immagini reattive con Mobify.js
• Come risolvere le immagini adattive nel web design reattivo
• Immagini reattive in WordPress con direzione artistica
  

Quindi in pratica potremmo ingrandire una determinata immagine, salvarla con la peggiore qualità possibile in Photoshop e lasciare che il browser esegua il ridimensionamento: in media, l'immagine effettiva inviata dalla rete sarebbe di dimensioni maggiori ma di circa il 50–65% più piccola in dimensione del file. Ora, questa è una bella differenza. E funziona in progetti reali.

Lo svantaggio: scarichiamo il lavoro sul client e se l'utente sceglie di salvare l'immagine, ne otterrà una versione piuttosto non ottimale. E non ci aiuta nemmeno con le immagini art-directed. Non è proprio una soluzione pulita quella che stiamo cercando.

Il diavolo è nel... back-end!

Uno scenario comune sarebbe integrare una sorta di logica di back-end nel CMS, consentendo ai gestori di contenuti di caricare immagini, definire punti focali per ogni data immagine e generare al volo tutte quelle varianti ritagliate di ciascuna immagine.

Il "ritaglio" è un po' complicato, e se sei perfettamente d'accordo con il ridimensionamento delle immagini senza direzione artistica e consentendo al browser di selezionare un'immagine che si adatta meglio, non sarà una grande seccatura: potresti usa ImageMagick o qualsiasi altro strumento di modifica delle immagini per il ridimensionamento, oppure i plug-in CMS potrebbero occuparsene per te: ad esempio API Mobify.js, immagini reattive nel core di WordPress e c'è anche una soluzione per Drupal.

Tuttavia, se la direzione artistica è importante, ad esempio se desideri inviare scatti di prodotti molto specifici su diversi tipi di schermi, dovrai esaminare opzioni più avanzate. Una foto panoramica ampia ridimensionata per la vista stretta non sarà particolarmente utile, e nemmeno un'immagine stretta ridimensionata per riempire l'intera vista su uno schermo ampio. È qui che abbiamo bisogno di soluzioni migliori e più intelligenti.

Quindi quali sono le opzioni?

Bene, potremmo eseguire l'elaborazione in batch attraverso il riempimento sensibile al contenuto di Photoshop o utilizzare strumenti come Smartcrop.js, che è un'implementazione abbastanza semplice del ritaglio di immagini sensibile al contenuto con JavaScript. Potenzialmente potremmo anche integrare smartcrop-cli (insieme a ImageOptim-CLI) nei nostri processi di costruzione di Grunt e Gulp e ritagliare le immagini al volo. Puoi anche usare imgix con il suo ritaglio automatico del punto di interesse. È già un ottimo inizio, ma dovremmo scrivere manualmente il markup per tutte quelle varianti.

Buone notizie: c'è un nuovo ragazzo intorno all'isolato. Solo pochi giorni fa abbiamo scritto del Generatore di punti di interruzione di immagini reattive, un piccolo strumento open source che ti consente di calcolare i punti di interruzione per le tue immagini in modo interattivo. Fondamentalmente, puoi caricare un'immagine e lo strumento rileverà i punti di interruzione appropriati, ridimensionerà le immagini e genererà markup di immagini reattive che puoi quindi copiare/incollare nel tuo HTML. Puoi andare ancora oltre e creare automaticamente immagini reattive direttamente artistiche utilizzando l'API dello strumento.

Come spiega Eric Portis nel suo articolo, quando si utilizza l'API Cloudinary, è possibile specificare un crop_mode che consente di imitare background-size: cover in CSS. Oltre a fornire altezze e larghezze, puoi anche specificare il punto focale usando il parametro di gravity , il fattore di zoom e le proporzioni di fornitura, che possono rendere gli URL un po' più facili da leggere. In effetti, l'API supporta il rilevamento dei volti, quindi se le tue immagini contengono volti umani, la direzione artistica può essere automatizzata con una maggiore probabilità di un ritaglio abbastanza decente.

Se vuoi essere in grado di definire i punti focali per le immagini in modo esplicito , potresti voler esaminare Sizzlepig (non gratuito), uno strumento di elaborazione batch di immagini nel browser che può essere integrato con Google Drive e Dropbox e che ti consente di modificare il ritaglio e ridimensionamento per ogni immagine.

Sommario

Idealmente, ci piacerebbe avere uno strumento che generi ritagli "abbastanza intelligenti" e colleghi automaticamente il markup delle immagini reattive nella build, oppure fornisca un'interfaccia per regolare visivamente il punto focale delle immagini e produrre un output "pronto per l'uso". vai” markup. Non siamo ancora arrivati, ma potremmo esserlo presto.

Nel frattempo, gli strumenti sopra elencati potrebbero essere opzioni abbastanza valide da considerare quando si affronta un compito piuttosto scoraggiante di produrre varianti di immagini dirette dall'arte, manualmente o creando plug-in CMS personalizzati.