WebSite X5Help Center

 
Marco Greco
Marco Greco
User

Ottimizzazione immagini per display Retina  it

Autor: Marco Greco
Visited 1363, Followers 1, Udostępniony 0  

Salve,

ho da poco acquistato un Macbook con display retina e navigando sul mio sito (www.marcogreco.it) ho notato una pessima resa di tutte le immagini caricate, sia su Safari che su Chrome (in realtà anche dei testi, ma ciò si nota meno). Ho fatto diverse prove per migliorare la qualità delle foto tra densità in pixel, risoluzione, ecc. ma il risultato è sempre lo stesso, come se Website applicasse una riduzione di qualità in automatico. Esportando il sito su disco e verificando le immagini nell'apposita cartella, le foto sembrano apparentemente le originali come densità e risoluzione ma di qualità non adeguata. Invece, la resa delle immagini (le foto originali non quelle inerpolate da Website) aperte direttament nel browser sul mac sono perfette.

Grazie,

Marco Greco 

Posted on the
8 ODPOWIEDZI
Marco Greco
Marco Greco
User
Autor

Dalla lettura del post sopra e dalla sua data deduco che nulla è stato fatto in questi 3 anni per ovviare a un serio problema che se finora era riservato ai navigatori Mac, con i nuovi schermi IPS si allarga a sempre più utenti del web.

In ogni caso, ho già provato a raddoppiare la densità in pixel delle foto ma il risultato non cambia; Website applica una riduzione in automatico che rende inutile tale accorgimento.

Personalmente, ho già risolto con:

http://sparkle.cx/

Czytaj więcej
Posted on the from Marco Greco
Claudio D.
Claudio D.
Moderator
Najlepszy Użytkownik miesiąca IT

...a che DPI pubblichi le foto ? ...mi pare che siano a 72 ...

...hai provato a pubblicare sul web le immagini a 150 dpi ... ?

...perchè , ora non lo trovo , ma avevo letto un articolo che consigliava così per i display a retina ...

Czytaj więcej
Posted on the from Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca ENNajlepszy Użytkownik miesiąca ES

... il programma secondo me centra poco; ...trovo ovvio che immagini fatte per un monitor "normale" sgranino a risoluzioni superiori, come per esempio una immagine nata a 400x300 pixel sgranerebbe se adattata su schermo 800x600 e quindi ancor di più oltre...

... per servire quel tipo di utenza! ...basterebbe realizzare siti ad hoc, che con l'attuale v.12_PRO sarebbe possibile fare con semplicità, avendo a disposizione 10 breakpoint per tutte le esigenze...

... io non ho il Programma per verificare personalmente, ma credo che basterebbe realizzare un sito largo 2880 pixel per ottenere un buon risultato su quei dispositivi!, ovviamente ottimizzando il sito per i PC e dispositivi "normali"...

... su quei retina l'immagine per non sgranare deve essere almeno di pari risoluzione, per esempio 2880x1800 pixel ... ma, ... pensandoci, è un'esagerazione! ...perchè ancora in pochi hanno linee super veloci e dispositivi! di quel tipo...

.



Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Claudio D.
Claudio D.
Moderator
Najlepszy Użytkownik miesiąca IT

 ...credo che non sia "solo" un problema di risoluzione in pixel del monitor ma proprio di densità di pixel a parità di risoluzioni ...

è per quello che consigliavo un dpi maggiore ( di solito è 72 dpi ) nella pubblicazione delle foto , la quantità di pixel come altezza/larghezza è un discorso a parte ... 

https://en.wikipedia.org/wiki/Comparison_of_high-definition_smartphone_displays

e

https://it.wikipedia.org/wiki/Retina_Display

...ovviamente il programma non centra...

Czytaj więcej
Posted on the from Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca ENNajlepszy Użytkownik miesiąca ES
Claudio D.
... ... ... ... ...ovviamente il programma non centra...

... quoto... ... .. .. . . .

... ma un pixel è sempre un pixel...

... il Dpi è più per la stampa; ...per i monitor occorre considerare Ppp, pixel/pollice, ed il pixel e ben definito fisicamente...
... una immagine 600x600 a 72 pixel/pollice restituisce una misura di stampa a 22,2 cm (8,3x8,3 pollici)
... una immagine 600x600 a 300 pixel/pollice restituisce una misura di stampa a 5,1 cm (2x2 pollici)
...
... quindi se l'unità di misura dei monitor LCD è il pixel, sempre pixel rimarrà sia se il pixel è microscopico come la punta di uno spillo, sia se gigantesco come una lampadina, come nei monitor di piazza...
... uno schermo a 32 pollici risoluzione FHD 1920X1080 è largo 71 cm 1920X1080, ed in orizzontale ci sono 27 pixel per cm; ...
... in uno schermo gigante con stessa risoluzione e largo 3 metri i 27 pixel occuperebbero più di 4 cm
.

... ciao ... 

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Claudio D.
Claudio D.
Moderator
Najlepszy Użytkownik miesiąca IT

...si KolAsim, chiarissimo ...

...per i dpi , intendevo  a parità di dimensioni immagini di stampa , cioè aumentare il dpi , ma preservando la dimensione di stampa ...anche se diventano un po' enormi...

Comunque per avere le immagini ottimizzate per il retina bisognerebbe avere le immagini al doppio dei pixel ma posizionate nel web alla metà della loro risoluzione ...

quindi se si ha un'immagine che dovrebbe occupare 400x400 , bisognerebbe usare un originale a 800x800 però ridimensionata sul web a 400x400 così nello schermo con PPI più alto renderebbe ugualmente in modo ottimale...

...certo è un bell'impiego di risorse in più ...

qui c'è un bello spiegone :

http://i3factory.com/disegnare-per-il-retina-display-come-ottimizzare-e-progettare-un-sito-web-per-immagini-2x/

Czytaj więcej
Posted on the from Claudio D.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca ENNajlepszy Użytkownik miesiąca ES
Claudio D.
... ... Comunque per avere le immagini ottimizzate per il retina bisognerebbe avere le immagini al doppio dei pixel ma posizionate nel web alla metà della loro risoluzione ... quindi se si ha un'immagine che dovrebbe occupare 400x400 , bisognerebbe usare un originale a 800x800 però ridimensionata sul web a 400x400 così nello schermo con PPI più alto renderebbe ugualmente in modo ottimale... ... ...

... quoto; ...esattamente così ... ... occorre conoscere a monte di cosa si tratta... 

... aggiungo, ...con gli esempi non servono parole:
(2400x1800) >> http://www.zspace.it/kolasim/div_custom/divcustom_100cover_K1.html
(800x600) >> http://www.zspace.it/kolasim/div_custom/divcustom_100cover_K2.html
(400x300) >> http://www.zspace.it/kolasim/div_custom/divcustom_100cover_K3.html

.

ciao

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