デザインから画像を書き出したら、なんか1pxズレる問題の対策方法

どうも7noteです。web用に画像を書き出し保存した時に、なんか1pxズレる問題の解決法

「横幅1000pxの画像のはずなのに、書き出すと1001pxになってしまう！」

フォトショップで確認するとこんな感じに薄い1px分の領域ができてしまう。

原因は表示位置にありました。

原因は、画像の配置されている位置が「xx.15px」のように小数点が使われているのが問題でした。

対策方法

X座標とY座標を整数にしてから書き出し保存することで解決できます。

（私はいつも0⇒tab⇒0と入力してから書き出し保存しています。）

まとめ

特にjpgの画像などを書き出すと、淵が1px分白っぽくなるのですが、
書き出すときに対策をすることで解決することができるので、覚えておいて損はないと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