Картинки в вебе 2019

Скрипты и советы | 13 мая 2019

Уроки CSS на Хабрахабре, habrahabr.ru, Веб-дизайн

Проблема с отображением картинок возникла с момента появления адаптивности в интернете. Мы хотим, чтобы сайт хорошо смотрелся на любом планшете, телефоне, в портретной или ландшафтной ориентации экрана, а также на супербольших дисплеях 5K. Также на рынке появились Retina-дисплеи с высокой плотностью пикселей (DPI), где обычные картинки выглядят размытыми. Растет доля мобильного трафика, и крупные ресурсы нацелены на экономную загрузку изображений. Рассмотрим, как решают эти проблемы на сайтах Apple, Tilda и блог-платформе Medium.
Читать дальше →
Клиентская оптимизация / Выносим CSS в пост-загрузку

После сравнительной заметки о CSS Sprites и data:URL все мои мысли были направлены на решение основной проблемы: В...

Подробнее
Как добавить title на основе alt у тега img

В свежих версиях движка DLE пропала полезная функция - вывод атритуба title для изображений. Теперь она заменена на...

Подробнее
Изоляция css стилей с помощью компонентного подхода

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

Подробнее
[Перевод] Создание адаптивных изображений

В Интернете найдется немало статей, посвященных адаптивным логотипам. Наиболее популярным примером является сайт...

Подробнее
Блог им. ekwo / Привязываем иконку к каждому типу файлов на CSS

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

Подробнее
Водяной знак на картинки в DLE - плагин для DLE 13

Довольно часто требуется загружать водяные знаки на свои изображения не сиротливо в уголочке, а целиком по изображению,...

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms/

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями