Riduci le dimensioni del file senza perdere la qualità

11

Vorrei salvare i file in Photoshop ma tenerli il più piccolo possibile.

Uso Save for Web (e dispositivi) e salvo come JPEG. Ecco le impostazioni che ho usato:

impostazioni

Non voglio davvero abbassare le impostazioni di qualità perché uso il testo e talvolta vedo artefatti se l'impostazione è troppo bassa.

Questo produce file di diverse centinaia di kilobyte a seconda della dimensione dell'immagine. Anche se questo non è un grosso problema, queste immagini vengono utilizzate per il Web e le dimensioni minori sono migliori. Quali sono le tecniche senza ridurre la qualità per ridurre le dimensioni del file?

Aggiornare:

Per aggiungere ulteriori informazioni qui:

Molte delle immagini che utilizzo e creo vengono inviate via e-mail. Ciò limita fortemente ciò che posso fare con il posizionamento di testo utilizzando HTML e CSS sull'immagine.

Anche io uso una varietà di caratteri. Alcuni che potrei usare per il web usando i CSS, @font-facema puoi correre in file di grandi dimensioni e in alcuni casi non puoi caricare legalmente il font sul web. Potrei usare un servizio come Typekit ma ancora molti tipi di carattere che utilizzo non sono disponibili con Typekit.

Ecco un'immagine di esempio:

Immagine di esempio

— L84
fonte

1

Ci sono diverse risposte a questo: un esempio del tipo di immagini di cui stai parlando sarebbe di aiuto.

— e100

1

@ e100: aggiorno la domanda per fornire un'immagine di esempio e aggiungere ulteriori informazioni.

— L84,

Domanda simile: graphicdesign.stackexchange.com/q/3429/10419

— Kornel

Se stai controllando il lato del sito web, controlla le opzioni di codice / generazione. Sono il designer di un team web professionale e forniamo video a schermo intero su desktop / telefono cellulare senza un grande successo. Le immagini, se non strettamente richieste, sono in formato SVG vettoriale e caricate come carattere. Riduce drasticamente il numero di KB della pagina. I banner di eroi di 2000 pixel di larghezza sono JPG all'85% e i ragazzi si caricano in background. Il dispositivo dell'utente finale viene rilevato e consegnato versioni relative del file (ovvero versione più piccola per dispositivi mobili). Quando l'utente viene superato dalla home page, il caricamento dello schermo è immediato. E puntiamo a una home page massima di 2 secondi.

— Applefanboy,

15

La scelta del miglior metodo di compressione dipende dal contenuto dell'immagine. Se stai cercando di salvare l'immagine con molti colori e transizioni fluide tra di loro, la tua scelta sarebbe piuttosto JPEG. Altrimenti, se hai un po 'di lineart, testo, immagine con un paio di colori, dovresti provare invece PNG.

Lo schema di compressione specifico, i parametri, la riduzione del colore ecc. Dipendono dal caso specifico. Esistono alcune immagini che è possibile salvare in modo sicuro con lo "slider" di compressione JPEG impostato su 30 o 40 senza rendere evidenti gli artefatti. Alcuni altri richiedono impostazioni 80 o più. Il tuo occhio dovrebbe essere il giudice.

Quando parliamo di compressione JPEG, non esitare a provare ad usare, ad esempio, l'opzione "Progressiva" o impostare "Sfocatura" su un valore diverso da zero (la sfocatura sottile può mascherare artefatti di compressione gravi).

Nel caso di PNG, dovresti cercare di ridurre il più possibile la quantità di colori usati (usa PNG-8 per quello). Quando è necessario un "livellamento", provare diversi algoritmi di dithering.

Ecco un paio di esempi:

JPEG, Progressivo, Qualità: 40, Sfocatura: 0.18 JPEG, ottimizzato, qualità: 60, sfocatura: 0 JPEG, Progressivo, Qualità: 60, Sfocatura: 0 PNG-8, Dithering: diffuso, 256 colori

Da sinistra a destra, dall'alto verso il basso, i loro parametri sono:

JPEG, Progressivo, Qualità: 40, Sfocatura: 0,18, Dimensione: 9 672 byte
JPEG, ottimizzato, qualità: 60, sfocatura: 0, dimensione: 16.898 byte
JPEG, Progressivo, Qualità: 60, Sfocatura: 0, Dimensione: 11 104 byte
PNG-8, Dithering: diffuso, Colori: 256, Dimensione: 4 528 byte

