risposta-alla-domanda-sullo-sviluppo-web-bd.com

Dimensione ottimale dell'immagine per la retina - immagine di bellezza

Stiamo supportando display ad alta risoluzione sul nostro sito Web. Abbiamo anche grandi immagini di intestazione/bellezza su ogni pagina, quindi le ho rese larghe 1400 px - meno di 350 KB - JPG. Penso che sia un buon equilibrio tra qualità e dimensioni. I nostri programmatori mi stanno chiedendo di ridimensionarli ancora di più. Quali sarebbero le dimensioni ottimali per un'immagine di intestazione per la retina?

1
janeh

Sembra giusto

Finché i programmatori sanno come gestire i display retina ad alta densità, questa dimensione (o anche leggermente più grande) non dovrebbe essere un problema. Ovviamente, purché si parli di file JPG come foto con dettagli precisi. Altrimenti, se le tue immagini sono basate su vettori, potresti (dovresti) usare file SVG.

Ciò che i tuoi programmatori sembrano mancare è che devono servire immagini basate su diverse densità dello schermo. E l'intero punto di retina schermi è avere immagini di alta qualità con una qualità nitida , per non risparmiare larghezza di banda.

Ad esempio, Apple serve l'immagine qui sotto:

enter image description here

La dimensione è 381,47 KB (390.626 byte)

TheRenovatorHQ non ha una differenziazione per Retina, quindi serve questo per tutti (un'immagine di qualità della retina):

enter image description here

La dimensione è 397,45 KB (406.988 byte)

E potrei andare per ore, solo 2 brevi esempi. Si prega di tenere presente che QUESTE NON SONO ANCHE LE VERSIONI RETINA (dimensioni 2x). Tuttavia, il secondo sito è un esempio di cosa NON fare: offrire immagini ad alta densità a tutti invece di visualizzare le immagini secondo necessità.

In conclusione, se supporti la retina, stai cercando qualità e larghezza di banda che dovrebbero essere le preoccupazioni minori . Mostrando immagini ultra-compresse nella retina ... beh, provale da solo e vedi cosa succede. E sì, capisco perfettamente cosa significhi trattare con programmatori che non riescono nemmeno a cogliere la necessità di immagini di alta qualità o design o usabilità o altro, quindi dovrai instillare quella cultura nella tua organizzazione o dovrai passare di volta in volta

Letture aggiuntive

Proprio come riferimento, dai un'occhiata ai link qui sotto e mostrali ai tuoi programmatori:

2
Devin

350 KB è troppo per una singola immagine e non è un buon bilanciamento. Come regola generale, l'utente non deve superare i 100 KB per immagine (pensa alle persone con Internet molto lento). La densità suggerita delle immagini per il web è di 72 DPI.

La maggior parte degli utenti ha risoluzioni del laptop , come 1366x768. La risoluzione desktop più utilizzata è 1920x1080, il che significa che un'immagine più ampia di 1080 pixel non serve più del 2-3% degli utenti.

Forse puoi fare quanto segue: usa un'immagine da 100Kb come impostazione predefinita, ma se rilevi un utente con una risoluzione superiore a 1080 pixel di larghezza rispetto all'immagine più grande.

Un'altra alternativa è quella di utilizzare immagini SVG che sono molto più leggere: 1-2 KB al massimo. Hanno anche una chiarezza perfetta in qualsiasi risoluzione perché sono basati su vettori ma alla fine possono sembrare piuttosto belli. L'unico aspetto negativo è che qualcuno deve disegnarli.

Riassumendo:

Usa immagini che non superano i 100 Kb, non più larghe di 1080px, con non più di 72 DPI. In alternativa, utilizzare le immagini SVG che sono molto meglio di jpg per i display retina.

0