Responsive images todayYouTube↗  IA↗(long shot)
Science & Technology  14.6K views 179 likes 4 dislikes   25 Jun 2014
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
피트 르파주: 안녕하세요.
ピート・レページこんにちは
저는 피트이며 Google에서 디벨로퍼 어드보케로 활동하고 있습니다.
Googleのデベロッパー アドボケートのピートです。
이미지는 거의 모든 웹 페이지에서 매우 중요한 역할을 하며
画像は、ほとんどのウェブ ページに欠かせないもので、
다운로드되는 바이트 중 종종 가장 많은 수를 차지합니다.
ダウンロードされたバイト数の ほとんどを占めています。
지금부터 너무 힘들이지 않아도 페이지에서
あまり手間をかけずに画像を ホームページで公開して
적합한 장치에 적합한 이미지를 제공하기 위해 오늘날
適切なデバイスで表示 するための、今すぐ使える
사용할 수 있는 몇 가지 기법을 소개하려고 합니다.
テクニックを紹介しましょう。
먼저, CSS를 통해 제공되는 배경 이미지를
まずはCSSで記述 された背景画像について
살펴보겠습니다.
見てみましょう。
요즘 쉽게 이용할 수 있는 한 가지 기법은
今すぐ簡単に 使えるテクニックの1つは
스크린 해상도, 뷰포트 크기 등에 기초한
背景プロパティとメディア クエリを組み合せて、
조건부 이미지 로딩을 위한 미디어 쿼리와 함께
画面解像度、ビューポート サイズなどに基づき
배경 프로퍼티를 결합하여 사용하는 것입니다.
条件付きの画像読み込みを 実行するというものです。
앞의 예에서 브라우저 폭이
先ほどの例では、ブラウザの幅が
500픽셀 미만인 경우 폰의 이미지만
500ピクセル未満の場合、 電話の画像のみを
사용되었습니다.
使いました。
그런데 창이 500픽셀 이상이면, 미디어 쿼리가 효과를
けれども、ウィンドウが 500ピクセルを超えると
발휘하면서 뉴욕시 이미지가 배경에
メディアクエリが作動して、 ニューヨーク市の画像が
추가됩니다.
背景に追加されました。
그리고 폰 이미지를 보여주는 대신, 태블릿 이미지를
また、電話の画像を 表示するのではなく
보여줍니다.
タブレットの画像が現れました。
미디어 쿼리는 또한 장치 픽셀 비율에 기초해
メディアクエリでデバイス ピクセル比に基づいた
스타일을 적용할 수 있으므로 1x 및 2x 디스플레이에
ルールを適用して、 2xと1xのディスプレイに
각기 다른 이미지를 표시하는 것이 가능합니다.
それぞれ別の画像を 指定することもできます。
Chrome, Firefox, Opera는 모두 표준 최소 해상도 2dppx
ChromeやFirefox、Operaは 標準のmin-resolution 2dppx
구문을 지원합니다.
という記述に対応しています。
10배 더 빠르다는 말입니다.
早口言葉みたいでしょう。
Safari와 Android 브라우저는 dppx 유닛이 없는
SafariとAndroidブラウザでは dppx単位を付けない
이전 벤더 접두어 구문을 필요로 합니다.
古いベンダープレフィックスの 構文を使用する必要があります。
명심하십시오. 이러한 스타일은 장치가
これらのスタイルはデバイスが メディアクエリに一致する
미디어 쿼리에 매칭될 때에만 로드됩니다.
場合のみ、読み込まれる ことに注意してください。
따라서, 폴백을 항상 제공해야 합니다.
ですから常に代替となる ものを指定する必要があります。
그러면 이미지가 항상 로드됩니다.
これにより、画像が常に 読み込まれるようになります。
최근에 Chrome과 Safari는 새로운 CSS image-set 함수를 공개했고
最近、ChromeとSafariが CSSのimage-setへの対応を
이를 통해 여러 이미지 파일을 제공하기가 쉬워졌습니다.
開始、複数の画像ファイルの 指定が可能になりました。
그 결과 브라우저가 장치 특징에 따라 최상의 이미지를
これにより、ブラウザで デバイス特性に応じた最適な
선택할 수 있습니다. 예를 들어, 2x 디스플레이에는
画像を選択できます。例えば、 ディスプレイが2xの場合は
2x 이미지를, 1x 디스플레이에는 1x 이미지를 선택할 수 있습니다.
2xの画像を、1xの場合は 1xの画像を使用できます。
구문이 아주 간편합니다.
構文は極めて単純です。
URL 문자열과 이미지 해상도의 순서로
imageを宣言したカンマ 区切りのリストと
구성된, 쉼표로 구분된 이미지 선언문
それを構成するURLタグ、 そしてその後ろに続く
목록입니다.
画像解像度です。
image-set 함수에 대한 지원은
image-setへの対応は まだ始まったばかりで、
아직 생소해서 당분간은
しばらくの間はWebKitのベンダー
-webKit 벤더 접두어가 필요합니다.
プレフィックスが必要です。
정확한 이미지를 로드할 뿐 아니라, 브라우저는
適切な画像を読み込む ほかに、ブラウザでは
이에 따라 크기를 조정합니다.
スケーリングも適宜行われます。
브라우저는 2x 이미지가 1x 이미지보다 2배
ブラウザでは2xの画像 サイズは1xの画像の
더 크다고 간주하고 스크린에 적합한 크기로 표시되도록
2 倍大きいと仮定し、2xの 画像を係数2でスケールダウンして、
2x 이미지의 크기를 조정합니다.
ページ上で同じ サイズに見えるようにします。
이미지와 마크업은 아직 옵션이 많지
画像やマークアップの オプションはまだそれほど多くは
않습니다.
ありません。
picture 엘리먼트가 곧 나오겠지만 아직 공개되지는 않았습니다.
picture要素は準備中で 対応は始まっていません。
Safari와 Chrome에서는 새로운 srcset 속성을 사용할 수 있습니다.
SafariやChromeでは新しい srcset属性を使用できます。
srcset 속성은 이미지 엘리먼트의 동작을 향상시켜서
srcset属性はimage要素の 動作を拡張して、
각기 다른 장치 특징에 대해 여러 개의
異なるデバイス特性に 複数の画像ファイルを
이미지 파일을 제공하기 쉽게 해줍니다.
簡単に配信できるようにします。
구문 리소스 세트는 CSS image-set 함수와
リソース設定の構文はほぼ CSSのimage-setと同じで、
거의 똑같아서 쉼표로 구분된 이미지
URL以降に画像解像度が続く
선언문 목록을 받아들입니다. 이 목록은 URL 문자열과
文字列で構成される、 カンマ区切りで指定された
이미지 해상도의 순서로 구성됩니다.
画像のリストを使っています。
srcset는 새로운 속성을 단순히 이미지 엘리먼트에 더하기 때문에
srcsetは画像要素に新しい属性 を追加するだけだからです。
브라우저가 srcset를 지원하는 방법을 모르면
ブラウザがsrcset要素に 対応していない場合は、
그냥 무시해버리고 소스 속성을 사용합니다.
あっさりこれを無視して source要素を使います。
이 속성도 폴리필을 구축하기 쉽게 해주고
これにより、polyfillの 構築も簡単になり
이용할 것도 많습니다.
多数の利用が可能です。
어떤 경우에는 이미지가 CSS나
場合によっては、画像は CSSや他のブラウザ機能で
다른 브라우저 기능으로 대체될 수 있습니다.
置き換えられることがあります。
둥근 모퉁이, 그라데이션, 텍스트 그림자, 상자 그림자,
角丸、グラデーション、 文字やボックスの影付け、
심지어 반사까지도 전부 CSS로 작업할 수 있습니다.
リフレクションエフェクト などが、画像を
이미지를 다운로드할 필요 없이 말이죠.
ダウンロードしなくても、 すべてCSSで実行できます。
누군가 마침내 16이나 20 또는 30 등의
また、16、20、30型のディスプレイ、
새로운 디스플레이를 출시하더라도
あるいはどんな新型の ディスプレイが登場しても
또 다른 새로운 이미지 파일을 생성할 필요가 없습니다.
新たな画像ファイルを 作成する必要はありません。
반응형 이미지를 사이트에 추가하는 일은 쉽습니다.
レスポンシブな画像の サイトへの追加は簡単です。
배경 이미지에 대해 미디어 쿼리 또는
背景画像の場合は、メディア クエリや対応が始まった
최근에 출시된 image-set 함수를 이용할 수 있는
ばかりのimage-set 関数の使用方法を
방법을 소개해드렸습니다.
ご紹介しました。
이미지와 마크업의 경우에 picture가 조만간 공개될 예정입니다.
image要素やマーク アップの画像は準備中です。
하지만 지금 사용할 수 있는 것은 srcset 속성입니다.
ただしここでは、srcset 属性を使用できます。
조만간 더 많은 기능이 공개될 것입니다.
その他にも多くの 機能が登場する予定です。
반응형 이미지에 자세히 알고 싶다면
レスポンシブな画像に 関する詳細は
Web Fundamentals 사이트에서 이미지 섹션을 확인해보시거나
Web Fundamentalsサイトの 画像セクションを参照するか
아니면 그냥 스크린에 나와 있는 링크를 클릭하십시오.
画面上のリンクを クリックして下さい。
예.
そうです。
바로 이겁니다.
そのリンクです。
좋네요.
完璧ですね。
시청해주셔서 감사합니다.
ご試聴ありがとうございました。
이제 가서 멋진 것을 구축해보세요.
さあ、今すぐ始めましょう！
Similar videos:

