<MyRusakov.ru />

Laravel от А до Я

Laravel от А до Я

Данный курс научит Вас создавать профессиональные сайты быстро и легко с помощью Laravel. Курс состоит из 7 разделов, в которых Вы с нуля освоите данный фреймворк до уровня, достаточном для создания любых сайтов.

Помимо курса Вы также получите упражнения для закрепления материала, а попутно ещё и создадите свой сайт, что позволит отлично закрепить материал на практике, плюс получить серьёзную работу в своё портфолио.

К курсу прилагается и очень ценный Бонус: «Создание сайта на Laravel». В этом Бонусе Вы увидите практический пример создания полноценного сайта на Laravel.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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