どうも7noteです。web用に画像を書き出し保存した時に、なんか1pxズレる問題の解決法
「横幅1000pxの画像のはずなのに、書き出すと1001pxになってしまう!」
フォトショップで確認するとこんな感じに薄い1px分の領域ができてしまう。
![](https://naruweb.com/wp-content/uploads/2024/02/633f3fc1-62a8-7275-47da-977e01a3cddb.jpeg)
原因は表示位置にありました。
原因は、画像の配置されている位置が「xx.15px」のように小数点が使われているのが問題でした。
![zureru.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F661092%2F1b96a91d-206f-1762-a250-ccfd81424cbf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=9cec6300e1b53de759f24d13bb88126c)
対策方法
X座標とY座標を整数にしてから書き出し保存することで解決できます。
![](https://naruweb.com/wp-content/uploads/2024/02/00.png)
(私はいつも0⇒tab⇒0と入力してから書き出し保存しています。)
まとめ
特にjpgの画像などを書き出すと、淵が1px分白っぽくなるのですが、
書き出すときに対策をすることで解決することができるので、覚えておいて損はないと思います。