Grandi immagini, gallerie e design di foto pesanti sono una grande tendenza 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 fanno 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 di immagine e come correggerli o evitarli del tutto. (Come bonus in questo post, presentiamo una raccolta di immagini divertenti e fantastiche da Death alla collezione di oggetti recenti del Foto Stock.)
Errore: caricamento di file enormi
Le immagini a grandezza naturale sono belle (e necessarie) quando si tratta di lavori di stampa, ma possono avere problemi di case 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 a cui cadere. Molti programmi di back-end consentono il caricamento di immagini di grandi dimensioni e, a meno che non si presta attenzione, non si può nemmeno sapere che i file vengono caricati con dimensioni incredibili. Immagini diverse con usi diversi richiedono specifiche di immagine diverse. Fare riferimento al marchio o alla guida del sito Web in modo da sapere quali sono le dimensioni delle aree di immagine comuni sul tuo 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 è quella di ridimensionare le immagini per la dimensione del frame in cui apparirà con una risoluzione web adeguata. Ma c'è un po 'di più. Salva ogni immagine per l'uso ottimale sul tuo sito e per la condivisione sociale. (La larghezza di un'immagine Pinterest, per esempio, è di 600 pixel; se vuoi che l'immagine sia condivisibile, dovrebbe essere quella dimensione.)
Errore: dimenticare di ritagliare
L'utilizzo di file di grandi dimensioni può rovinare un sito, quindi è possibile utilizzare immagini a pieno formato che sono nascoste sullo schermo. Il ritaglio aiuta a mostrare le immagini 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 serie di immagini meno dinamiche che hanno tutte le stesse forme e proporzioni. L'utilizzo di più colture e forme interessanti per le immagini può aggiungere intrighi visivi a un sito web.
Soluzione: Ritaglia le immagini nelle dimensioni o dimensioni appropriate prima di caricarle in modo che ogni immagine venga visualizzata come desiderato.
Errore: dimenticare le miniature
Esistono diversi modi per gestire il ridimensionamento e il ridimensionamento delle miniature. (Molti dei quali dipendono dalle tue capacità di back-end, 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 progettisti dimenticano che le anteprime, le anteprime delle immagini e le favicon devono essere aggiornate con le modifiche ai contenuti del sito web.
L'altro grosso errore? Utilizzo di un'immagine scadente in dimensioni di anteprima perché è grande come può essere. Se l'immagine è cattiva, non usarla. Nessuna immagine è migliore di un'immagine scadente.
Soluzione: Assicurati di rimuovere vecchie miniature o anteprime quando le immagini cambiano e che la tua favicon è attuale.
Errore: nomi non ricercabili e metadati
Le fotocamere digitali salvano molte informazioni in vari metadati che non si traducono nel web. Rimuovere queste informazioni dalle immagini e scambiarle con dati utilizzabili. I motori di ricerca non sono in grado di leggere il contenuto delle immagini, pertanto per renderle disponibili per la ricerca è necessario includere parole descrittive nel titolo, tag alt e contenuto circostante.
Esempi di nomi di immagini scadenti:
- picture1.jpg
- DSCN00023.jpg
- occhiali% e% watch.jpg
Un nome immagine molto migliore include alcune parole descrittive come occhiali-e-guarda-e-pianta.jpg. Il riferimento al tag alt per l'immagine dovrebbe includere una descrizione simile, ad esempio "articoli su un contatore di bicchieri, orologio e una pianta". (E assicurati di scrivere correttamente le parole).
Soluzione: Utilizza forti convenzioni di denominazione per tutte le immagini del sito web e associa immagini con contenuti che si riferiscono a ciascun elemento visivo. I nomi delle immagini dovrebbero includere parole descrittive separate da trattini.
Errore: ridimensionamento o stiramento improprio
Niente sembra più strano di una persona con una faccia allungata o un'immagine che viene ridimensionata in modo errato. Lo stiramento o il ridimensionamento non proporzionale delle immagini (che può essere particolarmente comune quando si verifica un cambiamento del tema o del back-end) è un no-no. Ogni immagine deve essere ridimensionata con un rapporto di 1 a 1, in verticale e in orizzontale. Qualsiasi altra cosa danneggia l'integrità della foto.
Soluzione: Guarda attentamente tutte le proporzioni del ridimensionamento e controlla periodicamente il tuo sito.
Errore: pianificazione non per più dimensioni dispositivo
I quadri di progettazione reattivi hanno alcune implicazioni per le immagini. Il cambiamento di forma o dimensione da un dispositivo all'altro o dall'orientamento rende importante dettare il modo in cui le immagini eseguiranno il rendering su tutti i dispositivi.
Una delle pratiche più comuni è utilizzare le query multimediali per pianificare queste modifiche in base al dispositivo. Il CSS consente di applicare stili specifici alle immagini in base alle dimensioni dello schermo e aiuta le immagini a ottenere risultati senza? Rottura? il design.
Soluzione: Utilizza le query multimediali per framework reattivi e verifica 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 diverse dimensioni e risoluzioni dello schermo, inclusi i display retina. (La risoluzione dei display retina può variare a seconda del dispositivo ma è significativamente superiore rispetto ai display standard).
Soluzione: Includi file e query multimediali specifiche per display retina. (I trucchi CSS possono aiutarti).
Errore: uso eccessivo o generico
La fotografia di riserva può essere una grande soluzione rapida, ma può portare a conseguenze non intenzionali. Le foto che vengono utilizzate su troppi siti Web o che hanno solo un aspetto e 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 lavorare in modi interessanti. Evita le immagini che sembrano cose che hai visto in altri luoghi (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 rifletti il tuo sito nel modo giusto.
Conclusione
Selezionare e creare immagini per un progetto web può essere una delle parti più divertenti del processo di progettazione. Abbi cura di ogni immagine e pixel per assicurarti che il tuo sito funzioni bene e includa immagini che coinvolgano gli utenti.
Hai qualche consiglio o consiglio quando usi le immagini per i progetti del sito web? Ci piacerebbe sapere cosa sono. Condividili nei commenti.