Autore Topic: Creare immagini responsive  (Letto 206 volte)

Offline EmoArt

  • Appassionato
  • ***
  • Post: 232
  • Sesso: Maschio
    • Mostra profilo
    • SaDi ceramiche di Caltagirone
Creare immagini responsive
« il: 15 Mag 2018, 16:13:46 »
Salve, dando un'occhiata in giro ho trovato uno script che sembri possa risolvere il problema delle immagini non responsive dei template. Si tratta di uno script trovato html.it dove in pratica a seconda dello schermo dell'utente carica un'immagine totalemnte diversa ma ottimizzata per schermi piccoli. Solo che non ho capito bene come si usa, nell' esempio Ŕ come se tutto fosse compilato nella pagina index, ma nel caso mio e di molti template spesso le immagini engono richiamate da un file css esterno, sapete come modificarlo per poterlo fare funzionare?
FinchŔ ci credi Ŕ reale.

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 3743
  • Sesso: Maschio
    • Mostra profilo

Offline EmoArt

  • Appassionato
  • ***
  • Post: 232
  • Sesso: Maschio
    • Mostra profilo
    • SaDi ceramiche di Caltagirone
Re:Creare immagini responsive
« Risposta #2 il: 19 Mag 2018, 15:15:07 »
Ti ringrazio del link, ma non risolve la questine perche effettua un ridimensionamento dell'immagine in vece di sostituirla del tutto. Il problema nasce perchŔ ho una foto pesante come heaer per la visualizzazione da pc ( che c pu˛ stare ) ma per la visualizzazione da cellulare non mi basta ridimensionarla, devo proprio sostituirla con una pi¨ piccola sia in dimensioni che sopratutto in kb. Questo script esegue questa funzione ma solo se l'immagine in questione si trova nella root assieme alla pagina index nel mio caso non saprei come fargliela richiamare dal css esterno perch˛ sono una ciofeca  in programmazione. :-)
FinchŔ ci credi Ŕ reale.

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 3743
  • Sesso: Maschio
    • Mostra profilo
Re:Creare immagini responsive
« Risposta #3 il: 20 Mag 2018, 08:00:18 »
puoi sempre utilizzare le media query, prova a vedere se con questa guida  riesci a risolvere:
https://www.icagenda.it/media-query-cosa-sono-e-come-si-utilizzano.html

Offline Limma

  • Abituale
  • ****
  • Post: 823
  • Sesso: Maschio
    • Mostra profilo
Re:Creare immagini responsive
« Risposta #4 il: 20 Mag 2018, 22:50:43 »
Si tratta di uno script trovato html.it dove in pratica a seconda dello schermo dell'utente carica un'immagine totalemnte diversa ma ottimizzata per schermi piccoli
Quel che cerchi di fare Ŕ da un po' che, seppur in "piccole dosi", cerco di inserire nei siti che realizzo; intendo proporre immagini diverse a seconda dei device sui quali sarÓ visualizzato il sito.
E non si tratta solo di cercare, giustamente, di ridurre il "peso" delle immagini, ma anche di presentare "inquadrature" diverse della stessa immagine.
Mi spiego: una cosa che trovo particolarmente fastidiosa Ŕ una grande (e bellissima...) immagine a tutto schermo in formato 16:9 (o chi per lui) che su un pc o laptop risalta benissimo, ma che su uno smartphone in modalitÓ "portrait" diventa un quasi insignificante (e spesso illeggibile) rettangolino. E' evidente che in quest'ultimo caso l'immagine risulterebbe molto pi¨ efficace in un formato tipo 4:3 (o 5:4 et similia), e ancor pi¨ efficace se proponesse un "crop" con un contenuto ben evidente.
Nulla di nuovo, naturalmente: si chiama "Art Direction" delle immagini responsive, e sul web si trova molta documentazione in merito.

Tutto questo "pippone" solo per dire che non conosco lo script di cui parli tu (un link...?), ma ho fatto un piccolo esempio sfruttando il tag <picture> e il <source srcset> dell'html5.
Qui vedi il risultato (ridimensiona la finestra del browser per osservare bene l'effetto): si tratta di un "set" di 4 immagini a diversa risoluzione e "proporzione" che presentano crop diversi della stessa immagine (in questo piccolo test non ho badato molto alla dimensione in kb delle immagini, ma solo per la fretta...).
Va da sŔ che non Ŕ un metodo "meccanizzabile", anche se in rete qualcosa del genere si trova.

So di non esserti stato molto utile, ma l'argomento mi interessava...!  ;)
« Ultima modifica: 20 Mag 2018, 22:53:01 da Limma »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19265
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
Re:Creare immagini responsive
« Risposta #5 il: 21 Mag 2018, 10:33:08 »
in linea di massa si risolve con css applicato ai div specifici
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

 

Torna su