From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../responsive_images/index.html | 24 +++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) (limited to 'files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html') diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index b65ec750e1..d08e65fc01 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -107,9 +107,9 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  • Загрузит изображение из списка из srcset, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. 
    • -

    И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px, тогда будет загружено изображение elva-fairy-480w.jpg, так как свойство ширины (480w) наиболее близко значение 440px. Условно, изоображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.

    +

    И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px, тогда будет загружено изображение elva-fairy-480w.jpg, так как свойство ширины (480w) наиболее близко значение 440px. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.

    -

    Старые брузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.

    +

    Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.

    Note: В описании элемента {{htmlelement("head")}} вы найдёте строку <meta name="viewport" content="width=device-width">: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)

    @@ -129,7 +129,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images

    Переключения разрешений: Одинаковый размер, разные разрешения

    -

    Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дисриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):

    +

    Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):

    <img srcset="elva-fairy-320w.jpg,
              elva-fairy-480w.jpg 1.5x,
@@ -137,13 +137,13 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
      src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
    -

    A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageВ данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называмое CSS-пикселями):

    +

    A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the imageВ данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):

    img {
   width: 320px;
 }
    -

    В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответсвтует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.

    +

    В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применен x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.

    Художественное оформление

    @@ -153,7 +153,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images 
    <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
    -

    Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <video> и <audio>, элемент <picture> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождаении крайне важного элемента {{htmlelement("img")}}. Код responsive.html выглядит так:

    +

    Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <video> и <audio>, элемент <picture> это обертка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код responsive.html выглядит так:

    <picture>
   <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
@@ -163,8 +163,8 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
    @@ -173,12 +173,12 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images

    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.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

    -

    Примечание: Вам следует использовать атрибут media только при художественном оформлении; когда вы используюте media, не применяйте медиа-условия с атрибутом sizes.

    +

    Примечание: Вам следует использовать атрибут media только при художественном оформлении; когда вы используете media, не применяйте медиа-условия с атрибутом sizes.

    Почему это нельзя сделать посредством CSS и JavaScript?

    -

    Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решeния, как srcset. Например, вы не могли бы загрузить элемент <img>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.

    +

    Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как srcset. Например, вы не могли бы загрузить элемент <img>, потом определить ширину viewport'а при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.

    @@ -210,7 +210,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  • Напишите простую HTML-разметку.
  • Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
  • Используйте элемент <picture> для работы с художественно оформленной картинкой.
    • -
  • Обозначьте несколько разных размеров для этой картикни.
    • +
  • Обозначьте несколько разных размеров для этой картинки.
  • Используйте srcset/size для описания переключения при смене размеров viewport'а
    • @@ -227,7 +227,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  • Переключение разрешений: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью векторной графики (SVG изображений), и {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}} атрибуты.
    • -

    Это так же подводит нас к окончанию целого модуля "Мультимедия и встраивание"! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше - это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!

    +

    Это так же подводит нас к окончанию целого модуля "Мультимедиа и встраивание"! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше - это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!

    Посмотрите так же

    -- cgit v1.2.3-54-g00ecf