WEB制作用に書き出した画像のまわりに、CSSでborderの指定をしている場合、画像がボヤける事があります。

特にテキストが入っている画像は文字の輪郭がボケてしまいます。

これは書き出す際の画質？

アンチエイリアスのせい？

しかし、貼り込む前の実画像そのものを確認するとボヤけていない。

貼り込んでボヤけてしまった画像

元の画像

なにか原因があるはず…。

これはborderで指定した線の幅の分だけ、実サイズより画像が強制的に縮小されているからなのです。

サイズを保ったまま周りにボーダー指定をする方法があります。

解決方法は以下の通り

CSS

例えば画像に1pxの赤い線を付ける場合

.test img {
border: 1px solid #ff0000;
box-sizing: content-box;
}

結果

これでborderを指定しても画像が縮小されません。