Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
vuoi
o PayPal
tutte le volte che vuoi
Esportare per il web
Esportare per il web significa cercare di prendere le immagini del nostro mockup (gli elementi grafici) capire quali parti del nostro mockup andranno sviluppate in codice e quali invece vanno esportate come immagini. Normalmente il 90% del nostro sito sarà esportato come puro codice (testi, titoli, sfondi) e poi la parte di immagini va esportata come file. La cosa fondamentale di esportare per il web è quello di evitare di far pesare troppo tutta questa parte nel nostro sito (si parla di dimensioni del file) e nello stesso tempo non bisogna ridurre troppo le dimensioni del file in modo che la qualità delle nostre immagini ne risenta.
Esportare layout e immagini
Una volta definito layout, dimensioni e quali immagini inserire bisogna salvarle e ottimizzarle per il web. Ottimizzare le immagini significa trovare il giusto equilibrio tra qualità e dimensioni file. Nonostante l'aumento della velocità delle linee per la connessione internet (ADSL,...
La velocità di caricamento delle pagine web è un aspetto fondamentale per garantire una buona esperienza agli utenti. Inoltre, con l'aumento dell'utilizzo di dispositivi mobili per accedere a Internet, è importante ridurre le dimensioni dei file per ottimizzare la velocità di caricamento.
Per ottimizzare le immagini, è possibile seguire alcune linee guida:
- Utilizzare una dimensione in pixel uguale o simile alle dimensioni effettive dell'immagine.
- Scegliere il formato adatto al tipo di immagine e al numero di colori. Ci sono diversi formati disponibili, come JPEG, PNG e GIF.
- Regolare i livelli di compressione per ottenere una buona qualità dell'immagine con una compressione dei dati adeguata.
- Utilizzare altre tecniche di ottimizzazione specifiche per il formato dell'immagine.
È importante notare che le immagini utilizzate all'interno di un sito web non devono essere troppo grandi, ma devono corrispondere effettivamente alle dimensioni visualizzate. Se un'immagine non subisce una perdita significativa di qualità quando ingrandita, è possibile utilizzarla anche a dimensioni maggiori.
dimensioni leggermente più piccole rispetto alle dimensioni che ci servono. 39! la prima cosa da fare quindi è rimpicciolire le immagini per far si che non siano troppo grandi e non siano troppo pesanti per la dimensione effettiva dei pixel dell'immagine. SALVARE PER IL WEB CON ADOBE PHOTOSHOP Ogni immagine che deve essere pubblicata sul web deve essere salvata attraverso il comando Salva per web e dispositivi... oppure Esporta. Queste finestre mettono a disposizione una serie di funzioni che consentono di ottimizzare le immagini, permettendo un controllo e una verifica in tempo reale della qualità, della trasparenza, dei colori e delle dimensioni del file. Salvare l'immagine in un formato compatibile con il web (es. JPEG) tramite la funzione Salva / Salva come, crea dei file che possono essere inseriti nelle pagine, ma di dimensioni superiori di quelli ottenibili tramite la funzione Salva per web e dispositivi.... Finestra salva per il web e dispositivi Si trovautilizzando un algoritmo di compressione che elimina alcune informazioni dell'immagine, causando una perdita di qualità. Questo formato è ampiamente supportato dai browser e offre una buona qualità dell'immagine con dimensioni di file relativamente ridotte. FORMATI PER IL WEB: GIF 40 GIF - Graphics Interchange Format ➢ ideale per immagini con pochi colori, grafiche semplici, loghi e animazioni ➢ →compressione senza perdita: il formato GIF utilizza una compressione senza perdita, che consente di ridurre le dimensioni del file senza perdere qualità. Tuttavia, a causa delle limitazioni del formato, le immagini GIF possono avere una qualità inferiore rispetto ad altri formati. FORMATI PER IL WEB: PNG 40 PNG - Portable Network Graphics ➢ ideale per immagini con trasparenza, grafiche con pochi colori e testo ➢ →compressione senza perdita: il formato PNG utilizza una compressione senza perdita, simile al formato GIF. Tuttavia, a differenza del formato GIF, il PNG supporta una gamma più ampia di colori e offre una migliore qualità dell'immagine. Inoltre, il PNG supporta la trasparenza, consentendo di sovrapporre l'immagine su uno sfondo senza problemi. Altri formati per il web includono il WBMP, utilizzato principalmente per dispositivi wireless monocromatici, il SVG, utilizzato per immagini vettoriali, e il WebP, un formato sviluppato da Google che offre una buona qualità dell'immagine con dimensioni di file ridotte (richiede un plug-in apposito per essere visualizzato correttamente).riducendola qualità; fortunatamente se settata in maniera corretta la perdita non è percepibile dall'occhio umano. La compressione del jpeg può creare indesiderati artefatti sull'immagine; compressioni eccessive possono rivelare un mosaico 8x8. Si può comprimere da 0 a 100 (100 non si ha compressione, 0 massima comprensione). Un range tra i 45 e gli 80 potrebbe essere la nostra fascia di salvezza. Sotto i 40 abbiamo sempre delle immagini danneggiate, sopra gli 80 è difficile che ci serva davvero andare. Non supporta la trasparenza e possono includere meta data come copyright e altre informazioni. Jpeg / opzioni di salvataggio e ottimizzazione Le opzioni che possiamo settare per il formato JPEG sono: - qualità / settare la qualità significa settare il livello di compressione di un jpeg: maggiore è la qualità, minore sarà la compressione e maggiore sarà il peso del file ottenuto. Non ci sono numeristandard per ottenere un buon compromesso tra qualità e peso visto che dipende molto dal tipo di immagine;
➢ progressivo / nel caso di connessioni lente visualizza un'immagine in una qualità molto bassa e che al procedere del download migliora di qualità fino ad arrivare all'immagine finale, aumenta le dimensioni del file, non è al giorno d'oggi non è così necessario;
➢ ottimizzato / aggiunge un'ulteriore compressione senza perdita (chiamata Huffman coding);
➢ includi profilo colore (embed color profile) / include il profilo colore dell'immagine, purtroppo la maggior parte dei browser ignora questa funzione;
➢ sfoca (blur) / aumenta la compressione ma l'immagine risulterà meno definita;
➢ alone (matte) / definisce il colore che devono avere le parti che nel psd sono trasparenti (il jpeg non supporta la trasparenza);
JPEG / FINESTRA SALVA PER IL WEB E DISPOSITIVI
FORMATI PER IL WEB: GIF: per immagini non
- ideale per loghi, testi e altre immagini grafiche
- compressione senza perdita: la compressione delle dimensioni del file avviene senza perdita basandosi su un tipo di codifica dei dati (LZW) e quindi la compressione può essere diversa in base al tipo di immagine, ma...
- supporta fino a 256 colori, quindi se l'immagine ha più di 256 colori avrà una perdita di qualità, per questo non è adatto per immagini fotografiche con milioni di colori se ho immagini con più di 256 colori avrò perdita di qualità.
- supporta la trasparenza a 1 bit quindi un pixel potrà essere o completamente trasparente o completamente opaco: 50% di trasparenza non possiamo averla ma si cerca di simulare una trasparenza mettendo un colore di sfondo
- non possono includere meta data del copyright
- supporta l'animazione
Gif/ opzioni di salvataggio e ottimizzazione
Le opzioni per il formato GIF sono:
- Algoritmo di riduzione del colore per determinare quali colori mantenere e quali ignorare; tra le opzioni a disposizione segnaliamo: selettivo (colori più usati e in larghe concentrazioni), adattivo (colori più usati nell'intero documento), percettivo (priorità alla percezione del colore, ma poco accurato nei valori reali del colore), restrittivo (web safe color, obsoleto), inoltre per ottenere immagini monocromatiche bianco e nero/scala di grigio.
- Web snap è invece l'aderenza dei colori alla paletta web safe color, obsoleto.
- La riduzione del numero di colori fa diminuire il peso dell'immagine (e non sempre la qualità).
- Il dithering serve per determinare in che modo vengono simulate le sfumature; le opzioni sono nessun dithering, diffusione, pattern, disturbo.
- La trasparenza a 1bit può portare a contorni strani e rigidi, per settare una trasparenza morbida si può impostare l'alone.
Sfondo che dobbiamo considerare su cui poggerà la nostra immagine. Sulle immagini fotografiche al 90% andrà sul jpg che dovrà poi ottimizzare.
Se tra questi ne posso scegliere più di uno vado a confrontare il peso dell'immagine rispetto al formato e vedo quale conviene utilizzare.
Png / opzioni di salvataggio e ottimizzazione
Le opzioni che possiamo settare per il formato PNG-8 sono le stesse del formato GIF. Le opzioni che possiamo settare per il formato PNG-24 sono:
- la trasparenza a 8bit consente di creare trasparenze morbide anche senza l'utilizzo dell'alone.
- l'alone è il colore di riempimento per i pixel trasparenti (come nei JPG) quando la trasparenza è disattivata.
- Interlacciato è simile al progressivo del JPG
PNG / FINESTRA SALVA PER IL WEB E DISPOSITIVI 43 PARTE PHOTOSHOP
Per ridimensionare le immagini posso andare su immagine > dimensioni immagine e vado a rimpicciolire in modo che la mia immagine sia
più grande di quello che effettivamente devo avere. PER RIMPICCIOLIREL’IMMAGINELa funzione dimensione quadro mi permette di ritagliare l’immagine. Se ho il “punto” al centro taglieràintorno, se il punto è in alto raglierà in basso e così via. PER ACCORCIARE O ALLUNGARE IL QUADRO DELLANOSTRA IMMAGINESTRUMENTO TAGLIERINA: per noi è utile lo strumento L x A x Risoluzione con risoluzione 72 px/polliceperché lavoriamo per il web. Con doppio click ritaglioPer esportare le immagini vado su esporta: salva per il web. E bisogna scegliere il formato.- Png-24: il nostro file pesa 106 k- Jpeg: pesa 61 kQuindi tra i due vado a scegliere jpeg.Dopo scelto il formato bisogna andare ad ottimizzare. La qualità si può mettere di default o andarla asettarla con i numeri (da 1 a 100)Se si mette l’opzione “ottimizzato” va ad aumentare il peso dell’im
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
