Immagine in evidenza dell'articolo sfocata

[infobazar]

Ciao a tutti. Ho da poco creato il mio primo articolo e ho notato che l'immagine in evidenza è sfocata. Ispezionando l'elemento HTML col browser salta fuori che le dimensioni del rendering non sono quelle effettive dell'immagine e penso sia proprio questo il problema.

Ho anche notato che disattivando la proprietà CSS max-width: 100% il problema scompare perché l'immagine viene visualizzata nelle sue dimensioni reali, ma ovviamente senza di essa l'immagine non è più responsive...

Potete aiutarmi? Grazie.

[frasidipace]

Salve,
cosa intende per imamgine sfocata?
A me sembra corretta sia su PC, sia su smartphone.

Saluti

[infobazar]

Ti posto due immagini per farti capire.




Nella prima max-width: 100% è abilitato e l'immagine è sfocata perché non viene renderizzata nelle sue dimensioni effettive, e infatti guarda qui.



Nella seconda max-width: 100% è disabilitato e l'immagine è nitida perché viene visualizzata nelle sue dimensioni effettive.

è un bel problema perché apparentemente il colpevole è proprio quella proprietà CSS che è fondamentale per il layout responsive del sito.

[frasidipace]

Ok, ma la differenza mi sembra impercettibile e leggermente più marcata su Chrome e Edge rispetto a Firefox.
Bisognerebbe verificare anche la qualità originale dell'immagine.
Potresti fare poi la prova con un altro tema.

Ciao

[infobazar]

Eh ma si nota e sinceramente mi dà molto fastidio. Vorrei solo che venisse visualizzata nelle sue dimensioni effettive in modo da non sfocarsi e come tema vorrei lasciare questo...

Comunque l'immagine originale è questa.

[GraphOGLRisorse]

Eh ma si nota e sinceramente mi dà molto fastidio. Vorrei solo che venisse visualizzata nelle sue dimensioni effettive in modo da non sfocarsi e come tema vorrei lasciare questo...

Comunque l'immagine originale è questa.

Salve,
se vuole che l'immagine sia resposive e non venga ingandita più delle sue dimensioni, allora deve impostare la larghezza dell'immagine al 100% e l'altezza con valore auto, mentre la larchezza massima come valore in pixel equivalente alla larghezza effettiva dell'immagine, ovvero:

width: 100%;
height: auto;
max-width: 275px;

Cordiali saluti.

[infobazar]

L'immagine originale è di 752x329 px, quindi perché dovrei impostare 275 px? Secondo, non è fondamentale il max-width: 100% per avere un'immagine responsive?

[GraphOGLRisorse]

L'immagine originale è di 752x329 px, quindi perché dovrei impostare 275 px?

Lei in precedenza ha monzionato:

Vorrei solo che venisse visualizzata nelle sue dimensioni effettive in modo da non sfocarsi e come tema vorrei lasciare questo...

Quindi se vuole che le dimensioni massime dell'immagine visualizzata siano quelle reali, il valore della misuara massima della larghezza (impostato tramite max-width) non dovrà essere superiore a quello della larghezza dell'immagine.

Secondo, non è fondamentale il max-width: 100% per avere un'immagine responsive?

Non esattamente, dipende da dove lo si usa. I valori max-width e max-height definiscono le dimensioni massime di un elemeto di una pgina HTML, che può non essere un'immagine ma ad esempio un div o un paragrafo. Generalmente, quando si vuole che un'immagine sia responsive, è preferibile l'uso di width con valore espresso in percentuale % e height con valore "auto". In tal caso, max-width può non essere usato se non si vuole porre un limite massimo nel ridimensionamento automatico dell'immagine.

Cordiali saluti.

[infobazar]

Grazie dell'informazione. Comunque sono riuscita a trovare una dimensione che non fa apparire l'immagine sfocata. Grazie a tutti.