Salve. Il contenuto del nostro blog è stato tradotto in maniera automatica per vostra convenienza. Scusateci se, occasionalmente, le traduzioni sono di scarsa qualità.

Ottimizzare le Immagini per il Web: Una Guida Pratica

Nov 8, 2016 by Michelle Nickolaisen
A practical guide to optimizing images for the web
Posted Nov 8, 2016 by Michelle Nickolaisen

Le immagini sono fondamentali per l'esecuzione di un negozio di e-commerce di successo — dopo tutto, se i tuoi potenziali clienti non possono vedere che cosa stanno comprando, non è molto probabile che a comprarlo. Le immagini possono anche fare o rompere il vostro blog, aumentare il vostro SEO, e più.

Continuate a leggere per scoprire come rendere la vostra foto e immagini il lavoro per voi.

Perché l'ottimizzazione delle immagini materia?

Il vantaggio più evidente per l'ottimizzazione delle tue immagini è che è meglio per voi nel lungo periodo.

Rende gli utenti vogliono attaccare in giro sul tuo sito web (perché si può vedere chiaramente le immagini e non prendere sempre per caricare).

Si rende il vostro sito web più facile da trovare nei risultati di ricerca (perché una buona ottimizzazione delle immagini è anche search-engine friendly).

C'è anche il fatto che è un bene per gli utenti. L'ottimizzazione delle immagini, a parte generalmente più user-friendly, aiuta anche a rendere il vostro sito più accessibile per le persone con disabilità visiva (che potrebbe essere utilizzando lettori di schermo, che tirano fuori dell'alt-tag per descrivere l'immagine per l'utente).

Il che significa più visitatori del tuo sito web e, potenzialmente, più vendite.

Leggi anche: Semplici Modi per Rendere i Prodotti Più Attraente per i Consumatori

L'ottimizzazione delle immagini 101

Così che cosa va a immagine di ottimizzazione?

I nomi di File e il codice

La prima e più semplice cosa che si può fare è cambiare il nome del file di immagine di qualcosa di descrittivo, piuttosto che 10934.jpg.

Descrivere ciò che è raffigurato nell'immagine (“RedCorvette.jpg”) o cosa c'è nel post, se questo è per un post del blog (“MaintainingYourCorvette.jpg”).

Dopo di che, è possibile aggiungere un tag “alt” .

Questo è un tag che va all'interno dell'immagine di codice che fornisce una breve descrizione di ciò che l'immagine è — si vuole descrivere l'immagine in poche parole durante l'utilizzo di parole chiave pertinenti.

Andando con l'esempio di cui sopra, si potrebbe avere un tag alt di “Il 2010 Corvette Rossa Di Manutenzione.”

Ma non roba parole chiave del tag alt — non aggiungere “auto corvette rossa di manutenzione 2010 automobile negozio comprare” come alt-tag perché in grado di compensare i filtri antispam in algoritmi dei motori di ricerca, e inoltre, non è user-friendly per ipovedenti spettatori.

La maggior parte dei siti hanno un modo semplice per modificare il tag alt, ma se non, è possibile fare clic su “visualizza sorgente” o “HTML” nel editor di testo per modificare voi stessi.

Alt-Tags_HTML_Image_Code.png

A parte il nome del file e tag alt, molti costruttori di sito (come WordPress) vi darà uno spazio per il titolo dell'immagine, didascalia, e la descrizione (e facilmente vi permetterà di modificare i tag alt) quando si carica un'immagine, come mostrato di seguito.

La compilazione di tutti i campi disponibili è la migliore regola empirica per l'ottimizzazione. La didascalia verrà mostrato ai media di spettatori, ma tutto il resto sarà per lo più utilizzati dai motori di ricerca e lettori di schermo (per i non vedenti e spettatori che si basano sull'immagine descrizioni).

 image descriptions

Le descrizioni delle immagini in WordPress

Le dimensioni e il formato