Building sites for the multi-device web
Google for Developers
35.7K views 138 likes 4 dislikes 25 Jun 201492% match

Using the PageSpeed API
Google for Developers
10.3K views 57 likes 5 dislikes 25 Jun 201485% match

Fabulous Forms for the multi-device web
Google for Developers
25.6K views 115 likes 44 dislikes 25 Jun 201475% match

Using srcset for responsive images
Google for Developers
21K views 136 likes 10 dislikes 25 Sep 201460% match

The picture element for art direction
Google for Developers
14.6K views 141 likes 2 dislikes 25 Sep 201460% match

The ServiceWorker: The network layer is yours to own
Google for Developers
67.4K views 1.5K likes 18 dislikes 25 Jun 201457% match

Silky smooth Web Animations
Google for Developers
36.7K views 450 likes 6 dislikes 18 Jun 201457% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201443% match

Componentize the Web
Google for Developers
28.1K views 231 likes 12 dislikes 25 Jun 201439% match


Getting Your PageSpeed Score Up
Google for Developers
95.2K views 1K likes 30 dislikes 25 Jun 201438% match

Faster Loading Images with WebP
Google for Developers
24.6K views 133 likes 13 dislikes 25 Jun 201438% match

Getting your events into the Knowledge Graph
Google for Developers
25.5K views 183 likes 8 dislikes 25 Jun 201438% match

