Questa è una buona strategia per ottimizzare le immagini web per iphone? [chiuso]

0

Ho un sacco di vecchie risorse (html e file immagine) che ho bisogno di ottimizzare per i dispositivi mobili. Le risorse esistenti sono state create per desktop e non avevano in mente dispositivi mobili.

Sto pensando di apportare le seguenti modifiche:

1) Nel front-end, se è in esecuzione su un dispositivo desktop, il suo contenuto verrà caricato dall'URL esistente (ad esempio static.example.com/document1/index.html ). Ma se il sito web viene caricato da un iphone6, passerà a static.example.com/document1_iphone6/index.html

2) document1_iphone6 è fondamentalmente un duplicato di document1 . Tutte le risorse immagine saranno ridimensionate per adattarsi a 750x1334

C'è qualche problema / difetto con questo piano?

    
posta Anthony Kong 19.09.2015 - 01:47
fonte

1 risposta

1

Penso che tu sia sulla strada giusta per ottimizzare le immagini per i dispositivi mobili, ma penso che il modo in cui lo farai non si riduca molto bene. Se scegli come target iPhone con immagini ridimensionate, supporterai 5 diverse dimensioni, iPhone 6+, iPhone 6, iPhone 5 / 5S, iPhone 4 / 4S, oltre all'originale, il che non è poi così male.

Ma cosa succede se si desidera supportare i telefoni Android allo stesso livello, avendo un'immagine per ogni dispositivo realizzato? Stai per finire con dozzine di dimensioni dell'immagine diverse.

Risoluzioni schermo Android

Ecco un altro link con un elenco più ampio di dimensioni dei dispositivi.

mydevice.io dimensioni comuni degli smartphone

Non solo avrai dozzine di dispositivi diversi, ma lo schema di denominazione non funzionerà molto bene, poiché alcune risoluzioni vengono utilizzate per più display, lasciandoti con duplicati di immagini.

Un modo migliore per ottimizzare i dispositivi mobili è indirizzare le risoluzioni dello schermo anziché i dispositivi. Ad esempio, potresti scegliere come target una serie di risoluzioni come

xxxhdpi: 1280x1920 px
xxhdpi: 960x1600 px
xhdpi: 640x960 px
hdpi: 480x800 px
mdpi: 320x480 px
ldpi: 240x320 px

Con questo metodo, puoi supportare tutti i dispositivi mobili con solo 6 diverse dimensioni, inoltre, quando viene lanciato un nuovo dispositivo, non dovrai ridimensionare ogni immagine del tuo sito per il nuovo dispositivo.

Questo è tutto presupponendo che tu stia solo parlando di ridimensionare le tue risorse immagine. Se stai per ripetere il layout per ogni dispositivo, sarebbe molto, molto meglio, creare un sito reattivo scalabile per dispositivi mobili.

    
risposta data 19.09.2015 - 04:07
fonte

Leggi altre domande sui tag