<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Атрибут srcset, Retina, WebP. Какая связь?

Атрибут srcset, Retina, WebP. Какая связь?

Что такое атрибут srcset, как он связан с Retina-дисплеями и зачем это нужно верстальщику? Сразу много новых понятий, будем постепенно разбираться.

У некоторых крутых устройств семейства Apple, дисплеи с плотностью пикселей на дюйм в 2 раза выше, чем на обычных экранах. Сделано это, ради более качественной графики (типа самые умные). Чтобы изображения на сайте не были размытыми, они должны быть в 2 раза больше, чем оригинальные.

Подготовка изображений с учетом Retina-экранов

В графическом редакторе создать две одинаковые картинки, но с разными разрешениями: 72 dpi / 144 dpi. Перед верстальщиком стоит задача, как отдавать браузеру большие картинки только для Retina-дисплеев, а оригинальные картинки всем остальным.

Атрибут srcset

Атрибут srcset специально создан для скармливания картинок нужных размеров браузеру. Мы говорим браузеру, что у нас есть картинки хорошего качества, пожалуйста, на ваш выбор. На устройство с обычным экраном загрузится оригинальное изображение, а на Retina – изображение удвоенного размера.

Вставляем картинку обычным способом:

<img src="img/picture.jpg" alt="Изображения">

Вставляем картинку с учетом Retina-дисплеев, добавляем тегу img атрибут srcset с модификаторами 1x / 2x:

<img src="img/picture.jpg" srcset="img/picture.jpg 1x, img/picture@2x.jpg 2x" alt="Изображения">

Если браузер не обнаружит Retina, то подгрузит картинку из src атрибута. Главное, что картинки не будут загружаться все сразу.

Favicon для Retina

Как вы догадались, нам что-то нужно делать с фавикон, обычный её размер в 16x16 пикселей, не годится для Retina. Как максимально быстро заготовить все возможные размеры для фавикон.

Фавикон генератор

  1. Для генерации фавиконки воспользуемся онлайн-генератором https://realfavicongenerator.net.
  2. Подготовим картинку размером 260x260 пикселей в любом из следующих форматов: PNG, JPG, SVG.
  3. Загрузим её на сервис
  4. Откроется страница, где можно сделать некоторые настройки, например, выбрать цвет фона для фавиконки.
  5. Нажимаете кнопку Generate your Favicons and HTML code.
  6. Скачиваете архив с разными размерами фавиконок и переносите их в папку с картинками своего проекта.
  7. Сгенерированный код вставляете в секцию head и меняете пути.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

Картинки формата WebP

Мы хорошо понимаем, что удвоенный размер картинки ради красоты, негативно скажется на скорости её загрузки. Как можно уменьшить вес картинок без потери качества? У товарища Google есть формат WebP, отвечающий этим условиям и созданный как альтернатива JPG и PNG, ещё в 2010 году.

Как конвертировать в WebP формат

Можно воспользоваться сервисом https://squoosh.app. Перетаскиваете картинку, выбираете формат WebP, размер сжатой картинки уменьшается на 70-90%.

Как вставить WebP

Поскольку формат WebP поддерживается не всеми браузерами, рекомендуется вставлять картинки через тег <picture>. Внутри которого вставляем картинку через <source> в новом формате для ретина и неретина экранов. Для браузеров, которые не понимают webp, вставляем картинку через тег img.

<picture>
    <source type="image/webp" srcset="img/picture.webp 1x, img/picture@2x.webp 2x ">
    <img src="img/picture.jpg" srcset="img/picture.jpg 1x, img/picture@2x.jpg 2x" alt="Изображения">
</picture>

Разные изображения для десктопов и мобильников

Иногда нужно, чтобы на мобильном устройстве загружалась другая картинка. Как это оптимально реализовать, без необходимости загружать обе картинки? При ширине экрана меньше, чем 560 пикселей, загрузится другая картинка mobile.

<source srcset="img/mobile.jpg 1x" media="(max-width: 560px)">

Код целиком

<picture>
    <source srcset="img/mobile.jpg 1x, img/mobile@2x.jpg 2x" media="(max-width: 560px) ">
    <source srcset="img/mobile.webp 1x, img/mobile@2x.webp 2x" media="(max-width: 560px)">
    <source type="image/webp" srcset="img/picture.webp 1x, img/picture@2x.webp 2x">
    <img src="img/picture.jpg" srcset="img/picture.jpg 1x, img/picture@2x.jpg 2x" alt="Изображения">
</picture>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.