レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA

2016/09/26 500 users CSS ICS MEDIA タブレットユーザー 最適化 新機能

日本のwebサイトにおけるスマートフォン・タブレットユーザーのシェアは32%に達し（参照「 StatCounter 」)、今やレスポンシブなwebデザインなどのスマートフォンを意識した設計が必須です。しかし、レスポンシブなレイアウトにおいて画像を取り扱う場合、最適な画像サイズ、最適な画像の見せ方を実現するには、複雑なCSS・JavaScriptコードが必要でした。 HTML 5.1では、このような... 続きを読む

面倒なレスポンシブイメージの画像作成を自動化してくれる神ツールとブレイクポイントの考え方 – Rriver

2016/10/17 216 users pngquant Rriver 手動 ウェブサイト ツール

レスポンシブイメージ、使ってますか？ ウェブサイトの表示パフォーマンスの最適化をする際に、一番手っ取り早いのが画像の最適化です。そこで、 イメージオプティム とか Mac Automatorとpngquant などのツールを駆使して一生懸命に画像自体を最適化したり レスポンシブイメージ を使って画像を出し分けたりするわけですけども、特にレスポンシブイメージは手動でやるのは正直言ってかなり面倒です。... 続きを読む

レスポンシブイメージのネイティブサポート - HTML5 Rocks

2014/09/30 130 users ネイティブサポート HTML5 Rocks

Your browser may not support the functionality in this article. <picture> 要素とは <picture> 要素は、画像リソースの読み込みを宣言的に行う仕組みです。Web 開発者はこの要素によって、CSS や JavaScript によるハックなしに、レスポンシブデザインで画像を扱えるようになります。また、画像リソースの読み込み... 続きを読む