私は最新のCSSの改善について最新ではないので、尋ねる価値があると思いました。
<img>要素は<img src="/url.png" />、高さと幅がautoまたは指定された、として適切に記述されます。私はCSSスプライトの明らかな読み込み速度の利点が好きですが、CSSをすべて書き出すのは嫌いです。<img src="/url.png" Xpx Ypx />X / YがCSSと同様の位置シフトを表す、のような構文はありますか、またはありますbackground-positionか？
HTMLで拡大縮小されるため、画像のサイズに関しては不安定になることを理解しています（背景画像のあるdivのようにトリミングするのとは対照的です）。
これは可能ですか、それとも私はただ怠惰ですか？
それが実現することを想像することはできません。たとえそれが実現したとしても、何年もの間、通常のクロスブラウザの問題が発生するでしょう。あなたのためにCSS/座標を解決することができる多くのサービスがあります-例えばSpriteCow。
現時点では、そのようなHTMLには何もありません。
1ピクセルの透明なgifまたはpngが手元にある場合は、画像タグにインラインCSSを使用できます。
<img style="background: url(/url.png) -Xpx -Ypx;" src="/1pix.gif" />
ただし、スプライトの背景が表示されるように、画像要素の幅と高さを設定する必要があります。
<img>透明な画像ファイルをデータURLとしてタグに直接含めることで、透明な画像ファイルの必要性を回避できます。
<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAABlBMVEX///8AAABVwtN%2BAAAAAXRS%0ATlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII%3D%0A">
<img style="background: url(/url.png) -Xpx -Ypx;" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw%3D%3D%0A">
（http://jsfiddle.net/r727j/1/を参照）
しかし、明らかに私たちはここでかなり醜い領域に入っています。（そして、データURLがIE 6で機能することを誓うことはできませんでした。）
スプライト自体は通常、多くの小さな画像を1つの大きな画像に結合するために使用されます。これは、貴重な読み込み時間と帯域幅を節約するだけでなく、サイト構造をクリーンで管理しやすい状態に保つためにも行われます。
例
{background-position:0px -143px;} /* what ever*/