PNG スプライトと CSS 座標のズレは Retina で 1 px ギャップやぼけになります。書き出し・@2x／@3x・M4 バッチ・クロススクリーン検収の要点と受入基準を整理します。
関連：Figma ピクセル整合、SVG Retina、PNG QA。
スプライト PNG の書き出しパラメータ
1× 格子を正としセルは整数 px。端数は background-position で隣セルが滲む。
| 項目 | 推奨 | 受入（OK） |
|---|---|---|
| 形式・色 | 透過 PNG、Web は sRGB | 境界に半透明の帯なし。ICC 方針どおり。 |
| セル・ギャップ | @1× で W・H 整数、ギャップは固定（例 2 px） | 仕様 W×H と ±0 px。ギャップが隣色を拾わない。 |
| 全体・台帳 | スプライト寸法は整数。ID→(x,y,w,h) を JSON 同梱 |
identify が設計値と一致。台帳のみ更新は禁止。 |
手順：スナップ→台帳→合成書き出し→画像と数値 diff。
@2x／@3x とピクセル整合
倍率 1・2・3 のみ。background-size＝実寸、background-position＝1× の (-x,-y) px（縮尺は size）。
受入：1× デスクトップと 3× 実機で境界欠け・色すじなし。ズレは実寸≠size か 1× 端数（整合チェックリスト 同ルール）。
バッチ処理：コマンド／ツール別パラメータ表
リモート M4 でコマンド固定。圧縮はピクセル一致後のみ（例 oxipng -o 4 --strip safe）。
| ツール | 例 | 検収 |
|---|---|---|
magick identify |
-format '%w %h %[channels]' [email protected] |
@2× 時は設計の 2 倍寸法か。 |
magick montage |
cell*.png -tile 4x -geometry +2+2 -background none out.png |
+2+2＝ギャップ仕様、並び＝台帳順。 |
sips |
-g profile [email protected] |
sRGB。本番は再エクスポート優先。 |
M4 で
名前→WxH→sha256 マニフェスト検証し、NG のみ差し戻し。
クロススクリーン・プレビュー検収
実機 Retina で顕在化しやすい。
- Safari／Chrome で代表幅を固定し、デバイスピクセル比 1:1 で見る。
- アイコン枠がデザイン 1× と一致するか（
rem／pxどちらでも可）。 - ライト／ダークで透過縁の変化なし。SS を日付付き保存。
合格：上記クリア＋代表画面で視覚差分なし。
方式比較チェックリスト
| 観点 | スプライト 1 枚 | バラ PNG ＋ビルドバンドル |
|---|---|---|
| リクエスト | 1 本キャッシュ | HTTP/2 でバラも現実的 |
| 差分・座標 | 全体キャッシュ更新しやすい／台帳必須 | ファイル単位差分／コンポ単体で完結しやすい |
| Retina | background-size＝実寸が命 |
srcset が素直 |
FAQ
SVG？ UI アイコンは SVG 可。写真調は PNG。混在はフォルダ分離。
contain？ セル用途は非推奨。実寸 WxHpx を推奨。
自動化は？ PNG QA バッチ にマニフェスト検証を載せる。
PNG スプライト · Retina · リモート M4
固定環境で批処理検収を回す
スプライト座標のブレは Apple Silicon 固定ノードで再現性を上げるのが近道です。ホームでサービス概要を確認し、購入・レンタルからプランを比較、接続手順は ご利用ガイド（SSH／VNC） をご利用ください（いずれもログイン不要で閲覧できます）。料金・スペックの詳細は 料金・ノード、関連記事は 技術インサイト からどうぞ。