画像のRetina対応に便利なツールやアプリ、ライブラリ色々 | バンクーバーのうぇぶ屋
相変わらずWEB屋にとっては面倒くさいRetina対応…。@2x、@3x、解像度に合わせて毎回画像を作るのも、正直面倒くさいですよね。個人的には何か根本から解決してくれるような仕組みや対策が出てこないかなと、相変わらず他力本願でお待ちしています。 とはいっても、現時点で出来る限りの対応はしなくてはならないので、今日は僕が知っている画像作成時のRetina対応を少し便利にするツールやアプリ（一部使い方？）等をご紹介させて頂ければと思います。 Retini @3xサイズの画像をドラックするだけで、@2x、通常サイズと一瞬でコンバートしてくれるシンプルなアプリケーション。こっちのWEBメディアの運営してる会社で働いてる人が教えてくれました。意外と知ってれば使えるタイミングがありそうなので共有。 Retinaize it ツールというわけじゃ無いかもですが、PhotoshopでRetina解像度の
ブログの記事内画像を楽してRetinaディスプレイに対応させる方法
「Retina な Mac を買ったはいいけど、自分のWebサイトやブログの画像がぼやけて見えるのが気になる」という方は多いと思います。 ロゴ画像であれば Illustrator から SVG 形式で書き出すだけで対応できますが、やっかいなのがブログ本文内の画像です。 メインビジュアルの画像など限られたものであれば、たとえば「image.jpg」という画像の Retina 用として「image@2x.jpg」という縦横2倍の画像を用意することもできると思います。 しかし、ブログ本文内の画像は数も多く、「image@2x.jpg」のようなファイル名の画像もいちいち用意していられないと思います。 そこで、このブログでは jQuery 用の JavaScript を使ってなるべく手間のかからない対応をすることにしました。 このブログでは、WordPress で記事を書くときに［メディアを追加］を
アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌
Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変ですが、チュートリアルをベースにライブラリも出てくれば対応は楽になりそうですね。 それにしても色んなテクニックやディスプレイが出てきたりと、この業界考えることが増えて大変ですね 関連エントリ 3DのソーシャルメディアボタンをCSS3で作成するチュートリアル モダンなサイトを作成するためのCSS3チュートリアル集 テキストを円形に描画するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニ
Retina対応にSVGは本当に使えるのか？
高解像度スクリーンに対応できるのは嬉しいですが、普通の解像度しか持たない端末にも大きなファイルをダウンロードさせなければならないのは、3G回線などの遅い回線での表示パフォーマンスを考慮すると、SVGが適していないケースもありそうです。ただ、サーバ上でGZIP圧縮した場合、平均30%ほどサイズを削減できることを考慮すると、数十KBの差がある場合を除いて、表示パフォーマンスと表示クオリティのバランスもとれてくる気がしています。 ちなみに、Illustratorで「圧縮」を選択してsvgzとして保存すると2,395Bになりました。これならPNG8のファイルサイズにだいぶ近くて良い感じですね。Apacheの設定にSVGZが記述されていれば圧縮版を使えるので、このサイズだったら現実的な気がしてきました。ただ、サーバの設定がうまくいかないのか、Illustratorでの書き出しが悪いのか、SVGZを表
というわけで、レスポンシブ Web デザインを取り入れてみた…
というわけで、何となくですがレスポンシブ Web デザインのことがわかったような気になった 😛 ので、実際に制作していくことに… まず、IE8にも対応させるために css3-mediaqueries.js というスクリプトを読み込むように記述。 [html] [/html] 最近話題になってた気がする Google HTML/CSS Style Guide には [html] [/html] と、書いてあったりするので [html] [/html] のように記述する方がいいのかな… 次に Viewport の記述。 [html] [/html] Viewport をどのように記述するのがベストなのかよくわかっていない。 ただ、user-scalable を 『no』に設定する人もいるようですが、ユーザビリティの観点からするとあまりお勧めできないと思います。 Viewport に関しては、
Retina対応怖くない / ホームページ制作 東京[グリッドネス] / WEBデザイン制作
以前、iPhone4から採用されたRetinaディスプレイに対応すべきかどうかというブログを書きましたが、 ついにスマホだけじゃなくMacbookにもRetinaディスプレイが採用されたようですね。 Retinaディスプレイは通常のディスプレイに比べ、倍以上の高解像度のため、 プレーンテキストがかなり鮮明に見えるが、通常サイズ（表示サイズと画像のサイズが同じ）の画像がぼんやり見えてしまうという難点が。 PCは正直まだ全く高解像度ディスプレイに対応する必要は無いと思いますが、 スマホに関しては無視できない割合が高解像度ディスプレイになっています。 というわけで、 そんなに気が進まなかったけど、現行のiPhone4Sの解像度に対応したスマホサイトを作ってみました。 http://www.smart-ness4.com/i/ ↓iPhone4Sでのキャプチャ画面 対応方法の仕方としては、 ・ht
Towards A Retina Web — Smashing Magazine
Reda Lemeden covers some basic notions that are key to understanding the challenges and constraints of designing for multiple display densities, and invites Web designers and developers to offer a pleasurable viewing user experience regardless of the display they are using. With the recent announcement and release of the Retina Macbook Pro, Apple has brought double-density screens to all of the pr
[CSS]Retinaディスプレイを考慮したCSSスプライトの実装方法
新しいiPad, iPhone4, MacBook Proなどに採用されているRetinaディスプレイを考慮したCSSスプライトの実装方法を紹介します。 Using CSS Sprites to optimize your website for Retina Displays CSSスプライトとは複数のアイテムを一枚の画像に配置し、background-imageで表示する範囲を指定するテクニックです。複数の画像を一枚にまとめることで、トラフィックの軽減につながり、Googleをはじめ多くのサイトで利用されています。 Retinaディスプレイは通常のディスプレイの倍の解像度があり、最適化するためには倍の解像度をもった画像を使用する必要があります。 使用する画像をJavaScriptで記述するのも一つの手ですが、ここではスタイルシートのみで実装する方法を紹介します。 実装例は、4つのそれぞ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - michaelsacca/retinajs-for-compass-sass-less: JavaScript and LESS helpers for rendering high-resolution image variants
http://retinajs.com/
1216彩票-官网平台
Flatis