Confrontali visivamente e poi dai un'occhiata alle rispettive dimensioni dei dati. La prima coppia è di circa 9,7 kB contro 16,9 kB. Il secondo è 11,1 kB contro 4,5 kB. Tutto ciò per differenza visiva (IMHO) trascurabile.

— thebodzio
fonte

La mia più grande preoccupazione per l'opzione progressiva è il supporto per i client di posta elettronica. Ho aggiunto ulteriori informazioni alla mia domanda per spiegare questo.

— L84,

1

Per quanto ne so, "progressivo" fa parte dello standard JPEG e non è qualcosa di esotico, quindi il supporto dovrebbe essere quasi del 100%. Ma è "Penso" non "Lo so" :).

— thebodzio,

Sono d'accordo e credo che tu abbia ragione, avevo posto questa domanda sul Webmaster SE e nel peggiore dei casi le immagini verranno visualizzate ma non fino a quando non saranno completamente caricate.

— L84,

1

Questo è esattamente il modo in cui "progressivo" intende funzionare: dovrebbe mostrare versioni sempre più dettagliate dell'immagine consecutivamente man mano che diventano disponibili più dati.

— thebodzio,

Siamo spiacenti, ciò che intendevo era che nulla viene mostrato fino a quando l'immagine non viene caricata rispetto al caricamento della scansione per scansione.

— L84,

10

Ecco alcune opzioni:

Utilizzare un altro formato diverso da JPEG (PNG o GIF); i risultati in termini di dimensioni del file e qualità dell'immagine dipenderanno dal contenuto dell'immagine; ognuno è migliore con determinati tipi di contenuti
Rendi l'immagine più piccola in termini di pixel - questo avrà un effetto molto significativo e dovrebbe sicuramente essere considerato se hai il controllo sul layout generale
Utilizzare elementi non di immagine ove possibile, ad esempio provare a sostituire il testo in immagini con testo HTML; prova a sostituire i blocchi di colore con elementi HTML.

Espandendo gli ultimi due punti, dovresti cercare di ridurre al minimo l'estensione delle immagini nei tuoi layout nel suo insieme prima di dedicare tempo a ridurre le dimensioni del file delle immagini esistenti.

— e100
fonte

2

Cercherò di rispondere ad alcune domande finora senza risposta:

Molte delle immagini che utilizzo e creo vengono inviate via e-mail. Ciò limita fortemente ciò che posso fare con il posizionamento di testo utilizzando HTML e CSS sull'immagine.

Puoi inviare e-mail html (come vengono fatte le newsletter). Con HTML e CSS in linea (per compatibilità). Le immagini devono essere su un server e devi inserire l'URL completo nei tag styling / img. Ecco un elenco di ciò che funziona nei diversi client di posta elettronica.

Anche io uso una varietà di caratteri. Alcuni che potrei usare per il web usando CSS @ font-face ma puoi correre in file di grandi dimensioni e in alcuni casi non puoi caricare legalmente il font sul web.

Prova google webfonts , di gran lunga la migliore fonte di webfont. Tutto gratis da usare. Un altro sarebbe Font Squirrel . (Utilizza anche @ font-face).

— Jannik Ruf
fonte

Grazie per i collegamenti. Ho visitato alcuni dei siti Web di Campaign Monitors ma non ho visto la pagina CSS. Informazioni molto utili lì.

— L84,

-1

Non è possibile farlo. JPEG è un formato con perdita di dati. C'è sempre uno scambio tra qualità e dimensioni del file.

— wanting252
fonte

Eventuali altri consigli oltre all'utilizzo di JPEG. Come è PNG?

— L84,

1

Il PNG è senza perdite ma anche abbastanza grande. Dove usi questa immagine? Se è per il web, è sempre meglio codificare il testo.

— Jannik Ruf,

JPEG e GIF sono buone scelte per la visualizzazione Web (PNG viene usato raramente). Ma dipende molto da cosa vuoi fare: sfondo, presentazione di immagini, miniatura o icona ecc ...

— wanting252

Se è solo testo senza effetti (cioè solo testo bianco su sfondo nero) Gif è buono e di dimensioni molto ridotte.

— Jannik Ruf,

4

Questa non è davvero un'ottima risposta. Esistono diversi modi per ridurre le dimensioni del file; non è corretto affermare che PNG viene usato raramente sul Web.

— e100