{"draftJsState":{"blocks":[{"data":{"image":{"id":"683abbab16dc514cdbf9328c"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"466u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dt29d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет, коллеги! Сегодня будем разбирать, как правильно вставлять изображения в HTML. Я сам когда-то путался в этих тегах, но теперь щелкаю их как орешки. Давайте по порядку.","type":"unstyled","key":"701i7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый простой способ","type":"header-two","key":"2ur9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Открываешь HTML-файл и пишешь:","type":"unstyled","key":"68d3a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 $\"Что$ ","type":"unstyled","key":"7riug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работает в 99% случаев. Главное — чтобы файл лежал в правильной папке.","type":"unstyled","key":"8esb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Где искать свои картинки","type":"header-two","key":"57tcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"В той же папке — просто имя файла:\n\uD83D\uDC49 $\"Мой$ ","type":"ordered-list-item","key":"ega9c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"В папке images — добавляешь путь:\n\uD83D\uDC49 $\"Наш$ ","type":"ordered-list-item","key":"6mc6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":15,"offset":0,"style":"BOLD"}],"text":"На уровень выше — две точки и слэш:\n\uD83D\uDC49 $\"Логотип\"$ ","type":"ordered-list-item","key":"8627i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хитрости, которые реально работают","type":"header-two","key":"2pm2h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"}],"text":"1. Размеры — чтобы не ломать верстку:\n\uD83D\uDC49 $\"Фото\"$ ","type":"unstyled","key":"flvfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"2. Загрузка с ленивой загрузкой (грузится при прокрутке):\n\uD83D\uDC49 $\"Акция\"$ ","type":"unstyled","key":"8hf5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"3. Картинка-ссылка — оборачиваем в тег :\n\uD83D\uDC49 $\"Подробнее\"$ ","type":"unstyled","key":"79hs8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что делать, чтобы не облажаться","type":"header-two","key":"f8i6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":13,"offset":0,"style":"BOLD"}],"text":"Проверяй пути — photo.jpg и Photo.JPG это разные файлы","type":"ordered-list-item","key":"t31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Не забывай alt — без него будут проблемы с доступностью","type":"ordered-list-item","key":"6q6r3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Сжимай изображения — никто не любит ждать загрузку 5MB картинки","type":"ordered-list-item","key":"513fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда нужно что-то сложнее","type":"header-two","key":"a3kph"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для адаптивных сайтов используй:","type":"unstyled","key":"ahf68"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 $\"Адаптив\"$ ","type":"unstyled","key":"3cevc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот код сам выберет подходящий размер картинки под экран.","type":"unstyled","key":"frsq8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Личный совет","type":"header-two","key":"8mj22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начинай с простого — сначала разберись с обычными тегами img. Когда набьешь руку, переходи к сложным вариантам вроде picture и srcset. Я вот полгода верстал без них — и ничего, сайты работали.","type":"unstyled","key":"calgn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Главное — практика. Попробуй прямо сейчас добавить картинку на тестовую страницу. Получилось? Отлично! Нет — пиши в комменты, разберемся вместе.","type":"unstyled","key":"donh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"ej5496DzRzKSJxBXjcEi"}],"entityMap":{}},"mentions":[]}