Che dimensione e formato usare per uno sfondo a tutta pagina?

Aiuto! Sto creando un sito ma ho un dubbio su quali dimensioni (e tipo di immagine) utilizzare per lo sfondo. Ho sempre utilizzato un'immagine di dimensioni 2000x1033 (derivata da un immagine 1920x1080, vettorializzata e poi riscalata per evitare di perdere troppi dettagli) grande 163,49kB, in jpg.
Per raggiungere un'immagine di meno di 200kB, però, ho messo la qualità di JPEG a 63. Il risultato non è dei migliori, ma non ci si può lamentare.

http://pianetaminecraft.it/css/images/bg.jpg

Ultimamente facendo il restyle del sito però mi sono accorto che l'immagine non è come io desidero, e quindi sto cercando nuovi tipi di immagine e dimensioni.

Meglio tenere l'immagine in jpeg? O farla in gif? (i colori di questo gioco sono pochi, e le sfumatore sono assenti, quindi una tavolozza sarebbe meglio)
Come mi devo tenere in quanto a dimensione? 400kB sono già troppi. 200kB perde troppo qualità, come fare? (l'immagine resterà in cache per sempre, comunque)
E con la risoluzione? Ho fatto l'immagine 2000x1033 per dare spazio a chi ha una risoluzione più grossa di avere un'immagine comunque buona. Meglio farlo in 1440x900? 1920x1080? (lo sfondo utilizza l'attributo "cover" di css3)

Aspetto risposte! :D

[karl94]

Meglio tenere l'immagine in jpeg? O farla in gif? (i colori di questo gioco sono pochi, e le sfumatore sono assenti, quindi una tavolozza sarebbe meglio)

Sì, una tavolozza è certamente indicata in questo caso, io personalmente però userei il formato PNG (con tavolozza).

E con la risoluzione? Ho fatto l'immagine 2000x1033 per dare spazio a chi ha una risoluzione più grossa di avere un'immagine comunque buona. Meglio farlo in 1440x900? 1920x1080? (lo sfondo utilizza l'attributo "cover" di css3)

Potresti scegliere due o tre risoluzioni tipo e generare per ciascuno un'immagine di quella grandezza, poi con le CSS Media Queries fai scaricare solamente la più adatta.

Sì, una tavolozza è certamente indicata in questo caso, io personalmente però userei il formato PNG (con tavolozza).
Potresti scegliere due o tre risoluzioni tipo e generare per ciascuno un'immagine di quella grandezza, poi con le CSS Media Queries fai scaricare solamente la più adatta.

Gimp non mi lascia salvare come PNG con tavolozza. Come posso fare?
Mi fai un esempio di CSS Media Queries con le risoluzioni? Trovo solo esempi con la grandezza della finestra.

[karl94]

Gimp non mi lascia salvare come PNG con tavolozza. Come posso fare?

http://docs.gimp.org/it/gimp-image-convert-indexed.html

Mi fai un esempio di CSS Media Queries con le risoluzioni? Trovo solo esempi con la grandezza della finestra.

http://www.w3.org/TR/css3-mediaqueries/#device-width

http://docs.gimp.org/it/gimp-image-convert-indexed.html

Perfetto! Ho indicizzato un'immagine 1440x900 in png senza indicizzazione e ho ottenuto un file da 1,1mb, con l'indicizzazione a 256 colori solo 200kb!
Inizio già ad amare questa indicizzazione :D

http://www.w3.org/TR/css3-mediaqueries/#device-width

Quindi, ad esempio, per la gente che utilizza uno schermo 1440x900 mi basterebbe fare...

<link rel="stylesheet" media="(min-device-width: 1439px) and (min-device-height: 899px)" href="style1440.css" />

Ma se io sotto scrivo

<link rel="stylesheet" media="(min-device-width: 1919px) and (min-device-height: 1079px)" href="style1920.css" />

e io ho uno schermo 1600x1200 chi vincerà? Verrà caricato il css 1440 o quello 1920?

[karl94]

L'ultima definizione di una proprietà CSS è quella che vale ma vengono caricati ambedue i fogli di stile, per questo ti consiglio di usare l'at-rule @media anziché caricare millemila fogli di stile.

[darkwolf]

In base a quel documento non ti converrebbe usare direttamente:

@media screen and (device-aspect-ratio: 1280/720) { ... }

Così da dare l'immagine giusta ad ogni singola risoluzione? :)

[karl94]

In base a quel documento non ti converrebbe usare direttamente:

@media screen and (device-aspect-ratio: 1280/720) { ... }

Così da dare l'immagine giusta ad ogni singola risoluzione? :)

È appunto quello che stavo suggerendo io:

ti consiglio di usare l'at-rule @media anziché caricare millemila fogli di stile.

[darkwolf]

Ah, scusami... Io non conoscevo nemmeno le CSS Media Queries e tra una cosa e l'altra le stavo giusto leggendo grazie a questa discussione (solo che non avevo collegato quell'esempio con il tuo post "at-rule @media")

Il problema è che mi serve che si carichi una certa immagine da (ad esempio) 800x600 e 1024x768, un'altra da 1025x769 a 1440x900 ecc... Tanto poi c'è l'attributo cover di CSS3 che aggiusta il tutto in base alla dimensione della finestra.

[karl94]

Questo mi sembra sia chiaro a tutti, qual'è il problema?

Questo mi sembra sia chiaro a tutti, qual'è il problema?

utilizzando

@media screen and (device-aspect-ratio: 1280/720) { ... }

non verrebbe caricata l'immagine solo a una risoluzione di 1280x720? Vorrei fare delle immagini di diverse dimensioni (ad esempio 3) e impostare che si carichino ad esempio una a partire da 800x600 fino a 1024x768, una che mi carichi da 1280x720 a 1600x1200 e un'altra da 1920x1080 in poi.

[karl94]

Scusa, non avevo fatto caso che Darkwolf ti avesse suggerito l'uso della caratteristica device-aspect-ratio, non è infatti adatta al tuo scopo e andavano già bene le query che avevi indicato nel quinto messaggio di questa discussione, semplicemente anziché caricare un diverso foglio di stile, usa l'at-rule @media.
L'aspect ratio inoltre indica solamente il rapporto tra larghezza e altezza, non ti permette di discriminare le varie risoluzioni: per esempio uno schermo con risoluzione 1024×768 ha il medesimo di rapporto di uno schermo con risoluzione 800×600, sono entrambi 4:3.

Scusa, non avevo fatto caso che Darkwolf ti avesse suggerito l'uso della caratteristica device-aspect-ratio, non è infatti adatta al tuo scopo e andavano già bene le query che avevi indicato nel quinto messaggio di questa discussione, semplicemente anziché caricare un diverso foglio di stile, usa l'at-rule @media.
L'aspect ratio inoltre indica solamente il rapporto tra larghezza e altezza, non ti permette di discriminare le varie risoluzioni: per esempio uno schermo con risoluzione 1024×768 ha il medesimo di rapporto di uno schermo con risoluzione 800×600, sono entrambi 4:3.

Grazie.

Va bene come sfondo un'immagine con la dimensione pari a 800kB?

[dreadnaut]

Secondo me è un po' grossina... metterei qualcosa sotto i 200kb

Secondo me è un po' grossina... metterei qualcosa sotto i 200kb

Ecco, mi hai messo in crisi... Ora come faccio?
Sono riuscito a diminuire le immagini fino a 300kb, ma più di così non riesco.

Sono 12 immagini ogni anno (una al mese) e mi sono venute così:
http://pianetaminecraft.it/css/images/sfondi/1.png -> 453,1kB
http://pianetaminecraft.it/css/images/sfondi/2.png -> 395kB
http://pianetaminecraft.it/css/images/sfondi/3.png -> 638,3kB
http://pianetaminecraft.it/css/images/sfondi/4.png -> 573,2kB
http://pianetaminecraft.it/css/images/sfondi/5.png -> 485,6kB
http://pianetaminecraft.it/css/images/sfondi/6.png -> 416,6kB
http://pianetaminecraft.it/css/images/sfondi/7.png -> 641,8kB
http://pianetaminecraft.it/css/images/sfondi/8.png -> 579,1kB
http://pianetaminecraft.it/css/images/sfondi/9.png -> 313,1kB
http://pianetaminecraft.it/css/images/sfondi/10.png -> 438,1kB
http://pianetaminecraft.it/css/images/sfondi/11.png -> 616,5kB
http://pianetaminecraft.it/css/images/sfondi/12.png -> 464,3kB

Sono tutte di risoluzione 1971x1200, in modo da coprire risoluzioni grandi come 1600x1200 e 1920x1080. Forse dovrei rimpicciolirle un po' e poi con i css ci pensa il browser ad allargarle un po'. Che risoluzione mi consigli?

Un'altra domanda. Tra una indicizzata a 64 colori ed una a 46, la 46 occupa meno? Perchè per memorizzare 46 cose occorrono 2^6bit, ma gli stessi bit vengono usati anche per 64 cose.

[dreadnaut]

Spero che tu non intenda mostrarle tutte contemporaneamente

Dagli un bel po' di sfuocatura e salvale come jpeg al ~60-70% di qualità. Sono sfondi, qualcosa che la gente ignora comunque, quindi non ha senso che siano più grossi del resto della pagina.