今日は、CSSを使ってサイトを高速化するテクニック「CSS Sprites（CSSスプライト）」についてのお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。実はCSSを上手に使うことによっても、サイトの高速化を行うことができます。しかも、かなりの効果が期待できるのです。 CSS Spritesとは？ 通常、ウェブページを制作する場合、デザインファイル（psdやpngなどの画像）をスライスし、HTMLのimg要素として埋め込んだり、CSSの背景画像として指定していることと思います。 それらの画像を一つにまとめ、１度の読み込みでのリクエスト数を減らすテクニックのことを「CSS Sprites」と呼びます。 このテクニックは、以前からマウスオーバーメニューを実現する際にも使われていたものでもありま
開発裏話1、開発裏話2、と紆余曲折を経てリリースした Twister Alternative ですが、今回はgihyo.jp の連載記事にも関連し、デザイン面からみたサイトの高速化のお話をさせていただきます。 サイトの高速化というと、プログラムの最適化を行ったり、サーバのチューニングを行ったりというイメージがあるかと思います。 デザイン面でサイトの高速化というと不思議に思われる方もいらっしゃるのではないでしょうか。 Google App Engine のリクエスト制限 Twister では当初、Google App Engine で動いていました。Google App Engine ではリクエスト数に制限があるので、1回のページ読み込み時に発生するリクエストは最小限にしなければなりません。サイトの至るところで使われている一つ一つの画像はリクエストを増やしてしまう原因となります。 そこで
複数の画像を一枚にまとめて、スタイルシートで背景画像として指定するCSS Spritesに利用できる画像置換の実装例の紹介です。 画像置換する際には、CSSオフ時・画像オフ時・印刷時・音声ブラウザ対応・空タグ使用などを考慮する必要があります。 備考 コードは、参考サイトからサイズ指定などを変更しています。 画像置換元は、全てH3要素になっています。 H3は、テキスト(見出しのテキスト)もしくは画像(印刷用の見出し画像)です。 ブラウザに「背景画像」が表示されていれば、期待通りの動作です。 使用している画像は、次の通りです。 背景画像 印刷用の見出し画像 1pxの透過画像 名称は、Revised Image Replacementを参考にしています。 サンプル:01 -Classic FIR デモページ <textarea name="code" class="html" cols="60"
![[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ | コリス](https://cdn-ak-scissors.b.st-hatena.com/image/square/bc54860ba06deaa45382cf2bddc929515def0354/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fshared%2Flogo-2014050501-en.png)
Pok�mon Generation 5 animated sprites from Pok�mon Black 2 & White 2
A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that
SpritePad is your free and easy-to-use web app for creating CSS spritemaps. It only needs seconds: Drag & drop your images onto the grid and have it immediately available as one PNG + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles, no long-winded setups, SpritePad makes creating spritemaps as easy as writing your next e-mail. What SpritePad can do for you We are Kiss We’re
CSS Spritesのすべて - 技術解説、採用事例、ツールリンク | エンタープライズ | マイコミジャーナル
Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY. Webページ高速化テクニックのひとつにCSS Spritesがある。これはWebページで使われる画像を1枚のマスター画像にまとめて使おうというもの。画像の表示にはCSSの機能が使われる。すでに多くのサイトで採用されており、先日、Yahoo!ニュースでも同テクニックが採用された旨がブログで報告された。簡単で効果的な方法だ。 アイコンから写真データまでWebページには複数の画像が使われていることが多い。画像ごとにHTTPリクエストが発生するため、画像が増えればそれだけHTTPリクエストが発生することになる。同時読み込みには制限があるため、画像が増えるごとに表示が遅くなるという状況になる。この問題を解決するテ
cssスプライトは複数の画像を 1つの画像にして、容量を軽減 する手法ですが、このcssスプ ライト用の画像を簡単に作成 出来るジェネレーターがありま したのでご紹介します。 cssスプライトは複数の画像を 1つの画像にして、容量を軽減 する手法ですが、このcssスプ ライト用の画像を簡単に作成 出来るジェネレーターがありま したのでご紹介します。 以前MOONGIFTさんで記事になったジェネレーターのようにzipで多くの画像にも対応しているようなものではなく、2~3枚の画像から作るようなシンプルな物になります。簡単なやつをサクッと作りたい、という時に良さそうです。
【ハウツー】CSS Spritesの必要素材をサクッと生成! お手軽ブックマークレットSpriteMe (1) まずは使ってみよう | エンタープライズ | マイコミジャーナル
ブックマークレットで手軽にスプライト画像/CSSコード生成 Steve Souders氏は14日(米国時間)、自身のブログ上でSpriteMeを公開したとアナウンスした。SpriteMeはCSS Spritesを使うにあたりcoolRunningsを使用して必要なスプライト画像を生成、および表示のためのCSSコードを出力してくれるWebサイト。同Webサイトにはブックマークレットが用意されており、ユーザはブックマークレットを任意のWebサイトで実行するだけで簡単にスプライト画像と必要なCSSコードを入手できる。 SpriteMeの動作の流れはおもに次のとおり(Demoより抜粋)。 CSSより背景画像(background-image)が指定されている箇所を抽出 抽出した画像の幅や高さをもとに、グルーピングをおこなう グループごとにスプライト画像を生成 生成したスプライト画像を現在表示してい
WebサイトやWebアプリケーションの高速化のため、CSS Spritesを採用するサイトが増えてきています。 CSS Spritesは、ページで使うアイコンやロゴ、背景など、画像ファイルを大きな画像の塊にまとめ、CSS側でレイアウトを制御するテクニックです。複数の画像をまとめるため、HTTPリクエスト数を減らしことができ、高速化や負荷軽減につながるという利点があります。また、:hoverや:activeなどと組み合わせることにより、動的表現をJavaScriptなしで実現できることも、CSS Spritesが好まれている理由のひとつです。 一方で、CSSの画像置換に関連する問題や、画像の作成や配置にかかる手間など、懸念事項もあります。そんな中、Mozillaの開発者であるVladimir Vukićevićが、「メモリ消費量が増えてしまう」という問題について語っています。 To Spri
Skrillex - Scary Monsters And Nice Sprites (Official Audio)
Skrillex - Scary Monsters And Nice Sprites (Official Audio) Watch the official audio video for "Scary Monsters And Nice Sprites" by Skrillex From the "Scary Monsters And Nice Sprites" EP available for purchase here: iTunes: https://itunes.apple.com/us/album/scary-monsters-and-nice-sprites/id409001929 Beatport: https://www.beatport.com/release/scary-monsters-and-nice-sprites-ep/936181 Listen o
What are css sprites? Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.)
CSS Sprites: What They Are, Why They're Cool, and How To Use Them | CSS-Tricks
That adds up to a total of 14.38KB to load the three images. Putting the three images into a single file weighs in at 16.1KB. The sprite ends up being 1.72KB larger than the three separate images. This isn’t a big difference, but there needs to be a good reason to accept this larger file… and there is! While the total image size (sometimes) goes up with sprites, several images are loaded with a si
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials — Smashing Magazine
CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time t
こんばんは、お弁当に入っている梅干しは最後に食べるishidaです。 暑い時期になるといつもは全然飲まないのに、やたら炭酸飲料が飲みたくなります。 特に好きなのがスプライト。ブランド名の語源は、英語のSpirit（元気の意）とSprite（妖精）に由来しているみたいです。 といった感じで無理やり話題につなごうとしていますが…スプライトと言えばCSS Sprites。 背景画像としてCSS Spritesを使うパターンは多いと思いますが、背景じゃなく通常の画像でも CSS Spritesみたいなことができないかな？と思ったので、今回はそれをご紹介。 画像を用意 まずは、以下のような画像を作ります。 sprite_icon.gif 画像のサイズはきりがイイほうが設定しやすいので 90x90 としています。 1つのアイコンが 30x30 ってことです。 サンプル 以下がサンプルです。 サンプル0
PNG vs SVG for sprites
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
Compass improves the Sass experience by providing useful mixins, functions, and more. You will also learn how to make CSS sprites with it in this episode.
Back when video games were still fun (we’re talking about the 8-bit glory days here), graphics were a much simpler matter by necessity. Bitmapped 2-dimensional character data and background scenery was individually drawn, much like today’s resurgent pixel art. Hundreds and later thousands of small graphics called sprites were the building blocks for all things visual in a game. As game complexity
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system. First let’s cover how it works.
Blinds: jQuery Slideshow using CSS sprites - little web things
1 2 3 4 5 6 7 Features Smooth animated transition Customizable sprite grid Customizable animation ochestration Multiple instances on the same webpage jQuery compatible (plugin) Unobtrusive javascript Compatibility Works great on the following browsers: Firefox 3.5 IE 8 IE 7 IE 6 (imagine my surprise!) Opera 10 Chrome 4 Safari 4 Download jquery.blinds-0.9.js Working example Back to project's post U
How to automatically generate CSS sprites with Sass and Compass | Code Chewing
In this tutorial you will learn how to create CSS sprites automatically, using Sass and Compass! No more going back and forth into Photoshop and figuring out the position of each image, then adjusting your stylesheet manually. This tutorial is aimed at Windows users, but the principles are all the same. For this tutorial, I’ll presume you have Sass and Compass running inside your website developme
Introduction Yes, I know that there are thousands of tutorials regarding rounded corners with CSS, but anyway, I wanted to show you this way too. Hopefully, you will find it useful. It's important to point out that this tutorial is quite advanced regarding CSS, but I'll try to make it as simple as I can for CSS begginers. CSS3 is still not fully here, so until then, let's keep our work W3C v
GitHub - awslabs/aws-icons-for-plantuml: PlantUML sprites, macros, and other includes for Amazon Web Services services and resources
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - milo-minderbinder/AWS-PlantUML: PlantUML sprites, macros, and other includes for AWS components.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development sphere as early as 2003. I’m pretty confident that I won’t surprise anyone here by saying that CSS sprites have been around for quite a while now, rearing their somewhat controversial heads in the Web development
A pocket-sized guide to using SVG icon sprites in web apps
There are many ways to handle icons — over the last few years we went through PNG sprite maps, icon fonts, and more recently, SVG embeds. Taking it one step further, let me show you a simple, yet powerful, vector-based technique. Start with exporting each of the icons using the same artboard size (e.g: 128x128):
Quick Sprites CSS sprite sheet editor for macOS An important tool for every web designer Quick Sprites simplifies the creation and maintenance of CSS sprite sheets that enable you to optimize your websites. Improve your visitors’ experience A sprite sheet is a single image that combines many smaller ones. CSS sprites help reduce the number of HTTP requests that the browser needs to do in order to
Hi, I’m Nico Hagenburger I enjoy designing clean, simple websites and developing web applications in Ruby on Rails. Lemonade is deprecated from now on. I’m working on Compass Sprites with Chris Eppstein and Scott Davis from now on. Lemonade’s goal as a sprite generator is to be incredible easy to use, so you’ll use ist for every project—just because there’s no overhead. It needs no configuration,
前段 Sass始めました。くそ便利ですねこれ。 したいこと 以下のような幅の違う横長なナビゲーションがあると想定して、これをCSS Spritesを使ってなるべく簡単にCSSを書きたい。 CSS Spritesは手計算でやるとくそメンドイので。 ┏━━━┳━━━━━┳━┳━━┳━━━┓ ┗━━━┻━━━━━┻━┻━━┻━━━┛ 前提1 Sprites画像 ナビゲーションはホバー時に画像が置換される。 そのSprites画像は以下のように上段に通常のナビゲーションの画像、下段にホバー時のナビゲーションの画像がくっついていると仮定する。 ┏━━━┳━━━━━┳━┳━━┳━━━┓ ┣━━━╋━━━━━╋━╋━━╋━━━┫ ┗━━━┻━━━━━┻━┻━━┻━━━┛ 前提2 HTML 以下のようなHTMLがある仮定する。 <!DOCTYPE html> <html> <head> <meta cha
LearningjQuery.com has a pretty cool presentation of the dates of their blog posts. Check it: The typeface and the year being vertical should tip you off right away that images are being used to accomplish this. But also note that the date information is presented as text, as it should be, in the markup: A quick peak in Firebug reveals the beautiful simplicity! Sprites at Their Best Hopefully it’s
Would you like to create a new example? Head over to the examples repo on GitHub.
かんたんアイコンフォント作成術。そろそろ、WEBデザイナもフォントをDIYする時代です。 http://atnd.org/events/38389
CSS Sprites is a technique where you use a background-image, a set width and height, and adjust the background-position to display only the portion you need to show. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times. The “sprite” is the single, combined graphic. We can use this same theory, only instead of usi
GitHub - jorgebastida/glue: Glue is a simple command line tool to generate CSS sprites
Glue Glue is a simple command line tool to generate sprites: $ glue source output The latest documentation is available at: http://glue.readthedocs.org Installation instructions: http://glue.readthedocs.org/en/latest/installation.html Glue-users mailing list: https://groups.google.com/forum/#!forum/glue-users Features Automatic Sprite (Image + Metadata) creation including: css (less, scss) cocos2d
“TWINKLE STAR SPRITES ”, a competitive 2D top-down view scrolling shooter released on NEOGEO MVS in 1996, departs for new adventures on the Steam gaming platform!Master your shots, and aim for the magical Twinkle Star”!
Sprites INC
» Members: 22,396 » Latest member: Ana76P0454 » Forum threads: 1,788 » Forum posts: 34,229 Full Statistics
Thanks for stopping by! These are perler bead crafts I've made over the past couple of years. I am not in the business of selling these. Beads were arranged on special interlocking 29x29-bead square pegboards, using nearly every color available from Perler (the big buckets don't include every shade), both of which are available through eBay resellers. The pieces range in size from 3" to nearly a s
I recently had to work on a project for iOS that required that sound play on particular actions being performed. The problem is that iOS and HTML5 has been seriously oversold by Apple and the devices are pretty poor in comparison to the desktop. Audio and video are particularly poor, so to solve my problem I used an audio sprite, a technique that was similar to CSS sprites, just for audio. READER
CSS Sprites w/out Using Background Images | HTML/CSS Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Latest Word » Tutorials » CSS Sprites w/out Using Background Images Jun.3.2010 CSS Sprites w/out Using Background Images Tags: Beginner Recently I was working on a client site and he wanted a hover effect on some of the affiliate banner ads. The first approach in my mind was to do the typical CSS Sprites but this requires CSS work which my client did not know much of. I wanted to give him the acce
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
独学で極める “Webデザイン”の技と心：第10回 CSS Spritesでサイトを高速化｜gihyo.jp … 技術評論社
CSS Sprites化と画像減色でサイトを高速化 - エスカフラーチェLLC
[CSS]CSS Spritesに利用できる画像置換の実装例いろいろ | コリス
Pok�mon Black 2 & White 2 animated sprites
CSS Sprites2 – It’s JavaScript Time
SpritePad - Create and edit css sprites
手軽にcssスプライトを作れるシンプルなWebサービス・css sprites generator
CSS Spritesでメモリ消費量が増える！？ | Web標準Blog | ミツエーリンクス
CSS Sprites Generator Tool | Toptal®
CSS Sprites風なことをインライン画像でやってみた | バシャログ。
#334 Compass & CSS Sprites - RailsCasts
CSS Sprites: Image Slicing’s Kiss of Death
Ken's Street Fighter II with animated sprites
Icon System With SVG Sprites | CSS-Tricks
CSS Sprites + Rounded corners | Css Globe
CSS Sprites Revisited — Smashing Magazine
Quick Sprites - CSS sprite sheet editor for macOS
Generate CSS Sprites on the Fly with Lemonade
SassでCSS Spritesをなるべく簡単に書きたい - あと味
Date Display Technique with Sprites | CSS-Tricks
star-warp-sprites.js
No more CSS Sprites!
CSS Sprites with Inline Images | CSS-Tricks
Save 70% on TWINKLE STAR SPRITES on Steam
Fogie's Perler Bead Video Game Sprites | Flickr
Audio Sprites (and fixes for iOS)