Ridurre le dimensioni del file immagine. Ovviamente, si desidera che le immagini per essere abbastanza grande per vedere, ma non c'è bisogno di essere il caricamento delle immagini, che sono migliaia e migliaia di pixel di larghezza e altezza.

Accertarsi di non caricare l'immagine a dimensione piena e quindi basta cambiare le dimensioni che appare come attraverso l'immagine codice. Se lo fai, il computer del visitatore dovrà caricare l'immagine a dimensione piena e permette di rallentare il tempo di caricamento in basso.

Non c'è un hard-e-veloce regola per la dimensione del file o dimensioni, ma il generale gist è “la più piccola dimensione del file senza che l'immagine è troppo piccola o illeggibile”.

In linea di immagini blog, molti siti stanno con una larghezza di 500-800 e un altezza di 300-600. È sempre possibile includere un link per l'immagine full-size in modo che le persone possono ottenere un immagine più grande quando si fa clic su.

Per quanto dimensione del file va, le immagini non devono mai essere più grande di 1 mb, e, idealmente,, la maggior parte di loro sarà di circa 100-200kb.

È inoltre possibile ridurre la risoluzione per rendere la dimensione del file più piccoli, ma con l'aumento della retina display, non si vuole ridurre la risoluzione troppo o le immagini sfocate su questi schermi.

Per cambiare la dimensione del file, di solito si può scegliere di esportare un'immagine con qualità leggermente inferiore, modificare le dimensioni dell'immagine, o modificare il tipo di file (vedere di seguito).

Utilizzare il formato di file corretto per il lavoro. Per la maggior parte degli usi, .jpg sarà la vostra migliore scommessa. Supporta la maggior parte dei colori con la minor quantità di dimensione possibile.

Gif tendono ad essere più grandi di dimensioni del file di saggio per immagini statiche, ma sono grandi per le immagini animate (Giphy, chiunque?).

Questo è un ottimo modo per mostrare il vostro prodotto da tutte le angolazioni o in movimento, senza fare agli utenti di caricare un video completo — Ecwid consente di utilizzare gif animate per.

Per le immagini con testo, .il png è una buona scelta — quelle immagini tendono ad essere più grande della dimensione del file, ma sono più nitide di testo (e anche il supporto di trasparenza).

Le migliori pratiche per le immagini

Sul tuo sito:

  • Assicurarsi di includere tutte le descrizioni aggiuntive possibile, per rendere il vostro prodotto pagine e post di blog search-engine friendly.
  • Includere più angoli dei vostri prodotti.
  • Assicurarsi di impostare una immagine in evidenza, che di solito è l'immagine che è tirato per i social media, le anteprime.

Utilizzare sempre immagini di alta qualità più ampio di 500px-1000px per il prodotto immagini. Dopo il caricamento del tuo negozio, Ecwid ospita immagini e rende il carico veloce automaticamente. Per essere sicuri che il tempo di caricamento è la migliore possibile, cerca di non caricare immagini di grandi dimensioni, per esempio, quelli in formato 4K.

Esso’s meglio utilizzare immagini quadrate per il prodotto e la categoria immagini, come immagini quadrate sono mobile-friendly e sempre guardare bene su tutti i dispositivi. Check out Ecwid negozio demo per un esempio.

Ecwid supporta retina-ready miniature create dal vostro prodotto immagini, quindi non’t preoccuparsi per il vostro negozio guardando bene sulla retina display!

Tutto quello che dovete fare è accedere al tuo Pannello di Controllo, poi vai a "Impostazioni" e poi “Cosa c'è di Nuovo” per abilitare la funzione.

the Ecwid Control Panel

Saperne di più: Come Ottimizzare le Immagini dei Prodotti: Step-By-Step Istruzioni e Una Panoramica dei Servizi

Sui social media:

In generale, non si desidera utilizzare la stessa immagine su più social network — è meglio modificare l'immagine per ottimizzare per ogni social network. Check out Hubspot di social media di immagine cheat sheet per ottenere l'immagine esatta specifiche per tutte le reti.

