Il ridimensionamento delle immagini è un problema molto comune quando si lavora sul web. Il motivo è semplice. Le immagini "pesano". Ovvero rispetto al testo che ci può essere in una pagina, una immagine generalmente usa molti più byte (l'unità minima dell'informazione in una cella di memoria). E dato che quando usiamo internet la quantità di informazioni che il modem può prelevare dalla rete non è infinito, significa che tante più byte usa una pagina fra testo, immagini e tutte le altri informazioni che servono per visualizzare il contenuto, tanto più lento sarà il caricamento della stessa.
Per stabilire su Blogger in modo automatico la larghezza massima delle immagini contenute nei post, in modo che non sia maggiore della colonna che li contiene, è possibile aggiungere dal Designer di Modelli, utilizzando la procedura per aggiungere un CSS ,il seguente foglio di stile CSS:
.post-body img { max-width: 450px; height: auto; }
Il valore di larghezza in pixel (450), che imposta in modo automatico la larghezza massima delle foto del blog, può essere eventualmente aumentato o diminuito in base alla dimensione in pixel della colonna del post che le ospita.
Se ti è piaciuto l'articolo , iscriviti al feed cliccando sull'immagine sottostante per tenerti sempre aggiornato sui nuovi contenuti del blog:
Salve, complimenti per il sito e grazie per tutte le informazioni che condivide. Io ho provato a fare quanto da Lei indicato ma la larghezza foto resta invariata. Questo accade perchè le foto dei miei post sono hostate altrove? grazie per la cortese risposta. Martha
RispondiEliminaPoniamo che le dimensioni massime supportate per le immagini siano di 500 pixel e di mantenere il rapporto tra larghezza e altezza. Visto che l'Editor del template di Blogger è recentemente cambiato vediamo come procedere con la nuova interfaccia. Si va su Modello > Modifica HTML e si clicca in un'area vuota della scheda Modifica Modello. Si digita Ctrl+F e, nel campo Search che si apre, si incolla ]]> quindi si va su Invio per visualizzare l'area del codice in cui è presente tale linea che sarà evidenziata,
RispondiEliminaSi posiziona il cursore subito sopra a tale linea e si incolla questo codice
.post-body img {
max-width: 500px !important;
width: espression(this.width>500 ? 500: true;)
height: auto!important; }
Si salva il modello.Ovviamente il valore 500 pixel può essere adattato e modificato a piacere. Tutte le immagini che abbiano una larghezza inferiore a 500 pixel rimarranno immutate mentre quelle con larghezza superiore si ridimensioneranno a 500 pixel mantenendo inalterate le proporzioni. Si tratta di un'ottima soluzione per chi abbia cambiato template e adesso si trovasse con una gran quantità di immagini che siano troppo grandi per una area del post diventata più piccola. Nei vecchissimi modelli al posto di .post-body img potrebbe essere necessario inserire .post img.