Ottimizzazione delle immagini del sito Web per la visualizzazione della retina

StackOverflow https://stackoverflow.com//questions/22008502

Domanda

Ho cercato di trovare un buon approccio per risolvere un problema molto comormmeno nell'era della retina.

Lascia dire che è dato quanto segue:

    .
  • Crea un sito Web con immagini reattive
  • Nessuna immagine di sfondo CSS
  • Siti Web La funzionalità di base deve funzionare senza JS
  • Le immagini dei siti Web devono essere ottimizzate per i display Retina.

Un modo semplice per risolvere questo potrebbe essere qualcosa del genere: 

<img src="img.jpg" data-highres="img@2x.jpg" />
.

e scrivi una specie di JS per scambiare img.jpg con img@2x.jpg se viene rilevato il dispositivo retina.Questo funzionerebbe, ma se entri nel sito web su un dispositivo retina sia img.jpg che img@2x.jpg sarebbe stato caricato.Non molto amichevole amichevole: (

È possibile in qualche modo intercettare e modificare l'SRC dell'immagine prima che sia caricato l'originale SRC?

o qualcuno di voi ha un altro approccio nella risoluzione del problema?

È stato utile?

Soluzione

In futuro, potresti essere in grado di utilizzare Elemento immagine . Nel frattempo, l'unico approccio che ho visto che potrebbe funzionare è:

    .
  1. Metti un div o un intervallo in cui vuoi l'immagine. Stile per avere le dimensioni e il layout dell'immagine. Aggiungi un qualche tipo di segno di identificazione ad esso in modo da poterlo trovare (ad es. class="retina-image")
  2. Archiviare informazioni sulle diverse dimensioni delle immagini che hai su o nell'elemento (ad esempio utilizzando gli attributi generacodicitagcode)
  3. Metti un data-something all'interno del div
  4. su Dom Pronto:
      .
    1. Utilizzare JS per trovare tutti gli elementi con l'identificatore dal punto 1
    2. Rileva il tipo di immagine che desideri
    3. Trova l'attributo che ti dice quale URL utilizzare per quell'immagine
    4. Aggiungi l'immagine al DOM all'interno del contenitore dal passaggio 1

      5. Questo è l'approccio utilizzato da la libreria PictureFill .

Altri suggerimenti

Questo sarà probabilmente l'esca fiammata, ma ecco i miei due centesimi:

La preoccupazione sulla larghezza di banda è in gran parte un problema di piattaforma mobile.Considerando che la maggior parte delle moderne piattaforme mobili adotta ora display ad alto contenuto di pixel, la domanda di immagini ad alta risoluzione di questi dispositivi sarà piuttosto elevata.Perché servire 3 volte la risoluzione dell'immagine del 90% del tempo (un'immagine a bassa risoluzione e alta risoluzione) quando è possibile server 2 volte la risoluzione del 100% del tempo?

quindi, in alcuni scenari , potrebbe essere più facile servire solo le immagini di risoluzione più elevate (dimezzando i loro stili di larghezza / altezza) e lasciarlo in questo - in tal modorisparmio (costoso) tempo e energia altrove.In un'industria in cui tutto sembra essere un compromesso, questo a volte rende il più senso come approccio.

Penso che Quentin abbia essenzialmente risposto alla tua domanda.

Cosa posso aggiungere è che pur avendo un elemento IMG senza un SRC, tecnicamente non per specifica, omettendolo non spezzerà il codice e eviterai il pre-caricamento.Quindi puoi semplicemente avere <img data-src="" data-src2=""> e swap immagini in / out usando JavaScript.L'elemento <noscript> è probabilmente il modo "corretto" di fare questo, ma rende il codice verboso davvero e ho sentito che alcuni browser verranno pre-caricheranno anche le immagini <noscript>.

Un servizio che ho incontrato che rende le immagini reattive (incluso i display della retina) è pixtulation .Forniscono anche il javascript per dimensioni correttamente e sostituire il tuo URL IMG.SRC prima che la pagina abbia finito il caricamento.Dovrebbe essere piuttosto semplice da far cadere.

Se fai qualcosa con window.devicePixelRatio e loop attraverso immagini che hanno un attributo data-highres.

Questo è piuttosto ruvido, ma ottieni la mia deriva. 

 $(document).ready(function() {
     if (window.devicePixelRatio > 1) {
         // retina
     } else {
         // default
     }
 });
.

Utilizzare un GIF 1PX vuoto / trasparente 

<img src="clear.gif" data-basesrc="img1" />
.

Quindi utilizzare basesrc Attribbio e aggiungere il nome file appropriato nel tuo JS.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top