Immagini ridimensionate e di qualità
Mercoledì 18 Marzo 2009 - 08:24
di Cesare Lamanna
Non so quanti di voi si siano trovati in situazioni simili. Io diverse volte, soprattutto dovendo adattare certe immagini troppo larghe al layout di HTML.it nell’editing degli articoli. Un tempo mi affidavo agli attributi width e height del tag img. Sui browser che usavo (Firefox o Safari su Mac) il risultato era più che decente, ma poi ho verificato che su IE gli esiti erano a volte imbarazzanti: la perdita di qualità superava i limiti accettabili. Da allora ridimensiono le immagini con un programma di grafica e poi le inserisco nella pagina.
Ho scoperto solo ieri che esiste un metodo per superare il problema. Lo riporta, riprendendolo da Devthought, Chris Coyier.
È sufficiente usare nel CSS questa regola che sfrutta una proprietà specifica di Microsoft:
img { -ms-interpolation-mode: bicubic; }
Commenti
1
Peccato che in questo modo il codice css che non possa superare la validazione. Seganalazione utile comunque.
2
@WebAir
Io i CSS ho smesso di farli validare.. Mi limito all’HTML (però quello tassativamente strict o 1.1)
3
Si potrebbe ricorrere - ancora una volta - ai commenti condizionali solo per IE. Anche io non lo userei se il validatore non dovesse riconoscere tale dichiarazione.
4
In realtà non è da molto tempo che Firefox ridimensiona le immagini con qualità, forse anche meno di un anno…
Speravo inveche che ci fosse il modo per disabilitarlo con FF, visto che in certi casi le immagini usate come sfondo di un elemento si sfocano.Certo che ridimensionare le immagini solo via gli attributi è proprio una cosa da principianti, mi sorprende leggerlo in questo blog… ;-)
# - postato da Andrea - 18 Marzo 2009 - 09:22
5
Concordo con Andrea.
Il ridimensionamento lato client rimane comunque un workaround, secondo me poco professionale.
Perchè usarlo? Qual’è il problema da superare?
Se il sito è statico, semplice html, l’ostacolo probabilmente è dato dalla poca voglia (o anche poco tempo) dello sviluppatore di creare le miniature (ci sono comunque programmini che lo fanno al volo con pochi click).
Se il sito è dinamico la creazione automatica lato server di thumbnails per le immagini che vengono caricate è una delle prime cose che si imparano.
Ridimensionare le immagini usando attributi o css fa sì che, come detto, la qualità sia inferiore, e la pagina notevolmente più pesante da caricare di quello che potrebbe essere.# - postato da Gabriele Fabbri - 18 Marzo 2009 - 09:44
6
Concordo totalmente con quanto detto da Gabriele Fabbri, io ho sempre evitato di ridimensionare le immagini lato client per questioni di peso della pagina e qualità del risultato finale.
# - postato da Tommaso Baldovino - 18 Marzo 2009 - 09:56
7
Le ragioni di chi ha commentato prima di me sono tutte condivisibili, però nel caso di immagini liquide la resa con IE7 è ottima (in IE6 la regola dell’esempio non va).
Ho fatto una prova quì: liquid images.# - postato da Filippo Buratti - 18 Marzo 2009 - 11:27
8
@ Filippo Buratti
Bello … ma in stampa?
9
Andrea, so che è poco professionale, e non lo faccio più da anni (parlo dell’epoca del vecchio vecchio HTML.it). Il fatto è che talvolta mi sono trovato in situazioni tipo “larghezza massima consentita dal layout 470px, dimensione dell’immagine 475px”, a quel punto, lo ammetto, per pigrizia, mi affidavo a quel metodo. Mai mi sono sognato di ridurre da 900 a 400, per dire :)
# - postato da Cesare Lamanna - 18 Marzo 2009 - 14:32
10
@andrea e @gabriele fabbri
può essere utile in caso le immagini, per qualsiasi motivo, debbano ridimensionarsi dinammicamente, in tempo reale, al ridimensionamento della finestra o al hover o quant’altro.
Tra l’altro, giustamente in stampa? potrebbe essere una soluzione per avere elementi stampati in alta risoluzione (penso ad un logo)
11
Ah è così che lavorate voi? :-D
A parte gli scherzi, ho notato che flickr fa una cosa del genere ma al contrario, parte dall’immagine grande e poi chiedendo di rimpicciolirla usa width ed height per mostrarla più piccola, ma il contrario … sarebbe da brivido.
Cesare scusa, ma 5 pixel? Ma mi vieni anche a dire che si notava la differenza?
Posso capire se il discorso iniziale verteva su 100 pixel di differenza o anche cinquanta, ma cinque!
E’ solo una questione di pigrizia, lo dici anche tu :-)M.
# - postato da Marco Grazia - 18 Marzo 2009 - 15:20
12
Marco, ti posso assicurare che in certi casi anche con pochi pixel si notava, non roba eclatante, ma specie su screenshot con testi molto piccoli e in partenza molto compressi e/o già ridimensionati con Photoshop o altro faceva la differenza in senso negativo.
Purtroppo non sempre si lavora con materiale grafico di qualità, specie quando non dipende da te o non sei tu a produrlo.Tra l’altro mi sto sempre più convincendo che in situazioni estreme anche il ridimensionamento fatto con Photoshop sia da evitare (vedi, come sopra, certi screenshot) e che convenga offrire come thumbnail una versione croppata, sacrifichi l’insieme in anteprima ma almeno offri un dettaglio decente a livello di qualità.
# - postato da Cesare Lamanna - 18 Marzo 2009 - 15:46
13
nel caso di screenshot con testi molto piccoli, reputo che sia opportuno perdere quantità di sfumature… e a volte aumentare i kb dell’immagine, facendo un .gif. trovo in oltre che Gimp sia il programma che fa i .gif più belli di tutti gli altri. ciao.
14
The GIMP le gif non le fa proprio, nel senso che le fa così orride che con esso non le uso mai, il problema che si porta dietro dalla versione uno con le gif, quando il protocollo di creazione non era open, mi pare che non è stato ancora risolto.
Comunque alle gif preferisco sicuramene le png, anche verso le jpg.
Cesare mi pare sempre eccessivo il discorso che fai, ma probabilmente hai ragione se mi parli di caratteri troppo piccoli, quello che mi chiedo è se conviene farlo, ma chiaramente è un problema contestuale al lavoro.
Personalmente preferisco sempre non fare queste cose, ma se è un logo è chiaro che non c’è nulla da fare.
Io in genere preferisco lavorare su un’immagine a risoluzione alta che poi abbasso nella fase finale del lavoro, mi pare che l’effetto finale migliora, ma almeno non ho immagini che da sole pesano più di 20/30/50 kilobyte, di più non lo accetto, specialmente in una realtà come l’Italia dove la banda larga si ferma dove comincia la pedemontana :-)
Però mi è capitato di dover scansionare un logo prendendolo da un depliant perché il cliente non aveva più (o non l’aveva mai avuto) il bozzetto tipografico originale e quindi non potevo fare altro se non scansionare una grafica spessissimo di pessima qualità.
Chiaro che in questi casi conta anche il pixel, anzi fosse per me butterei tutto ma è chiaro che non posso. Ma mi pare un caso limite.
M.# - postato da Marco Grazia - 19 Marzo 2009 - 11:44