crop_original Generatore di Immagini Segnaposto star

Perché Designer e Sviluppatori Usano le Immagini Segnaposto

Molto prima che le foto reali, le illustrazioni o gli scatti di prodotto di un sito web siano pronti, qualcuno deve comunque vedere come appare la pagina con le immagini al loro posto. Un layout costruito interamente con riquadri grigi vuoti o icone di immagine mancante è fuorviante — i margini, le proporzioni e il modo in cui il testo si avvolge attorno a un'immagine si comportano tutti diversamente quando qualcosa occupa realmente quello spazio. Un'immagine segnaposto risolve il problema sostituendo temporaneamente la risorsa finale: ha la larghezza e l'altezza corrette, occupa il posto giusto nella griglia e permette a un designer o sviluppatore di valutare se il layout funziona, senza che il contenuto definitivo debba già esistere. Il contenuto del segnaposto in sé — il suo colore, la sua etichetta — è deliberatamente irrilevante; ciò che conta è che le sue dimensioni e proporzioni corrispondano a quelle che avrà l'immagine reale.

È per questo che i servizi di immagini segnaposto più diffusi funzionano tradizionalmente codificando la dimensione direttamente in un URL, ad esempio richiedendo un'immagine 800×600 e ricevendo indietro un rettangolo grigio con stampato sopra "800 × 600". Anche questa dimensione stampata è utile di per sé: permette a chiunque dia un'occhiata al mockup di confermare istantaneamente che lo spazio dell'immagine ha la dimensione prevista, senza dover ispezionare l'HTML. Questo strumento segue la stessa convenzione — lascia vuoto il campo di testo e il rettangolo verrà etichettato automaticamente con la propria larghezza e altezza, oppure inserisci un testo personalizzato per anteprimare una didascalia, un nome di marca fittizio o qualsiasi altra cosa che debba stare dentro quella casella.

Perché l'SVG Può Essere un Formato Segnaposto Migliore del PNG

Un segnaposto PNG è una griglia di pixel: un rettangolo 800×600 a tinta unita con testo deve comunque memorizzare informazioni di colore per tutti i 480.000 pixel, anche se la stragrande maggioranza di essi è di un unico colore uniforme. Un segnaposto SVG, al contrario, non è affatto fatto di pixel — è un breve blocco di testo che descrive delle forme: "disegna un rettangolo di questa larghezza e altezza, riempito con questo colore, poi disegna questo testo centrato al suo interno." Per un segnaposto semplice a colore unito più testo, come quelli creati da questo strumento, questa descrizione occupa tipicamente poche centinaia di byte, drasticamente meno del PNG equivalente. L'SVG ha un secondo vantaggio ancora più importante per i segnaposto usati in un layout responsivo: essendo definito da istruzioni matematiche di forma anziché da una griglia di pixel fissa, può essere ingrandito o rimpicciolito a qualsiasi dimensione senza perdita di qualità o pixellatura, mentre un PNG allungato oltre la sua risoluzione nativa diventa visibilmente sfocato.

Entrambi i formati vengono generati qui allo stesso modo: viene disegnato un rettangolo riempito con il colore di sfondo scelto, e il testo dell'etichetta viene centrato al suo interno sia orizzontalmente che verticalmente, con la dimensione scalata in proporzione alle dimensioni del riquadro affinché un segnaposto piccolo non venga sopraffatto da un testo troppo grande. La versione PNG viene renderizzata su un elemento canvas HTML5 ed esportata con canvas.toDataURL(); la versione SVG viene costruita direttamente come stringa XML contenente un elemento <rect> e un elemento <text>, e scaricata come file. A differenza dei servizi segnaposto che recuperano un'immagine da un URL remoto — una vera richiesta di rete ogni volta che la pagina viene caricata — qui tutto avviene localmente: nessuna richiesta lascia mai il browser, quindi non c'è nulla che possa fallire se quel servizio esterno smette di funzionare, né alcun limite di dimensione imposto dal server di qualcun altro.