Come generare immagini casuali per testare codici, temi, widget e layout

Come generare degli URL diretti di immagini casuali di determinate dimensioni e formati da usare per testare codici, widget, temi e layout.

Nel precedente post abbiamo visto come funziona l'estensione Faststring, che tra i suoi tool ha anche quello per generare un testo casuale del tipo Lorem Ipsum. Oltre al testo casuale, per testare codici, layout di siti, Temi e Modelli può essere utile avere un generatore casuale di immagini.

Nel nostro computer non è che abbiamo immagini di tutte le dimensioni e, quelle che abbiamo, per inserirle in un codice dovremmo prima pubblicarle nel web. Questo può naturalmente essere fatto, specialmente se siamo utenti di Blogger. Le foto verranno caricate su Google Drive anche se inserite in una Bozza eliminata.

Modificando la stringa dell'URL di Blogger del tipo /s1600/, si potrà anche modificarne la larghezza. Sostituendola per esempio con /s680/ l'immagine che si otterrà sarà larga 680 pixel. Si potrà solo modificarne la larghezza ma non anche l'altezza. Poniamo il caso che, per testare un codice HTML, si abbia bisogno di un URL diretto di una immagine delle dimensioni di 424x136 pixel, che fare per ottenerla immediatamente?

Lorempixel è un servizio gratuito online che prende il nome da Lorem Ipsum, inizio del celebre testo casuale di latino sgrammaticato, e che offre URL diretti di immagini casuali da usare come test. Basterà incollare un determinato indirizzo avente come variabili le dimensioni delle immagini.

Le immagini presenti nei server del sito sono pubblicate online sotto licenza Creative Commons e quindi non sono soggette a copyright. Le foto possono avere dimensioni massime di 1920x1920 pixel.

La regola generica per avere l'URL di una immagine è la seguente

http://lorempixel.com/600/400

che mostrerà una immagine larga 600 pixel e alta 400 pixel. Si possono avere anche immagini di dimensioni non proprio standard usando per esempio l'indirizzo seguente si otterrà una immagine di dimensioni 317x208 pixel.

http://lorempixel.com/317/208

Ci sono anche delle regole specifiche per avere immagini di determinate categorie e in bianco e nero. Le immagini ottenute con questo tool non debbono essere usate nelle pagine web perché sono piuttosto lente a caricarsi e quindi potrebbero appesantire la pagina; vanno solo utilizzate per dei test.

Incollando questi indirizzi nel browser, si aprirà una scheda con una immagine casuale, che potrà essere scaricata cliccandoci sopra con il destro del mouse per poi scegliere Salva immagine con nome. Si può controllare le dimensioni della immagine direttamente nella scheda del browser con l'estensione di Chrome Size Info.

Si possono cercare gli URL diretti anche di particolari categorie di immagini tra cui abstract, animals, business, cats, city, food, nightlife, fashion, people, nature, sports, technics, transport. 

Le regole generali per gli indirizzi diretti delle immagini sono le seguenti:

1. http://lorempixel.com/400/200 per una immagini casuale di 400x200 pixel
2. http://lorempixel.com/g/400/200 per una immagine in bianco e nero di 400x200 pixel
3. http://lorempixel.com/400/200/sports per una immagine 400x200 della categoria sports
4. http://lorempixel.com/400/200/sports/1 con immagini selezionate di sports da 1 a 10
5. http://lorempixel.com/400/200/sports/Testo con immagini di sports con Testo
6. http://lorempixel.com/400/200/sports/1/Testo con immagini di sports da 1 a 10 con Testo

Con gli URL generici di Lorempixel, ad ogni refresh della pagina, cambierà l'immagine visualizzata ma utilizzando l'URL di una delle 10 immagini disponibili per ogni categoria, questa rimarrà invariata.

Si possono provare anche altre categorie non elencate come cats, dogs, ecc. Con le categorie sarà anche possibile aggiungere del testo alla immagine che non sarà più casuale ma fissa. Per esempio questo URL

