Gestire dimensioni immagini

Tommy03

Utente Attivo
6 Giu 2018
614
58
28
21
Vicenza
Salve, vorrei realizzare un sistema in cui l'utente carica foto e queste vengono salvate in un database e poi mostrate in una pagina. Le foto vorrei che fossero mostrate con larghezza standard, mentre l'altezza in modo che rispetti le proporzioni dell'immagine originale, ma che non sia nè troppo alta nè troppo bassa (all'incirca uguale alla larghezza, oppure un po' più alta ad esempio se l'immagine originale aveva altezza maggiore della larghezza).
In generale, come mi consigliate di muovermi? Fare un resize prima di inserire l'immagine nel database, oppure in fase di visualizzazione? E in questo caso, mi conviene utilizzare il tag <img> oppure un <div> con background-image e magari cover?
Grazie
 
Ciao, ti consiglierei :
1) salva i percorsi delle immagini sul database (discorso prestazioni).
2) gestisci la risoluzione / compressione della foto lato server (classe php image resize).
3) utilizza i tag <img> per un discorso SEO.
 
  • Like
Reactions: Tommy03
Salve, vorrei realizzare un sistema in cui l'utente carica foto e queste vengono salvate in un database e poi mostrate in una pagina. Le foto vorrei che fossero mostrate con larghezza standard, mentre l'altezza in modo che rispetti le proporzioni dell'immagine originale, ma che non sia nè troppo alta nè troppo bassa (all'incirca uguale alla larghezza, oppure un po' più alta ad esempio se l'immagine originale aveva altezza maggiore della larghezza).
In generale, come mi consigliate di muovermi? Fare un resize prima di inserire l'immagine nel database, oppure in fase di visualizzazione? E in questo caso, mi conviene utilizzare il tag <img> oppure un <div> con background-image e magari cover?
Grazie
Come ti hanno già detto, non mettere le foto sul database, prendono non solo spazio, ma ti ritrovi a scaricare da due server, uno Apache per il Web ed uno MySQL ( o altro simile ) dove viene fatta una richiesta non per pochi chilobyte, ma per qualche decina o centinaia, solo per far vedere una foto che poi va elaborata per mostrarla.
Meglio un link alla foto memorizzata nel disco fisso del sito.

A prescindere poi, se uno posta una foto alta il doppio della larghezza, che fai? La tagli?
Normalmente le applicazioni come Pinterest, Instagram ecc. fanno vedere le foto come se le vedessi dal buco della serratura, ovvero sono dentro una griglia genericamente a griglia fissa, con overflow fissato a hidden, così che ciò che è fuori non si vede.
Poi ci clicchi su e apri la foto intera, la foto sempre intera, se no chi la inserisce protesta perché gliel'hai tagliata in modo arbitrario.
Sulla dimensione fisica invece dipende da che disponibilità hai tu di server. Tieni presente che:
  • le foto mangiano tantissima banda e più ce ne sono e peggio è;
  • per il motivo di cui sopra vanno sempre ridotte in risoluzione e non lasciate di 250kb tanto ho la fibra;
  • chi usa un telefonino per guardare il tuo sito, non sempre ha un 4G a piena potenza, anzi praticamente mai nemmeno in centro a Milano, scaricarsi dieci foto da 250Kb significa mangiarsi due mega e mezza di banda solo su quella pagina, più il resto.
Per mostrare le foto in stile album di Facebook o Pinterest, cercati la tecnica chiamata Mansory.
 
Grazie ad entrambi per le risposte.
Normalmente le applicazioni come Pinterest, Instagram ecc. fanno vedere le foto come se le vedessi dal buco della serratura, ovvero sono dentro una griglia genericamente a griglia fissa, con overflow fissato a hidden, così che ciò che è fuori non si vede.
Poi ci clicchi su e apri la foto intera, la foto sempre intera, se no chi la inserisce protesta perché gliel'hai tagliata in modo arbitrario
Quindi in pratica mi consiglieresti di salvare la foto interamente e poi mostrarne solo un pezzo in base alle dimensioni, giusto?
 
Grosso modo sì, magari decidi di modificare la risoluzione in modo da non avere immagini troppo pesanti e uniformarle ad un formato di larghezza fissa, che so 700 pixel al massimo ( se sono più grandi le ridimensiono, se no, no. )
Studuati la tecnica del Masonry.
 

Discussioni simili