Comments 21
Оригинал в png весит 1,1 Mб, а оригинал в jpg весит 807 Kб.
Что такое оригинал в jpg?
Ниже приведена таблица с разрешением и весом после изменения разрешения.
Это таблица чего и о чем? Вы даже ссылку на картинку не дали. Что таблица должно сказать читателю?
Оригинальное изображение взятое из макета без каких-либо модификаций. К сожалению я не понимаю, какую ценность даст читателю ссылка на картинку, добавить её что бы что?
Таблица служит показателем того, что произошло с весом картинки после ресайза и оптимизации.
Таблица не служит показателем... ничего!
Во-первых, что значит "png"? PNG8 или PNG24? Это разные форматы, на минуточку.
Во-вторых, с каким уровнем компрессии вы жмёте жпег? Там вес картинки в разы может отличаться при сопоставимом визуальном качестве.
В-третьих, наконец всё зависит от конкретного изображения. Многие картинки в lossless png24 весят меньше чем в jpeg.
Оригинальное изображение взятое из макета без каких-либо модификаций.
Как взятое? Какой субсемлинг, квантование?
Таблица служит показателем того, что произошло с весом картинки после ресайза и оптимизации.
Что такое «оптимизация»? У меня такое чувство что вы вообще не понимаете что такое JPEG и как работает сжатие с потерями. За всю статью вы ни разу не упомянули, что размер JPEG зависит не от формата, а от вашего желания, то есть он настраивается. Для вас эта магия называется «оптимизация».
Таблица служит показателем того, что произошло с весом какой-то рандомной картинки, которую читатель даже не видел, после после ресайза и непонятной вам магии. Так что эта таблица должно сказать читателю?
я не понимаю, какую ценность даст читателю ссылка на картинку, добавить её что бы что
Это ещё одна проблема. Вы даже не понимаете, что разные форматы лучше подходят для разных изображений.
Что-то статья направлена на разработчиков, чей уровень сопоставим со слушателями онлайн-курсов. Где вы таких находите...
По поводу веса изображений и оптимизации - какие-то онлайн-сервисы, непонятно как работающие... В индустрии давным-давно есть "софтовый стандарт" - Фотошоп. В котором до сих пор работает сочетание Ctrl+Shift+Alt+S. И в котором наглядно можно выбрать уровень "компрессии" для любого формата.
А кто тут так активно минусует комментарии с критикой? Те самые "фронтенд-разработчики ", которым надо рассказывать про тэг picture, css-свойство object-fit и атрибут "loading"? Так вы не с того начали! Вы расскажите про тэги вообще, что такое html, css и т.п.
Вы что своим пиаром Хабр превратили?
А если объективно, то вы предлагаете каждому фронтендеру покупать лицензию фотошопа? Более того, статья не про выбор инструмента, чем сжимать и ресайзить фотографии, а в целом о подходе и правилах работы с картинками, на что наличие фотошопа не влияет.
Ну я не знаю, можете, конечно, отказаться от ФШ, Фигмы и условного XD - но в чём вы макеты тогда делаете?))
Более того, статья не про выбор инструмента, чем сжимать и ресайзить фотографии
А надо бы было рассказать. Рассказали бы в каких случаях выигрыш в весе даст жпег, в каких пнг, где с webp придётся повозиться, а где только svg.
Упомянули бы уж тогда, что с нынешним зоопарком разрешений экранов гаджетов, не стоит привязывать размеры растровых картинок к размеру вьюпорта.
Про случаи, когда <img> "вдруг" начинает растягивать флекс-контейнер.
Ну и т.п. По этой теме можно тонны действительно полезной инфы выдать. Вместо этого вы выдали такие азы... Признайтесь честно - это социальная нагрузка? Сейчас ваша очередь в корпоративный блог "техническую статью минимум на 1000 знаков" писать?
Да норм. Лишний раз напомнить не помешает.
Буквально пару недель назад осматривая функционал и код соседней команды наткнулся на подобный случай где простейшая картинка весила овердофига.
Простейший прогон этой картинки через какой-нибудь tinypng.com (tinyjpg.com) (пондочек любят все :) ) без потери качества эффективно ужал картинку почти вдвое.
При этом ребята молодцы. Но вот среди космических кораблей бороздящих просторы вселенной про банальные вещи как-то подзабы(И)ли.
А потом плачемся что приложение фонарика на телефоне весит 100 мегабайт.
Хорошая статья, про сдвиг макета прям актуальная проблема, не раз сам в такие кейсы попадался и переходил на сайт рекламы тыкая на баннер.
Уверен, там это не баг, а фича. Эталонный пример - яндекс Погода для андроид. Реклама не грузится сразу при открытие приложения (наверняка специально откладывают). И когда вы уже прям замахнулись тыкнуть на "сегодня" чтобы посмотреть более подробный прогноз, подгружается реклама как раз в эту область, сдвигая всё вниз.
И вот после таких статей люди начинают выкладывать скриншоты с кучей текста в JPG с лютой компрессией. Ну и что, что текста уже не видно. Зато как мало весит картинка!
нужен ли альфа-канал? Если нужен, берём png, в противном случае берём jpg, так как он меньше весит, а качество визуально идентично в подавляющем большинстве случаев.
сильное заявление, конечно.
Полезно. Спасибо что напомнили.
Все это давно уже изучал, но по факту и правда частенько забывается, особенно когда думаешь о дизайне в целом и о более важных моментах вёрстки и функциональности проекта. Думаешь картинку поставил и ладно, потом к ней вернёшься, а нет )))
Вот про прыгающие элементы и неожиданно появляющиеся кнопки - сейчас это повсеместно встречается. Я недавно осаго себе оформил с ошибочными датами в приложении Тинькофф, т. к. пока экран подтверждения заказа долго подгружался, у меня у телефона снизилась подсветка. А нажал в свободное место, чтобы вернуть подсветку, а в этот момент возник экран с кнопкой аккурат там где я нажал. Аналогичные кейсы в озоне - у тебя вроде бы подгрузилась страница, я щёлкаю в поле поиска, фигак, подгружается что-то ещё, и там где я кликнул, вместо поиска оказался элемент выбора адреса доставки. Дико раздражает.
Всю жизнь интересуют такие вопросы:
Есть десктоп мониитор с 3840*2160 родных пикселей. Юзер не трогал масштабирование ни в ос, ни в браузере, ему нравится всё мелкое допустим. Этому клиенту шлём картинку 3840*2160. Правильно?
Есть телефон, ретина-дисплей с родным разрешением также 3840*2160px. Но встроенное масштабирование допустим 1:4 - т.е. 960*540 виртуальных css-пикселей. Вопрос - какую картинку слать этому клиенту? - 3840*2160 (у него ж ретина, нельзя обделять), или слать мыло 960*540 (у него ж мобильный, с дорогим и плохим интернетом, и он в метро)?
Если принять, что у целевой аудитории только ретина-мобильные, и хороший бесплатный wifi - можно ли слать просто одну картинку 3840*2160 на всех клиентов, не заморачиваясь с picture/src-set и прочими intersectionObserver?)
Простые правила при работе с растровыми изображениями на каждый день