Se si dispone di importanti testo nelle immagini, assicurarsi che è facile da leggere come qualcuno che scorre attraverso il loro Facebook o Twitter timeline.

Fare in modo di ottimizzare i vostri elenchi di avere immagini che sembrano buone su siti come Facebook e Twitter.

Per esempio, Twitter è auto-generato link riassunti (la Scheda di Riepilogo o la Scheda di Riepilogo Immagine di Grandi dimensioni — per saperne di più su schede Twitter, la testa qui) utilizzare la prima immagine della pagina o consigliati immagine del prodotto, come:

La tua vetrina di immagine dovrebbe essere ottimizzato per guardare bene sul link in anteprima

La tua vetrina di immagine dovrebbe essere ottimizzato per guardare bene sul link in anteprima

Alcune delle immagini creatori nella sezione app di seguito sono pre-fatto dei social media image modelli che è possibile utilizzare per ottenere un inizio di salto.

Correlati: Migliori Applicazioni Gratis per Perfezionare il Vostro Social Media Immagini

Nella tua newsletter:

Non fare affidamento sulle immagini per trasmettere le parti più importanti della e-mail.

Molti provider di posta elettronica non mostrare le immagini di default (e darà agli utenti la possibilità di mostrare le immagini), quindi, se si dispone di parti importanti del messaggio in un'immagine, un utente può eseguire la scansione rapidamente e perdere. Invece, usare le immagini come accenti visivo per completare le parole nell'e-mail.

Sempre più persone sono la lettura di messaggi di posta elettronica sui loro telefoni, quindi assicuratevi di testare come messaggi di posta elettronica di visualizzazione su schermi di piccole dimensioni da inviare voi stessi un test di copia della newsletter e la lettura sul tuo cellulare.

Questo significa anche che si desidera assicurarsi che le immagini sono ad alta risoluzione abbastanza per guardare bene sul telefono schermi — per esempio, l'iPhone 6 ha un PPI (pixel per pollice) di 326 e il 6 plus ha un PPI di 401.

Leggere anche: Dove Trovare Immagini Gratis sul Web: Foto Stock, Database, e Newsletter

Le applicazioni di cui avete bisogno per ottimizzare le tue immagini

Se volete un Photoshop di ricambio, check out GIMP. È gratis, open-source, e funziona su Windows, Mac, o Linux.

Il lato negativo è che è un po ' ripida curva di apprendimento di Photoshop, ma ci sono un sacco di tutorial online per aiutare a piedi attraverso le cose.

Che ha detto, GIMP (o Photoshop) è probabilmente eccessivo per la media di post di blog/l'immagine del prodotto. PicMonkey può aiutare a fare editing di immagini di base, insieme con il collage e la creazione di immagini per i social media.

Se si desidera modificare le tue immagini in movimento, Pixlr dispone di diverse opzioni per le app più un'opzione online. Se hai la modifica delle foto, VSCO è una grande scelta per

Ultimo ma certamente non meno importante, c'è Canva, che è meno di un immagine o foto editing app, e più di un graphic tool di creazione online immagini. È possibile aggiungere facilmente il testo, cornici per foto, sfondi, e offre anche social media pronta modelli di immagine.

Ancora bisogno di un prodotto immagini da modificare? Per un corso accelerato su come scattare foto del prodotto, utilizzando il proprio smartphone, la testa qui.

Leggi anche: Come Fare un Buon Background in Immagini dei Tuoi Prodotti Senza l'Utilizzo di Photoshop

Non impostare il tuo negozio di e-commerce di sicurezza? Iscriviti e iniziare a utilizzare Ecwid oggi.

About The Author
Michelle is a freelance writer living in Richmond, VA, with her Shiba Inu and cat named after the Hulk. When she's not writing about business, she can usually be found working on her novel series or other side projects, or training Brazilian jiu-jitsu.

Stay up to date!

Get free e-commerce tips, news and inspiring ideas delivered directly to your inbox