È la vostra immagine web-Ready?

Il nostro obiettivo, quando si importano le immagini in una pagina web, è quello di rendere il file il più piccolo possibile, senza compromettere la qualità dell'immagine. In questo articolo, andremo attraverso i passi per rendere la vostra immagine web-ready utilizzando le funzionalità web-savvy all'interno di Photoshop.

Si è tentati di solo salvare il file come JPG o GIF con il comando File / Salva con nome all'interno di Photoshop e chiamare il Web Image-ready. Tuttavia, se lo facciamo in questo modo, ci manca sfruttando l'immagine-contrazione strumenti trovato solo all'interno di Photoshop "Salva per Web" nella finestra di dialogo. Queste caratteristiche consentono a noi mettere a punto il salvataggio dell'immagine, causando anche la dimensione del file senza compromettere la qualità dell'immagine.

Prima di discutere la procedura per il salvataggio di un immagine per il web, guardiamo i due formati più comunemente usati: JPEG e GIF. JPEG consente una più vasta gamma di colori, mentre GIF viene utilizzato al meglio per i colori solidi e immagini a colori ripetitive. Io uso JPEG per le fotografie e CIFS per l'arte line, loghi, e alcune illustrazioni. Mi può anche usare il formato PNG se ho bisogno di un'immagine di alta qualità e salvarlo come file JPEG con i risultati desiderati di qualità in un file che è troppo grande. (es. impiega troppo tempo per scaricare)

Let's go attraverso i passaggi per rendere il vostro Web Image-ready.

Impostare la risoluzione e Ingrandimento
Prima di salvare il file, ho sempre impostare la risoluzione a 72 (la risoluzione standard per i monitor) e impostare la dimensione dell'immagine alla dimensione voglio l'immagine di essere sulla pagina web. Entrambe queste opzioni sono poste all'interno di Dimensione immagine nella finestra di dialogo. Selezionare Immagine> Dimensione immagine.

Immagine nelle sue dimensioni della finestra di dialogo

Salva per Web e dispositivi
Salva per Web e dispositivi funzionalità all'interno del menu File di Photoshop ci permette di ottimizzare il processo di salvataggio a darci la dimensione del file migliore possibile. Questa opzione permette inoltre di confrontare visivamente le varie impostazioni prima di salvare il file.

Dopo aver selezionato File> Salva per Web e dispositivi, la seguente finestra di dialogo compare:

Salva per Web e dispositivi di dialogo

In questa finestra, selezionare la scheda 4 nella parte superiore della finestra. Questo ci dà visuals 3 diversi tipi di immagine (in aggiunta a quello originale) in contesti diversi. Diamo uno sguardo da vicino a questa finestra di dialogo.

In alto a sinistra dello schermo sono gli strumenti. L'unico strumento che può utilizzare è lo strumento Zoom. Essa funziona allo stesso modo lo strumento Zoom in Photoshop. Il pannello centrale presenta rappresentazioni visive delle immagini in varie impostazioni. Il pannello di destra è dove abbiamo impostato le varie opzioni per una delle immagini nel pannello centrale. Il "blue box" di delimitazione intorno a una delle immagini è l'immagine selezionata.

Prima di apportare modifiche guardo le informazioni del file sotto ogni immagine.

Informazioni immagine

Queste informazioni mi dice che il file di formato (JPEG), la dimensione del file, e quanto tempo ci vorrà per scaricare ad una velocità specifica. (Right click le informazioni di velocità per selezionare una diversa velocità di download.) Siamo più interessati alla dimensione del file.

A destra di queste informazioni è il parametro della 'qualità' - la più bassa la qualità, maggiore è la compressione. Come diminuisce la qualità, la rappresentazione visiva diminuisce anche. Potremmo perdere dettaglio. Oppure, l'immagine può cominciare a guardare fuzzy. Il nostro obiettivo è quello di utilizzare l'immagine di qualità più bassa, senza compromettere la rappresentazione visiva dell'immagine.

Impostare il formato di file e di qualità

Pannello destro Rettifiche

Il formato di file (JPEG, GIF, ecc) e la qualità può essere modificato nella parte superiore del pannello di destra. Ci sono altri parametri, come pure, ma ci si concentrerà su questi due. Nel pannello centrale, selezionare l'immagine che più si avvicina alla dimensione del file desiderato e si conserva ancora la sua integrità visiva. Questo rende l'immagine attiva. Eventuali modifiche che facciamo nel pannello di destra, sarà applicata a questa immagine.

Fare clic sulla freccia a destra nel campo della qualità per aprire il dispositivo di scorrimento di qualità. Abbassare la qualità fino a che è la dimensione del file più piccolo possibile e la qualità desiderata è ancora intatto. Se si vuole confrontare visivamente le varie opzioni fianco a fianco, apportare modifiche simili alle altre due immagini.

Quando l'immagine è la dimensione più piccola di file possibile, con l'integrità visuale desiderato, selezionare l'immagine per rendere l'immagine attiva e fare clic su Salva. Si apre la finestra di dialogo Salva ottimizzato. Vai dove si desidera salvare il file. Verificare che l'opzione Salva come Tipo è impostato solo immagini. Fare clic su Salva.

Salva Solo immagini

Dopo aver salvato il file, l'immagine è pronta per essere utilizzata sulla tua pagina web. Si può essere certi di avere la più piccola dimensione del file, senza compromettere la qualità dell'immagine. L'immagine è ora pronti per il Web.