Рустам Байназаров, приношу извинения и мое почтение за терпение, усвоил неправильно информацию и из-за перемешки инлайнового стиля в html разметки и css стилях она как то подтвердилась. Отсюда и была стойкая уверенность. В общем прости меня Рустам, если сможешь.
Рустам Байназаров, не будет нормально, это видимо вы плохо понимаете. Надо указать изображению ретиновому ширину оригинального изображения, чтобы браузер ужал ретиновое изображение под нужное отображение. Набросайте пример данный, в инспекторе установите 2х и поймете, что не выйдет с оставленным cover.
ThunderCat, верно, терминологию попутал. С SVG получается, что именно сложность рендера грузит компьютер и тут объем напрямую зависит от сложности. С PNG картинкой браузеру не так сложно с 500-800кб, чем svg файл c большим количеством объектов? У меня просто дизайнер иллюстрации рисует, максимально пытался упростить svg, удалял объекты, упрощал количество точек. Но в некоторых случаях остановился на PNG в высоком качестве и пропускал через tinypng.
Рустам Байназаров, там же инлайновые стили, а код для ретины из css, поэтому important. Если поставить cover, то изображение ретиновое будет в полном масштабе, а мне нужно, чтобы оно ужалось под оригинально изображение, на ретине же пикселей в 2 раза больше.
ThunderCat, а может ли заставить тормозить браузер 3 сложных иконок на 400-600кб, даже если они параллельно грузяться. Есть ли смысл в png перевести и добавить форматы 2х, 3х для ретины.
У меня есть 3 иллюстрации к каждой секции и на каждой также по 5-7 небольших инлайновых svg, на последней секции 16 небольших инлайновых.
Мне кажется, что страница немного притормаживает. Мне на ховере нужна была смена цвета, но иконки многоцветные. Я первый раз подменял подменял с бесцветной на цветную через бэкграуд, но потом попробовал инлайново вставить одну версию и внутри svg иконки hover состояние прописать, так как ховеры только вовстроенных можно прописывать. Но сейчас подумал, что бы вставить через бэкграунд цветную и через filter: grayscale обесцветить, а на ховере возвращать изначальный вид.
Я так понимаю, что лучше всего lazyload картинки вставлять и спрайты symbol, background, тогда они как внешний ресурс кешируются и меньше запросов.
При обращении к symbol спрайту, браузер же перед тем как обратиться к элементу, вначале парсит весь файл. Насколько ощутима разница между тем, чтобы через lazyload скачать отложенно картинку/иконку или парсить сразу средний по размеру спрайт, спрайты отложенно не получиться скачать.
ThunderCat, Спасибо, что дополнил, пока писал текст забыл упомянуть. Увеличенный размер и блокировка потока ясны.
Не знаю, как браузер парсит в целом картинку. То есть получается одинаково, плюс в том, что когда это внешний файл, то просто в параллельном потоке?
То же касается и встроенных инлайново svg изображений, тоже мешают парсить html документ?
slave bb, я просто спрашиваю, особо большим опытом не располагаю. Сейчас просто изучаю тему анимации и невзначай заметил про данный способ к верстке. Тут не говориться об отсутствии медиа запросов в целом, возможно меньшее количество их в целом и адаптивность блоков между брекпоинтами, так как есть привязка к вьюпорту.
Мне кажется, что можно попробовать так тестовый проект сделать. Возможно, не все так проблематично, как может показаться.
Рустам Байназаров, Так и я не писал, что все так верстать, обратного то же не писал. В видео не раскрыт такой подход, исходники не нашел. Но он там упомянул, что можно так верстать и обычные сайты, не анимационные и это мощный механизм.
Имел в виду гайд, пример готовый с настроенным проектом, если использовать свой smtp. Потому что те уроки, что попались только по подключению библиотеки и отправки письма. Хотелось посмотреть с тонкой настройкой и контролем.