Intanto l'immagine originale all'interno del tuo sito è molto più piccola rispetto ai parametri che imponi (400 e 200px). L'immagine è di 150x150px quindi si stira e ovviamente si sfoca.
A parte il fatto di utilizzare immagini più grandi (magari le ritagli anticipatamente con un programma di grafica), ciò che puoi fare intanto è scegliere una dimensione (larghezza o altezza) su cui relazionarsi in base al layout che la ospiterà.
Cosa vuole dire?
Poniamo che tu non voglia andare al di sopra di 200 px di altezza, come per altro il tuo caso, evitando così che sbordi nei contenitori sottostanti.
Tramite css, regoliamo la nostra dimensione in altezza e rendiamo proporzionata la larghezza dell'immagine sulla base del medesimo valore.
#immaginearticologrande{
height:200px;
width:auto;
}
"AUTO" è un valore che automaticamente (per l'appunto) regola la larghezza dell'immagine in relazione all'altezza (height), quindi proporzionandola.