http://lorempixel.com/400/300/cats/3/gatto%20soriano

mostrerà l'immagine di un gatto con la scritta gatto soriano sulla sinistra. Per inserire degli spazi nel testo, si utilizza la stringa %20 come abbiamo già visto altre volte.

Oltre alla connessione HTTP, si può usare anche quella HTTPS e usare le stesse regole precedenti con https al posto di http negli URL generici delle immagini. La connessione però non sarà protetta.

Si può usare anche il Placeholder Generator di Lorempixel.

Si impostano le dimensioni delle immagini, si sceglie la categoria quindi si clicca su Color Image o su Gray Image per una immagine in bianco e nero. L'immagine sarà mostrata in alto nella stessa pagina e potrà essere scaricata oppure se ne potrà copiare l'indirizzo per usarlo in un codice HTML.

ALTERNATIVE A LOREMPIXEL

I siti come Lorempixel si chiamano Images Placeholder Generator ovvero Generatori di Immagini Segnaposto. Oltre a Lorempixel ricordo altri due tool da usare in alternativa.

1) DUMMY IMAGE

Dummy Image è un generatore di immagini in cui si può scegliere anche il formato tra JPG, PNG e GIF

Non genera degli URL di immagini reali ma solo di banner di una determinata dimensione. Quando non ci serve un tipo particolare di foto, si può usare Dummy Image, che genera una immagine di un rettangolo colorato con determinate dimensioni e tipo di formato. Nel tool si impostano larghezza e altezza, il colore di sfondo (background) e il colore del testo (con apposita tavolozza) quindi si sceglie il formato. Verrà visualizzato il banner e anche il suo URL. Nel campo Text si può digitare un testo che sarà visualizzato nel banner al posto delle dimensioni dello stesso.

2) LOREMFLICKR

LoremFlickr utilizza le immagini senza copyright di Flickr per generare foto di dimensioni date. P.e. l'URL

https://loremflickr.com/320/240

genera una immagine larga 320 pixel e alta 240 pixel. Viene fornito anche un esempio di codice HTML

<img src="https://loremflickr.com/320/240"/>

per incollare l'immagine in una pagina web. Ci sono anche molte opzioni di personalizzazione.

1. https://loremflickr.com/320/240 immagine casuale da 320x240 pixel
2. https://loremflickr.com/320/240/dog immagine da 320x240 di un cane
3. https://loremflickr.com/g/320/240/paris immagine in bianco e nero da 320x240 pixel di Parigi. Al posto di g si può usare anche p, red, green e blue con ovvio significato
4. https://loremflickr.com/320/240/brazil,rio immagine casuale del Brasile o di Rio da 320x240 pixel
5. https://loremflickr.com/320/240/paris,girl/all genera una immagine casuale di Parigi e di una Ragazza della dimensione di 320x240 pixel
6. https://loremflickr.com/g/320/240/paris,girl/all immagine come la precedente ma in bianco e nero

LoremFlickr ha delle funzionalità davvero interessanti ma è molto lento nel mostrare le immagini. Inoltre quando si incolla nel browser l'indirizzo generico questo verrà rediretto a quello della immagine

Le immagini cambieranno quando si ricarica la pagina web in cui sono state postate ma possono essere bloccate inserendone il numero d'ordine come per esempio

https://loremflickr.com/320/240?lock=212

Il browser potrebbe memorizzare nella cache le immagini, quando si richiede lo stesso URL più volte. Per risolvere questo problema una stringa all'URL senza significato in questo modo

https://loremflickr.com/320/240?random=1

https://loremflickr.com/320/240?random=2

In conclusione questi tre tool possono essere tutti e tre delle valide soluzioni quando si ha bisogno di un indirizzo diretto di una foto di dimensioni prefissate per testare un codice, un widget o un progetto grafico.