8 errori di immagine da evitare sul tuo sito web
Grandi immagini, gallerie e design fotografici sono una tendenza importante nel web design. Per sfruttare al meglio questa estetica, devi assicurarti che ogni immagine sul tuo sito Web si adatti al display e rappresenti bene il tuo marchio.
Ci sono molti errori che i designer commettono lungo il percorso, dai problemi tecnici alla qualità dell'immagine. Ma non devi cadere in una di queste trappole quando lavori con le immagini dei siti Web. Qui, daremo un'occhiata agli errori dell'immagine e a come correggerli o evitarli del tutto. (Come bonus in questo post, stiamo presentando una raccolta di immagini divertenti e fantastiche dalla morte alla collezione di oggetti recenti di Stock Photo.)
Errore: caricamento di file enormi
Le immagini a dimensione intera sono belle (e necessarie) quando si tratta di lavori di stampa, ma possono causare problemi quando si tratta di web. Le immagini di grandi dimensioni si caricano lentamente; i tempi di caricamento lenti fanno sì che gli utenti abbandonino il tuo sito.
Sfortunatamente, è una trappola facile da cadere. Molti programmi di backend consentono il caricamento di immagini di grandi dimensioni e, a meno che tu non stia prestando attenzione, potresti non sapere nemmeno che i file vengono caricati con dimensioni incredibili. Immagini diverse in usi diversi richiedono specifiche dell'immagine diverse. Fare riferimento alla guida del marchio o del sito Web in modo da sapere quali sono le dimensioni delle aree immagine comuni sul sito.
Quando si pensa alle immagini, anche il tipo di file è importante. Per favore, non usare un tiff per il web. I formati di file più comuni e utilizzabili sono PNG (immagini generate al computer come grafici o loghi o quando è necessaria la trasparenza), JPG (foto) o GIF (animazioni).
Soluzione: la soluzione semplice consiste nel ridimensionare le immagini per la dimensione della cornice in cui verrà visualizzata con una risoluzione Web adeguata. Ma c'è un po 'di più. Salva ogni immagine per un uso ottimale sul tuo sito e per la condivisione sui social. (La larghezza di un'immagine Pinterest, ad esempio, è di 600 pixel; se vuoi che l'immagine sia condivisibile, dovrebbe avere quella dimensione.)
Errore: dimenticare di ritagliare
Durante l'utilizzo di file di grandi dimensioni è possibile impantanare un sito, quindi è possibile utilizzare immagini a pieno formato nascoste sullo schermo. Il ritaglio consente di mostrare gli elementi visivi che gli utenti devono vedere creando un punto focale definito che potrebbe non essere presente con un'immagine a pieno formato.
La mancanza di ritaglio delle immagini può anche creare una pila di elementi visivi non dinamici che hanno tutti le stesse forme e proporzioni. L'uso di più colture e forme interessanti per le immagini può aggiungere intrighi visivi a un sito Web.
Soluzione: ritagliare le immagini nella dimensione o dimensione appropriata prima di caricarle in modo che ogni immagine venga visualizzata come desiderato.
Errore: dimenticare le anteprime
Esistono diversi modi per gestire il ridimensionamento e il ridimensionamento delle miniature. (Molti dei quali dipendono dalle tue capacità di backend, quindi non discuteremo i meriti di ciascuno.) Ma devi ricordarti di aggiornare e prestare attenzione alle immagini più piccole sul tuo sito.
Troppo spesso i designer dimenticano che le anteprime, le anteprime delle immagini e le favicon dovranno essere aggiornate con modifiche al contenuto del sito web.
L'altro grande errore? Utilizzo di un'immagine scadente con dimensioni miniaturizzate perché è la più grande possibile. Se l'immagine è cattiva, non usarla. Nessuna immagine è migliore di un'immagine scadente.
Soluzione: assicurati di rimuovere le anteprime o le anteprime obsolete quando le immagini cambiano e la tua favicon è attuale.
Errore: nomi non ricercabili e metadati
Le fotocamere digitali salvano molte informazioni in vari meta campi che non si traducono in rete. Rimuovi queste informazioni dalle immagini e scambiale con dati utilizzabili. I motori di ricerca non possono leggere il contenuto delle immagini, quindi per renderle ricercabili le immagini devono includere parole descrittive nel titolo, nei tag e nel contenuto circostante.
Esempi di nomi di immagini scadenti:
- picture1.jpg
- DSCN00023.jpg
- occhiali% e% watch.jpg
Un nome di immagine molto migliore include alcune parole descrittive come occhiali-e-guarda-e-pianta.jpg. Il riferimento al tag per l'immagine dovrebbe includere una descrizione simile, ad esempio "oggetti su un vetro da banco, orologio e pianta". (E assicurati di scrivere correttamente le parole.)
Soluzione: utilizzare convenzioni di denominazione efficaci per tutte le immagini di siti Web e accoppiare immagini con contenuti correlati a ciascun elemento visivo. I nomi delle immagini devono includere parole descrittive separate da trattini.
Errore: ridimensionamento o allungamento impropri
Niente sembra più strano di una persona con una faccia tesa o un'immagine che viene ridimensionata in modo improprio. Lo stretching o il ridimensionamento non proporzionale delle immagini (che può essere particolarmente comune quando si verifica un cambio di tema o back-end) è un no-no. Ogni immagine deve essere ridimensionata con un rapporto da 1 a 1, in verticale e in orizzontale. Qualsiasi altra cosa danneggia l'integrità della foto.
Soluzione: osserva attentamente tutte le proporzioni di ridimensionamento e controlla periodicamente il tuo sito.
Errore: non pianificazione per più dimensioni del dispositivo
Le strutture di progettazione reattiva comportano alcune implicazioni per le immagini. La modifica della forma o delle dimensioni da dispositivo a dispositivo o in base all'orientamento rende importante stabilire come verranno visualizzate le immagini su tutti i dispositivi.
Una delle pratiche più comuni è quella di utilizzare le query multimediali per pianificare queste modifiche per dispositivo. Il CSS consente di applicare stili specifici alle immagini in base alle dimensioni dello schermo e aiuta a renderle bene senza "rompere" il design.
Soluzione: utilizzare media query per framework responsive e testare il rendering delle immagini su un numero di dispositivi.
Errore: ignorare gli schermi Retina
C'è stato un tempo non molto tempo fa in cui un'immagine standard di 600 pixel di larghezza a 72 ppi era tutto ciò che serviva per un sito Web. Ma gli schermi stanno migliorando a un ritmo in cui non è più così.
A seconda del framework, ogni immagine può effettivamente includere più immagini salvate per schermi di dimensioni e risoluzioni diverse, inclusi i display retina. (La risoluzione dei display retina può variare a seconda del dispositivo ma è significativamente più elevata rispetto ai display standard.)
Soluzione: includere file e query multimediali specifici per i display Retina. (I trucchi CSS possono essere d'aiuto.)
Errore: arte abusata o generica
La fotografia di scorta può essere un'ottima soluzione rapida ma può portare ad alcune conseguenze indesiderate. Le foto che vengono utilizzate su troppi siti Web o che hanno solo un aspetto generico non creeranno un elemento visivo che stabilisca una connessione con gli utenti. (Non vuoi che il tuo sito web assomigli a tutti gli altri là fuori?)
Se prevedi di utilizzare la fotografia stock, considera le immagini che puoi modificare o utilizzare in modi interessanti. Evita le immagini che sembrano cose che hai visto in altri posti (controlla le immagini per tutti i concorrenti o siti simili).
Soluzione: prendi in considerazione l'assunzione di un fotografo per creare un ottimo file di immagine specifico per il tuo sito web. Includi elementi visivi che riguardano la tua azienda o il tuo marchio e riflettono il tuo sito nel modo giusto.
Conclusione
La selezione e la creazione di immagini per un progetto di sito Web può essere una delle parti più divertenti del processo di progettazione. Fai attenzione a ogni immagine e pixel per assicurarti che il tuo sito funzioni correttamente e includa immagini che coinvolgeranno gli utenti.
Hai suggerimenti o trucchi per l'utilizzo delle immagini per i progetti di siti Web? Ci piacerebbe sapere cosa sono. Condividili nei commenti.
