JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
前回、PNG最適化ツール『punypng』を紹介しましたが、PNG最適化について更に調べたところ『BlastPNG』というソフトウェアを発見。 このソフトは複数の最適化ツール(FLAXC・pngrewrite・OptiPNG・PNGOut・cPNGC)を利用するため、簡単な操作で大きく軽量化することができます。リサイズもできますよ。 BlastPNGの導入・使い方についてはBlastPNGの簡単な使い方を見るとわかりますが、このブログでも説明することにします。 BlastPNGのダウンロードBlastPNGは減色リサイズ回転ツール『Yukari』に同梱されているので、これをダウンロード。そして、実行してファイルを解凍してください(要パスワード)。 1.73205 » リリース 各種最適化ツールのダウンロード前述の通り、このBlastPNGはいくつかの最適化ツールを必要とするので、同梱されて
自己紹介 株式会社EC studio でHTMLコーダーやってます、赤堀巴絵です。 EC studio デザインブログでコーダー向けネタやパフォーマンスアップネタを投稿してます。 Twitterは「tomo_e」でやってるのでよかったらフォローよろしくお願いします! 最近は趣味でイラストを描いたりもしてます。 目次 FireworksとPhotoshopのPNG比較 png8アルファチャンネルでさらに軽量化! FireworksとPhotoshopのJPEG比較 JPEGマスクで見せたい部分をキレイに! まとめ FireworksとPhotoshopのPNG比較 実はPNGで同じ画像を書き出すならFireworksのほうが画像を軽く書き出せます。 チャンクという画像情報以外のその他の情報がPhotoshopのほうが多いからです。 実際、FireworksとPhotoshopのPNG8で書
こんにちは、デザイナーの長谷川です。 今回は僕が普段気をつけている、ちょっと意識するだけでスッキリしたデザインになるレイアウトのコツをご紹介します。 デザイナーじゃない方も、企画書や簡単な UI のモックアップ、Web や雑誌のレイアウトなどに応用できると思いますので、ぜひ参考にしていただければと思います。 1. 上下左右のマージンを均一に Web デザインや UI デザインの要素全てに対して隣り合う要素との間隔やバナー、ボタンなどの外側と内側の要素の上下左右マージンをできるだけ均一にすることで、デザインがスッキリ見えます。 2. 内側のマージンは外側のマージンより狭く レイアウトなど一番外側とコンテンツの間隔より文章のかたまりや画像同士の間隔を小さくします。基本的にコンテンツのまとまりを作るためですので、デザインによっては広く取って区分ける場合もあります。 3. 段落の下は間隔を広く開け
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く