Android Work
Google for Developers
38.5K views 141 likes 6 dislikes 25 Jun 201435% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201433% match


Unleash the power of Kiosk Apps
Google for Developers
64.6K views 237 likes 14 dislikes 16 Jun 201432% match

Fetch API (100 Days of Google Dev)
Google for Developers
31.5K views 642 likes 12 dislikes 05 Jul 201532% match

The new Gmail API
Google for Developers
119.7K views 434 likes 11 dislikes 25 Jun 201432% match

Designing for Google Cast
Google for Developers
28K views 69 likes 2 dislikes 25 Jun 201432% match

Bluetooth Low Energy
Google for Developers
37.7K views 212 likes 6 dislikes 25 Jun 201431% match

Polymer: Interacting with Google Services using nothing but HTML
Google for Developers
64K views 665 likes 7 dislikes 17 Jun 201431% match

Activity Transitions
Google for Developers
85.1K views 541 likes 25 dislikes 25 Jun 201431% match

Using the Android Job Scheduler
Google for Developers
43.1K views 300 likes 57 dislikes 25 Jun 201430% match

ExoPlayer: Adaptive video streaming on Android
Google for Developers
77.5K views 388 likes 31 dislikes 25 Jun 201428% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201428% match

Creating a style guide for...Everything!
Google for Developers
30.6K views 208 likes 52 dislikes 24 Jun 201428% match

Google Cloud Messaging
Google for Developers
33.1K views 139 likes 6 dislikes 25 Jun 201428% match

DevBytes: Notifications in the Android L Developer Preview
Google for Developers
37.2K views 357 likes 17 dislikes 26 Aug 201428% match

DesignBytes: Material Design in the Google I/O App
Google for Developers
139.8K views 1.2K likes 21 dislikes 05 Aug 201428% match

Perf Primer : CPU, GPU and your Android game
Google for Developers
31.3K views 334 likes 13 dislikes 12 Jun 201427% match

From Holo to Material
Google for Developers
64.8K views 792 likes 20 dislikes 25 Jun 201426% match


Settings Privacy About Contact Donate