なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
25%ファイルサイズをカットできる画像フォーマット「WebP」の可能性
先日のCloudFourのレスポンシブ・イメージについての記事にWebPのことが書かれていて興味がわいたので、実際に使えるものなのか調べてみました。 このWebP（ウェッピーと読む）の最大のメリットはJPEGと比べて25%近くファイルサイズを小さくできるところです。ウェブページを構成するファイルの多くを占める画像ファイルのサイズを25%カットできたら、表示パフォーマンスをかなり向上できます。しかし、一つの大きな問題としてiOSでのサポートがありません。そのため、結論から言ってしまうと、モバイル端末からのアクセス・シェアでAndroidユーザ（しかも4.0以降）が圧倒的に多ければWebPを利用する価値はありますが、逆にiOSユーザが多い場合は現段階ではメリットが考えられません。 ただ、Android端末のシェアは拡大していますし、万が一iOS SafariでWebPが対応されることになれば状
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
