koblog

高校生のWEBデザインブログ

画像をCSSで表示させてブログを高速化しよう【Sprite画像】

サムネイル

ブログを書いている以上、記事内の画像が増えてしまうのは仕方がないことだと思います。そのため多くのブロガーは少しでも動作を軽くするためにも画像を軽量化させて使っているのではないでしょうか。しかし軽量化した画像でも、使う枚数が数十枚にも及ぶとブログはどうしても重くなってしまいます。

 

そこで使えるのが、Sprite画像です。今回は画像の表示を簡単に軽くするSprite画像について紹介します。

 

 

Sprite画像とは

通常、画像の表示には下のようなHTMLコードを使って1枚ずつ貼っていきます。

<img src="">

 

それに対してSprite画像では1枚1枚貼っていくのではなく、大きな1枚の画像を貼った上でCSSで範囲を指定して表示させます。1枚あたりの容量が増えるとは言え、複数枚貼る必要がなくなるので最終的にはブログを軽くすることができます。

 

今回紹介していく方法は画像を複数枚貼る場合に有効な手段なので、「1記事に数枚(1、2枚)しか使わない」という人にはあまりおすすめできません。

 

Sprite画像を使うためのツール

Sprite画像を使うにはツールを使い、大きな1枚の画像を作る必要があります。そこでおすすめなのがCSS Sprite Generatorです。

 

CSS Sprite Generatorの使い方

まずはサイトにアクセスします。

https://spritegen.website-performance.org/

 

次に使いたい画像を加工するために「clear」を押してリセットしてから「open」で画像を選びます。

キャプチャー1

 

次にsettingsで自分が使いたいようにカスタマイズします。分からない人は「CSS」にチェックを入れておけば大丈夫です。

キャプチャー2

 

最後に加工された画像をダウンロードします。「download」からダウンロードした画像とCSSを使いたい場所に貼りつけることで画像を表示させることができます。

キャプチャー3

 

最後に

今回紹介した方法はYahoo!など大手のサイトでもよく使われています。今回のような簡単にブログを軽量化できる手を使わないのは勿体無いので、ぜひ使ってみてください。

 

サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

はてなブログのCSSがスマホで反映されないときの対処法

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる