diff options
Diffstat (limited to 'files/id/learn/html/multimedia_and_embedding')
3 files changed, 0 insertions, 689 deletions
diff --git a/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html deleted file mode 100644 index 1d180398fe..0000000000 --- a/files/id/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html +++ /dev/null @@ -1,363 +0,0 @@ ---- -title: Adding vector graphics to the Web -slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -tags: - - Gambar - - Grafik - - Pemula - - Raster - - SVG - - Vektor - - belajar - - iframe - - img -translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web -original_slug: Learn/HTML/Multimedia_dan_embedding/Adding_vector_graphics_to_the_Web ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<div class="summary"> -<p>Grafik vektor sangat berguna dalam banyak keadaan — mereka memiliki ukuran file kecil dan sangat skalabel, sehingga mereka tidak terlalu besar ketika diperbesar atau meledak hingga ukuran besar. Dalam artikel ini kami akan menunjukkan kepada Anda bagaimana memasukkan satu di halaman web Anda.</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Anda harus tahu <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> dan bagaimana caranya <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">insert an image into your document</a>.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>Pelajari cara menyematkan gambar SVG (vektor) ke halaman web.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note</strong>: Artikel ini tidak bermaksud mengajarkan Anda SVG; hanya apa itu, dan bagaimana menambahkannya ke halaman web.</p> -</div> - -<h2 id="Apa_itu_grafik_vektor">Apa itu grafik vektor?</h2> - -<p>Di web, Anda akan bekerja dengan dua jenis gambar — <strong>gambar raster</strong>, dan <strong>gambar vektor</strong>:</p> - -<ul> - <li><strong>Gambar raster</strong> didefinisikan menggunakan kisi-kisi piksel - file gambar raster berisi informasi yang menunjukkan dengan tepat di mana setiap piksel ditempatkan, dan persis apa warna yang seharusnya. Popular web raster formats include Bitmap (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li> - <li><strong>Gambar vektor</strong> didefinisikan menggunakan algoritme - file gambar vektor berisi definisi bentuk dan jalur yang dapat digunakan komputer untuk mengetahui seperti apa gambar itu ketika ditampilkan di layar. The {{glossary("SVG")}} format memungkinkan kita membuat grafik vektor yang kuat untuk digunakan di Web.</li> -</ul> - -<p>Untuk memberi Anda gambaran tentang perbedaan antara keduanya, mari kita lihat sebuah contoh. Anda dapat menemukan contoh ini langsung di repo Github kami sebagai <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — itu menunjukkan dua gambar yang tampaknya identik berdampingan, dari bintang merah dengan bayangan hitam. Perbedaannya adalah yang kiri adalah PNG, dan yang kanan adalah gambar SVG.</p> - -<p>Perbedaannya menjadi jelas ketika Anda memperbesar halaman - gambar PNG menjadi pixelated saat Anda memperbesar karena berisi informasi di mana masing-masing piksel harus (dan apa warna). Ketika diperbesar, setiap piksel hanya bertambah ukurannya untuk mengisi beberapa piksel pada layar, sehingga gambar mulai tampak ganjil. Namun gambar vektor terus terlihat bagus dan segar, karena berapapun ukurannya, algoritma tersebut digunakan untuk mencari tahu bentuk-bentuk pada gambar, dengan nilai-nilai yang hanya diskalakan karena semakin besar.</p> - -<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> - -<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> - -<div class="note"> -<p><strong>Note</strong>: Gambar-gambar di atas sebenarnya semua PNG - dengan bintang kiri di setiap kasus mewakili gambar raster, dan bintang kanan mewakili gambar vektor. Again, go to the <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> demo for a real example!</p> -</div> - -<p>Selain itu, file gambar vektor jauh lebih ringan daripada raster mereka, karena mereka hanya perlu memegang beberapa algoritma, daripada informasi tentang setiap pixel dalam gambar secara individual.</p> - -<h2 id="What_is_SVG">What is SVG?</h2> - -<p><a href="/en-US/docs/Web/SVG">SVG</a> is an {{glossary("XML")}}-based bahasa untuk menggambarkan gambar vektor. Ini pada dasarnya markup, seperti HTML, kecuali bahwa Anda memiliki banyak elemen berbeda untuk menentukan bentuk yang ingin Anda tampilkan di gambar Anda, dan efek yang ingin Anda terapkan pada bentuk-bentuk itu. SVG adalah untuk menandai grafik, bukan konten. Di ujung paling sederhana dari spektrum, Anda memiliki elemen untuk membuat bentuk sederhana, seperti {{svgelement("circle")}} dan {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)</p> - -<p>Sebagai contoh sederhana, kode berikut ini membuat lingkaran dan persegi panjang:</p> - -<pre class="brush: html"><svg version="1.1" - baseProfile="full" - width="300" height="200" - xmlns="http://www.w3.org/2000/svg"> - <rect width="100%" height="100%" fill="black" /> - <circle cx="150" cy="100" r="90" fill="blue" /> -</svg></pre> - -<p>This creates the following output:</p> - -<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>Dari contoh di atas, Anda mungkin mendapat kesan bahwa SVG mudah untuk handcode. Ya, Anda dapat membuat kode tangan SVG sederhana dalam editor teks, tetapi untuk gambar yang kompleks ini dengan cepat mulai menjadi sangat sulit. For creating SVG images, most people use a vector graphics editor like <a href="https://inkscape.org/en/">Inkscape</a> or <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. Paket-paket ini memungkinkan Anda untuk membuat berbagai ilustrasi menggunakan berbagai alat grafis, dan membuat perkiraan foto (misalnya fitur Trace Bitmap dari Inkscape.)</p> - -<p>SVG memiliki beberapa keuntungan tambahan selain yang dijelaskan sejauh ini:</p> - -<ul> - <li>Teks dalam gambar vektor tetap dapat diakses (yang juga bermanfaat bagi Anda {{glossary("SEO")}}).</li> - <li>SVG cocok untuk styling / scripting, karena setiap komponen gambar adalah elemen yang dapat ditata melalui CSS atau dituliskan melalui JavaScript.</li> -</ul> - -<p>Jadi mengapa ada orang yang mau menggunakan grafik raster di atas SVG? Nah, SVG memang memiliki beberapa kelemahan:</p> - -<ul> - <li>SVG bisa menjadi rumit dengan sangat cepat, artinya ukuran file bisa bertambah; SVG yang kompleks juga dapat mengambil waktu pemrosesan yang signifikan di browser.</li> - <li>SVG bisa lebih sulit untuk dibuat daripada gambar raster, tergantung pada jenis gambar apa yang Anda coba buat.</li> - <li>SVG tidak didukung di peramban yang lebih lama, jadi mungkin tidak cocok jika Anda perlu mendukung versi Internet Explorer yang lebih lama dengan situs web Anda (SVG mulai didukung pada IE9.)</li> -</ul> - -<p>Grafik raster bisa dibilang lebih baik untuk gambar presisi kompleks seperti foto, karena alasan yang dijelaskan di atas.</p> - -<div class="note"> -<p><strong>Note</strong>: Di Inkscape, simpan file Anda sebagai Plain SVG untuk menghemat ruang. Juga, silakan lihat ini <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">article describing how to prepare SVGs for the Web</a>.</p> -</div> - -<h2 id="Adding_SVG_to_your_pages">Adding SVG to your pages</h2> - -<p>In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.</p> - -<h3 id="The_quick_way_htmlelementimg">The quick way: {{htmlelement("img")}}</h3> - -<p>To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a <code>height</code> or a <code>width</code> attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</p> - -<pre class="brush: html"><img - src="equilateral.svg" - alt="triangle with all three sides equal" - height="87" - width="100" /></pre> - -<h4 id="Pros">Pros</h4> - -<ul> - <li>Sintaks gambar cepat dan dikenal dengan teks bawaan yang tersedia di <code>alt</code> attribute.</li> - <li>You can make the image into a hyperlink easily by nesting the <code><img></code> inside an {{htmlelement("a")}} element.</li> - <li>File SVG dapat di-cache oleh browser, menghasilkan waktu pemuatan yang lebih cepat untuk setiap halaman yang menggunakan gambar yang dimuat di masa depan.</li> -</ul> - -<h4 id="Cons">Cons</h4> - -<ul> - <li>You cannot manipulate the image with JavaScript.</li> - <li>If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)</li> - <li>You cannot restyle the image with CSS pseudoclasses (like <code>:focus</code>).</li> -</ul> - -<h3 id="Troubleshooting_and_cross-browser_support">Troubleshooting and cross-browser support</h3> - -<p>For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your <code>src</code> attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:</p> - -<pre class="brush: html"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> - -<p>Anda juga dapat menggunakan SVG sebagai gambar latar belakang CSS, seperti yang ditunjukkan di bawah ini. Dalam kode di bawah ini, browser lama akan tetap dengan PNG yang mereka pahami, sementara browser yang lebih baru akan memuat SVG:</p> - -<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code> -<code>background-image: url("image.svg"); -background-size: contain;</code></pre> - -<p>Like the <code><img></code> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.</p> - -<p>Jika SVG Anda tidak muncul sama sekali, itu mungkin karena server Anda tidak diatur dengan benar. Jika itu masalahnya, ini <a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">article will point you in the right direction</a>.</p> - -<h3 id="How_to_include_SVG_code_inside_your_HTML">How to include SVG code inside your HTML</h3> - -<p>Anda juga dapat membuka file SVG dalam editor teks, menyalin kode SVG, dan menempelkannya ke dokumen HTML Anda — this is sometimes called putting your <strong>SVG inline</strong>, or <strong>inlining SVG</strong>. Pastikan cuplikan kode SVG Anda dimulai dan diakhiri dengan <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> tags (don't include anything outside those.) Berikut adalah contoh yang sangat sederhana dari apa yang mungkin Anda tempel ke dalam dokumen Anda:</p> - -<pre class="brush: html"><svg width="300" height="200"> - <rect width="100%" height="100%" fill="green" /> -</svg> -</pre> - -<h4 id="Pros_2">Pros</h4> - -<ul> - <li>Menempatkan inline SVG Anda menghemat permintaan HTTP, dan karenanya dapat mengurangi sedikit waktu pemuatan Anda.</li> - <li>You can assign <code>class</code>es and <code>id</code>s to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any <a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">SVG presentation attribute </a>as a CSS property.</li> - <li>Inlining SVG adalah satu-satunya pendekatan yang memungkinkan Anda menggunakan interaksi CSS (like <code>:focus</code>) and CSS animations on your SVG image (even in your regular stylesheet.)</li> - <li>Anda dapat membuat markup SVG menjadi hyperlink dengan membungkusnya dengan {{htmlelement("a")}} element.</li> -</ul> - -<h4 id="Cons_2">Cons</h4> - -<ul> - <li>Metode ini hanya cocok jika Anda menggunakan SVG hanya di satu tempat. Duplikasi membuat pemeliharaan intensif sumber daya.</li> - <li>Kode SVG tambahan meningkatkan ukuran file HTML Anda.</li> - <li>Browser tidak dapat men-cache inline SVG karena akan men-cache aset gambar biasa, sehingga halaman yang menyertakan gambar tidak akan memuat lebih cepat setelah halaman pertama berisi gambar dimuat.</li> - <li>You may include fallback in a {{svgelement("foreignObject")}} element, tetapi browser yang mendukung SVG masih mengunduh gambar yang mundur. Anda perlu mempertimbangkan apakah overhead tambahan benar-benar berharga, hanya untuk mendukung browser yang usang.</li> -</ul> - -<ul> -</ul> - -<h3 id="How_to_embed_an_SVG_with_an_htmlelementiframe">How to embed an SVG with an {{htmlelement("iframe")}}</h3> - -<p>Anda dapat membuka gambar SVG di browser Anda seperti halnya halaman web. Jadi menanamkan dokumen SVG dengan <code><iframe></code> is done just like we studied in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a>.</p> - -<p>Here's a quick review:</p> - -<pre class="brush: html"><iframe src="triangle.svg" width="500" height="500" sandbox> - <img src="triangle.png" alt="Triangle with three unequal sides" /> -</iframe></pre> - -<p>Ini jelas bukan metode terbaik untuk memilih:</p> - -<h4 id="Cons_3">Cons</h4> - -<ul> - <li><code>iframe</code>s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for <code>iframe</code>s altogether.</li> - <li>Selain itu, kecuali SVG dan halaman web Anda saat ini memiliki yang sama {{glossary('origin')}}, Anda tidak dapat menggunakan JavaScript di halaman web utama Anda untuk memanipulasi SVG.</li> -</ul> - -<h2 id="Active_Learning_Playing_with_SVG">Active Learning: Playing with SVG</h2> - -<p>Di bagian pembelajaran aktif ini kami ingin Anda bersenang-senang bermain SVG untuk bersenang-senang. Di bagian <em>Input</em> di bawah ini Anda akan melihat bahwa kami telah menyediakan beberapa sampel untuk Anda mulai. Anda juga dapat pergi ke <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, cari tahu lebih detail tentang mainan lain yang bisa Anda gunakan di SVG, dan coba juga itu. Bagian ini adalah tentang mempraktekkan keterampilan riset Anda, dan bersenang-senang.</p> - -<p>If you get stuck and can't get your code working, you can always reset it using the <em>Reset</em> button.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="width: 95%;min-height: 200px;"> - <svg width="100%" height="100%"> - <rect width="100%" height="100%" fill="red" /> - <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> - <polygon points="120,0 240,225 0,225" fill="green"/> - <text x="50" y="100" font-family="Verdana" font-size="55" - fill="white" stroke="black" stroke-width="2"> - Hello! - </text> - </svg> -</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution" disabled> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">const textarea = document.getElementById('code'); -const reset = document.getElementById('reset'); -const solution = document.getElementById('solution'); -const output = document.querySelector('.output'); -let code = textarea.value; -let userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -const htmlSolution = ''; -let solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - const scrollPos = textarea.scrollTop; - const caretPos = textarea.selectionStart; - const front = (textarea.value).substring(0, caretPos); - const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<h2 id="Summary">Summary</h2> - -<p>Artikel ini telah memberi Anda tur singkat tentang apa itu vektor grafik dan SVG, mengapa mereka berguna untuk diketahui, dan bagaimana memasukkan SVG ke dalam halaman web Anda. Itu tidak pernah dimaksudkan sebagai panduan lengkap untuk mempelajari SVG, hanya sebuah petunjuk sehingga Anda tahu apa itu SVG jika Anda bertemu dalam perjalanan Anda di Web. Jadi jangan khawatir jika Anda belum merasa sudah ahli SVG. Kami telah menyertakan beberapa tautan di bawah ini yang mungkin membantu Anda jika Anda ingin pergi dan mencari tahu lebih lanjut tentang cara kerjanya.</p> - -<p>Pada artikel terakhir modul ini, kami akan mengeksplorasi gambar responsif secara terperinci, dengan melihat alat-alat HTML yang memungkinkan Anda membuat gambar Anda bekerja lebih baik di berbagai perangkat.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li> - <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li> - <li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li> - <li><a href="https://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li> - <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a>(it's not as simple as raster graphics!)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> -</ul> diff --git a/files/id/learn/html/multimedia_and_embedding/index.html b/files/id/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index 286c89f456..0000000000 --- a/files/id/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Multimedia dan Embedding -slug: Learn/HTML/Multimedia_and_embedding -tags: - - Asesmen - - Audio - - CodingScripting - - Flash - - HTML - - Image - - Landing - - Multimedia - - Panduan - - Pemula - - Pengembedan - - SVG - - Video - - Web - - belajar - - iframe - - imagemap - - img - - responsif -translation_of: Learn/HTML/Multimedia_and_embedding -original_slug: Learn/HTML/Multimedia_dan_embedding ---- -<p>{{LearnSidebar}}</p> - -<p class="summary">We've looked at a lot of text so far in this course, but the web would be really boring only using text. Let's start looking at how to make the web come alive with more interesting content! This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.</p> - -<h2 id="Persyaratan">Persyaratan</h2> - -<p>Sebelum memulai modul ini, kamu harus punya pengetahuan mendasar tentang HTML dasar, seperti dicover sebelumnya dalam <a href="https://developer.mozilla.org/id/docs/Learn/HTML/Pengenalan_HTML">Pengenalan HTML</a>. Kalau kamu belum bekerja melalui modul ini (atau sesuatu yang serupa), kerja dulu di situ, lalu kembali lagi!</p> - -<div class="note"> -<p><strong>Catatan</strong>: Kalau kamu bekerja pada komputer/tablet/device lain yang mana kamu tidak bisa membuat <em>file</em>mu sendiri, kamu bisa mencoba (sebagian besar) contoh kode dalam program coding daring macam <a href="https://jsbin.com/">JSBin</a> atau <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Petunjuk">Petunjuk</h2> - -<p>Module ini berisi artikel berikut yang akan mengantar kamu melalui semua fundamental mengembed multimedia dalam halaman web.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Image dalam HTML</a></dt> - <dd>Ada tipe multimedia lain yang dipertimbangkan, tapi itu logis jika mulai dengan elemen {{htmlelement("img")}} yang untuk mengembed image sederhana ke dalam halaman web. Di artikel ini kita akan melihat bagaimana menggunakan itu lebih dalam, termasuk dasar, menganotasi itu dengan caption menggunakan {{htmlelement("figure")}}, dan bagaimana itu dikaitkan dengan CSS background images.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Konten video dan audio</a></dt> - <dd>Berikutnya, kita akan melihat bagaimana menggunakan elemen {{htmlelement("video")}} dan {{htmlelement("audio")}} HTML5 untuk mengembed video dan audio dalam halaman kita, termasuk dasar, menyediakan akses ke format <em>file</em> berbeda ke peramban berbeda, menambah caption dan subtitle, dan bagaimana menambah fallback untuk peramban jadul.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Dari <object> ke <iframe> — teknologi pengembedan lain</a></dt> - <dd>Pada poin ini kita akan mengambil langkah menyamping, melihat pasangan elemen yang dipakai untuk mengembed beragam tipe konten ke dalam halaman web: elemen {{htmlelement("iframe")}}, {{htmlelement("embed")}} dan {{htmlelement("object")}}. <code><iframe></code> dipakai untuk mengembed halaman web lain, dan 2 lainnya untuk mengembed PDF, SVG, dan bahkan Flash — teknologi yang jarang, tapi masih ada saja.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Menambah grafis vektor ke web</a></dt> - <dd>Grafis vektor bisa berfaedah dalam beberapa situasi. Tidak seperti format reguler macam PNG/JPG, mereka tidak terdistorsi/terpixelasi ketika dizoom-in — tetap mulus ketika discale. Artikel ini memperkenalkan kamu ke grafis vektor dan bagaimana memasukkan format {{glossary("SVG")}} populer ke dalam halaman web.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Image responsif</a></dt> - <dd>Dengan berbagai tipe device yang mampu meramban web — dari ponsel mobile ke komputer desktop — konsep esensial untuk menguasai dunia web modern web world ialah desain responsif. Ini menunjukkan kreasi halaman web yang otomatis menyesuaikan fitur mereka dengan beragam ukuran layar, resolusi, dan lain sebagainya. Ini akan dibahas mendetil dalam modul CSS lebih lanjut, tapi untuk sekarang, kita akan melihat tools yang tersedia bagi HTML untuk membuat responsif image, termasuk elemen {{htmlelement("picture")}}.</dd> -</dl> - -<h2 id="Asesmen">Asesmen</h2> - -<p>Asesmen berikut akan menguhi pemahamanmu tentang HTML dasar yang dicover dalam panduan di atas:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Halaman splash Mozilla</a></dt> - <dd>Dalam asesmen ini, kita akan menguji pengetahuanmu tentang beberapa teknik yang didiskusikan dalam artikel modul, membuat kamu menambah beberapa image dan video ke halaman splash funky tentang Mozilla!</dd> -</dl> - -<h2 id="Lihat_juga">Lihat juga</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt> - <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> - <dd> - <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).</p> - </dd> -</dl> diff --git a/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html deleted file mode 100644 index 1be9210b5d..0000000000 --- a/files/id/learn/html/multimedia_and_embedding/responsive_images/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: Responsive images -slug: Learn/HTML/Multimedia_and_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images -original_slug: Learn/HTML/Multimedia_dan_embedding/Responsive_images ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<div> -<p class="summary"><font>Pada artikel ini, kita akan belajar tentang konsep gambar responsif - gambar yang bekerja dengan baik pada perangkat dengan ukuran layar, resolusi, dan fitur lain yang sangat berbeda - dan melihat alat apa yang disediakan HTML untuk membantu mengimplementasikannya. </font><font>Ini membantu meningkatkan kinerja di berbagai perangkat yang berbeda. </font><font>Gambar responsif hanyalah salah satu bagian dari</font> <a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">responsive design</a>, topik CSS masa depan yang dapat Anda pelajari.</p> -</div> - -<table class="learn-box nostripe standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Anda harus sudah mengetahui <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> dan cara <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">add static images to a web page</a>.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>Learn how to use features like {{htmlattrxref("srcset", "img")}} and the {{htmlelement("picture")}} element to implement responsive image solutions on websites.</td> - </tr> - </tbody> -</table> - -<h2 id="Why_responsive_images">Why responsive images?</h2> - -<p>Let's examine a typical scenario. <font>Situs web tipikal mungkin berisi gambar tajuk dan beberapa gambar konten di bawah tajuk. </font><font>Gambar header kemungkinan akan menjangkau seluruh lebar header, dan gambar konten akan cocok di suatu tempat di dalam kolom konten. </font><font>Berikut ini contoh sederhana:</font></p> - -<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> - -<p>Ini bekerja dengan baik pada perangkat layar lebar, seperti laptop atau desktop (you can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">see the example live</a> and find the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">source code</a> on Github.) Kami tidak akan banyak membahas CSS dalam pelajaran ini, kecuali untuk mengatakan bahwa:</p> - -<ul> - <li>The body content has been set to a maximum width of 1200 pixels — in viewports above that width the body remains at 1200px and centers itself in the available space. In viewports below that width, the body will stay at 100% of the width of the viewport.</li> - <li>The header image has been set so that its center always stays in the center of the header, no matter what width the heading is set at. If the site is being viewed on a narrower screen, the important detail in the center of the image (the people) can still be seen, and the excess is lost off either side. It is 200px high.</li> - <li>The content images have been set so that if the body element becomes smaller than the image, the images start to shrink so that they always stay inside the body, rather than overflowing it.</li> -</ul> - -<p><font>Namun, masalah muncul ketika Anda mulai melihat situs di perangkat layar sempit. </font><font>Header di bawah ini terlihat baik-baik saja, tetapi mulai mengambil banyak ketinggian layar untuk perangkat seluler. </font><font>Dan pada ukuran ini, sulit untuk melihat orang-orang di dalam gambar konten pertama.</font></p> - -<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> - -<p>An improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. A second cropped image could be displayed for a medium width screen device, like a tablet. This is commonly known as the <strong>art direction problem</strong>.</p> - -<p>In addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. And conversely, a small <a href="/en-US/docs/Glossary/Raster_image">raster image</a> starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a>). This is called the <strong>resolution switching problem</strong>.</p> - -<p><font>Sebaliknya, tidak perlu untuk menampilkan gambar besar di layar secara signifikan lebih kecil dari ukuran yang dimaksudkan. </font><font>Melakukannya dapat menghabiskan bandwidth; </font><font>khususnya, pengguna seluler tidak ingin membuang bandwidth dengan mengunduh gambar besar yang ditujukan untuk desktop, ketika gambar kecil dilakukan untuk perangkat mereka. </font><font>Idealnya, Anda akan memiliki beberapa resolusi yang tersedia dan melayani ukuran yang sesuai tergantung pada perangkat yang mengakses data di situs web.</font></p> - -<p><font>Untuk membuat segalanya lebih rumit, beberapa perangkat memiliki layar resolusi tinggi yang membutuhkan gambar lebih besar dari yang Anda harapkan untuk ditampilkan dengan baik. </font><font>Ini pada dasarnya adalah masalah yang sama, tetapi dalam konteks yang sedikit berbeda.</font></p> - -<p><font>Anda mungkin berpikir bahwa gambar vektor akan menyelesaikan masalah ini, dan mereka melakukannya pada tingkat tertentu - mereka berukuran kecil dalam ukuran dan skalanya dengan baik, dan Anda harus menggunakannya sedapat mungkin. </font><font>Namun, mereka tidak cocok untuk semua jenis gambar. </font><font>Gambar vektor sangat bagus untuk grafik, pola, elemen antarmuka, dll. Sederhana, tetapi mulai menjadi sangat kompleks untuk membuat gambar berbasis vektor dengan jenis detail yang akan Anda temukan di katakanlah, foto. </font><font>Format gambar raster seperti JPEG lebih cocok untuk jenis gambar yang kita lihat dalam contoh di atas.</font></p> - -<p>This kind of problem didn't exist when the web first existed, in the early to mid 90s — back then the only devices in existence to browse the Web were desktops and laptops, so browser engineers and spec writers didn't even think to implement solutions. <em>Responsive image technologies</em> were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (<em>resolution switching</em>), or different images suitable for different space allocations (<em>art direction</em>).</p> - -<div class="note"> -<p><strong>Note</strong>: The new features discussed in this article — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — are all supported in release versions of modern desktop and mobile browsers (including Microsoft's Edge browser, although not Internet Explorer.) </p> -</div> - -<h2 id="How_do_you_create_responsive_images">How do you create responsive images?</h2> - -<p><font>Di bagian ini, kita akan melihat dua masalah yang diilustrasikan di atas dan menunjukkan bagaimana menyelesaikannya menggunakan fitur gambar HTML yang responsif. </font><font>Anda harus mencatat bahwa kami akan fokus pada HTML</font> {{htmlelement("img")}}s for this section, seperti yang terlihat di area konten dari contoh di atas - gambar di header situs hanya untuk dekorasi, dan karenanya diimplementasikan menggunakan gambar latar belakang CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS arguably has better tools for responsive design</a> than HTML, and we'll talk about those in a future CSS module.</p> - -<h3 id="Resolution_switching_Different_sizes">Resolution switching: Different sizes</h3> - -<p>So, what is the problem that we want to solve with resolution switching? We want to display identical image content, just larger or smaller depending on the device — this is the situation we have with the second content image in our example. The standard {{htmlelement("img")}} element traditionally only lets you point the browser to a single source file:</p> - -<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> - -<p>We can however use two new attributes — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — to provide several additional source images along with hints to help the browser pick the right one. You can see an example of this in our <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> example on Github (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">the source code</a>):</p> - -<pre class="brush: html"><img srcset="elva-fairy-480w.jpg 480w, - elva-fairy-800w.jpg 800w" - sizes="(max-width: 600px) 480px, - 800px" - src="elva-fairy-800w.jpg" - alt="Elva dressed as a fairy"></pre> - -<p>The <code>srcset</code> and <code>sizes</code> attributes look complicated, but they're not too hard to understand if you format them as shown above, with a different part of the attribute value on each line. Each value contains a comma-separated list, and each part of those lists is made up of three sub-parts. Let's run through the contents of each now:</p> - -<p><strong><code>srcset</code></strong> mendefinisikan set gambar yang kami akan memungkinkan browser untuk memilih di antara, dan berapa ukuran masing-masing gambar. Setiap rangkaian informasi gambar dipisahkan dari yang sebelumnya dengan koma. Untuk masing-masing, kami menulis:</p> - -<ol> - <li>An <strong>image filename</strong> (<code>elva-fairy-480w.jpg</code>)</li> - <li>A space</li> - <li>The image's <strong>intrinsic width in pixels</strong> (<code>480w</code>) — note that this uses the <code>w</code> unit, not <code>px</code> as you might expect. This is the image's real size, which can be found by inspecting the image file on your computer (for example, on a Mac you can select the image in Finder and press <kbd>Cmd</kbd> + <kbd>I</kbd> to bring up the info screen).</li> -</ol> - -<p><strong><code>sizes</code></strong> mendefinisikan serangkaian kondisi media (mis. lebar layar) dan menunjukkan ukuran gambar apa yang terbaik untuk dipilih, ketika kondisi media tertentu benar - ini adalah petunjuk yang telah kita bicarakan sebelumnya. Dalam hal ini, sebelum setiap koma kami menulis:</p> - -<ol> - <li>A <strong>media condition</strong> (<code>(max-width:600px)</code>) — you'll learn more about these in the <a href="/en-US/docs/Learn/CSS">CSS topic</a>, but for now let's just say that a media condition describes a possible state that the screen can be in. In this case, we are saying "when the viewport width is 600 pixels or less".</li> - <li>A space</li> - <li>The <strong>width of the slot</strong> the image will fill when the media condition is true (<code>480px</code>)</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: For the slot width, you may provide an absolute length (<code>px</code>, <code>em</code>) or a length relative to the viewport (<code>vw</code>), but not percentages. You may have noticed that the last slot width has no media condition (this is the default that is chosen when none of the media conditions are true). The browser ignores everything after the first matching condition, so be careful how you order the media conditions.</p> -</div> - -<p>So, with these attributes in place, the browser will:</p> - -<ol> - <li>Look at its device width</li> - <li>Work out which media condition in the <code>sizes</code> list is the first one to be true</li> - <li>Look at the slot size given to that media query</li> - <li>Load the image referenced in the <code>srcset</code> list that <strong>most closely</strong> matches the chosen slot size</li> -</ol> - -<p>And that's it! At this point, if a supporting browser with a viewport width of 480px loads the page, the <code>(max-width: 600px)</code> media condition will be true, and so the browser chooses the <code>480px</code> slot. The <code>elva-fairy-480w.jpg</code> will be loaded, as its inherent width (<code>480w</code>) is closest to the slot size. The 800px picture is 128KB on disk, whereas the 480px version is only 63KB — a saving of 65KB. Now, imagine if this was a page that had many pictures on it. Using this technique could save mobile users a lot of bandwidth.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in <code><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="cm-variable">document</span>.<span class="cm-property">querySelector</span>(<span class="cm-string">'html'</span>).<span class="cm-property">clientWidth</span></span></span></span></code>). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's <code>about:debugging</code> page to inspect the page loaded on the mobile using the desktop developer tools.<br> - <br> - To see which images were loaded, you can use Firefox DevTools's <a href="/en-US/docs/Tools/Network_Monitor">Network Monitor</a> tab.</p> -</div> - -<p>Older browsers that don't support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the {{htmlattrxref("src", "img")}} attribute as normal.</p> - -<div class="note"> -<p><strong>Note</strong>: In the {{htmlelement("head")}} of the example linked above, you'll find the line <code><meta name="viewport" content="width=device-width"></code>: this forces mobile browsers to adopt their real viewport width for loading web pages (some mobile browsers lie about their viewport width, and instead load pages at a larger viewport width then shrink the loaded page down, which is not very helpful for responsive images or design).</p> -</div> - -<h3 id="Resolution_switching_Same_size_different_resolutions">Resolution switching: Same size, different resolutions</h3> - -<p>If you're supporting multiple display resolutions, but everyone sees your image at the same real-world size on the screen, you can allow the browser to choose an appropriate resolution image by using <code>srcset</code> with x-descriptors and without <code>sizes</code> — a somewhat easier syntax! You can find an example of what this looks like in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (see also <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p> - -<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, - elva-fairy-480w.jpg 1.5x, - elva-fairy-640w.jpg 2x" - src="elva-fairy-640w.jpg" - alt="Elva dressed as a fairy"> -</pre> - -<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In this example, the following CSS is applied to the image so that it will have a width of 320 pixels on the screen (also called CSS pixels):</p> - -<pre class="brush: css">img { - width: 320px; -}</pre> - -<p>In this case, <code>sizes</code> is not needed — the browser simply works out what resolution the display is that it is being shown on, and serves the most appropriate image referenced in the <code>srcset</code>. So if the device accessing the page has a standard/low resolution display, with one device pixel representing each CSS pixel, the <code>elva-fairy-320w.jpg</code> image will be loaded (the 1x is implied, so you don't need to include it.) If the device has a high resolution of two device pixels per CSS pixel or more, the <code>elva-fairy-640w.jpg</code> image will be loaded. The 640px image is 93KB, whereas the 320px image is only 39KB.</p> - -<h3 id="Art_direction">Art direction</h3> - -<p>To recap, the <strong>art direction problem</strong> involves wanting to change the image displayed to suit different image display sizes. For example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. It would probably be better to show a smaller, portrait image on mobile, which zooms in on the person. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.</p> - -<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p> - -<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> - -<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> and <code><audio></code></a>, the <code><picture></code> element is a wrapper containing several {{htmlelement("source")}} elements that provide different sources for the browser to choose from, followed by the all-important {{htmlelement("img")}} element. The code in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p> - -<pre class="brush: html"><picture> - <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> - <source media="(min-width: 800px)" srcset="elva-800w.jpg"> - <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> -</picture> -</pre> - -<ul> - <li>The <code><source></code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, if the viewport width is 799px wide or less, the first <code><source></code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li> - <li>The <code>srcset</code> attributes contain the path to the image to display. Just as we saw with <code><img></code> above, <code><source></code> can take a <code>srcset</code> attribute with multiple images referenced, as well as a <code>sizes</code> attribute. So, you could offer multiple images via a <code><picture></code> element, but then also offer multiple resolutions of each one. Realistically, you probably won't want to do this kind of thing very often.</li> - <li>In all cases, you must provide an <code><img></code> element, with <code>src</code> and <code>alt</code>, right before <code></picture></code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code><source></code> element in this example), and a fallback for browsers that don't support the <code><picture></code> element.</li> -</ul> - -<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p> - -<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> - -<div class="note"> -<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p> -</div> - -<h3 id="Why_cant_we_just_do_this_using_CSS_or_JavaScript">Why can't we just do this using CSS or JavaScript?</h3> - -<p>When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which has shaved an average of 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like <code>srcset</code>. For example, you couldn't load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript, and then dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.</p> - -<ul> -</ul> - -<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3> - -<p>There are several exciting new image formats (such as <a href="/en-US/docs/Glossary/webp">WebP</a> and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p> - -<p><code><picture></code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p> - -<pre class="brush: html"><picture> - <source type="image/svg+xml" srcset="pyramid.svg"> - <source type="image/webp" srcset="pyramid.webp"> - <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> -</picture> -</pre> - -<ul> - <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li> - <li>In a <code><source></code> element, you can only refer to images of the type declared in <code>type</code>.</li> - <li>Use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li> -</ul> - -<h2 id="Active_learning_Implementing_your_own_responsive_images">Active learning: Implementing your own responsive images</h2> - -<p>For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <code><picture></code>, and a resolution switching example that uses <code>srcset</code>.</p> - -<ol> - <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like).</li> - <li>Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this).</li> - <li>Use the <code><picture></code> element to implement an art direction picture switcher!</li> - <li>Create multiple image files of different sizes, each showing the same picture.</li> - <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li> -</ol> - -<h2 id="Test_your_skills!">Test your skills!</h2> - -<p>You've reached the end of this article, but can you remember the most important information? You can find a detailed assessment that tests these skills at the end of the module; see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a>.</p> - -<h2 id="Summary">Summary</h2> - -<p>That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:</p> - -<ul> - <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in for a mobile layout. You can solve this problem using the {{htmlelement("picture")}} element.</li> - <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. You can solve this problem by using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images) and the {{htmlattrxref("srcset", "img")}} with {{htmlattrxref("sizes", "img")}} attributes.</li> -</ul> - -<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun!</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li> - <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Responsive Images: If you’re just changing resolutions, use srcset</a> — includes more explanation of how the browser works out which image to use</li> - <li>{{htmlelement("img")}}</li> - <li>{{htmlelement("picture")}}</li> - <li>{{htmlelement("source")}}</li> -</ul> - -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<div> -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> -</ul> -</div> |