Как стать автором
Обновить

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

Этот jpg не элемент интерфейса, и несет сугубо информативный смысл. Так что переживем :)
*Здесь должна быть картинка «JPG vs PNG»*
*Здесь должна быть картинка «SVG vs PNG»*
Здесь написан текст и его достаточно!
Удалил ненавистный жпег. Да наступит дзен!
Пожалуйста:


Вживую здесь: svgvspng.com
Запилил в пост.
Залейте картинку в svg, можно на английском. А то просто смех: картинка png vs svg сама в png
>> SVG vs PNG
>> сохранено в PNG

Ох лол. Хабр же позволяет внедрять svg. А если бы ещё и через object позволял, то можно было бы с текстом взаимодействовать (как на svgvspng.com).
НЛО прилетело и опубликовало эту надпись здесь
А Comic Sans для скарказма использовали?
Это единственный широкодоступный рукописный (комиксный) шрифт в такой стилитике
Не хватает указание масштаба, например, «х2».
А вас не смущает, что png — сжатие без потерь? И картинка близко не имеет отношения к реальности…
НЛО прилетело и опубликовало эту надпись здесь
Если вы хороший верстальщик, вас однозначно раздражают растровые изображения.

Не-а. Я верстаю бумажную газету :)
Пост в хабе «Веб-разработка», так что понятно о каком верстальщике идет речь ;)
Там проблема растровых изображений ещё актуальнее. Так как мало того, что зачастую изображения спорного качества, так часто ещё и в CMYK надо конвертировать и с чёрным цветом играться, чтобы не получить каку на выходе.
В 21 веке, причем в середине его второго десятилетия с CMYK и генерацией черного уже не играются. Profile-To-Profile, Color Model Conversion и другие страшные вещи давно переехали in RIP. Ручное цветоделение в Photoshop осталось актуальным только для фрилансеров, которые готовят макеты под конкретные и постоянно разные условия печати. Остальные (тем более газетные) давно пользуются всякими PDF-based Workflow и не забивают себе мозг цветоделением каждой картинки.
Это в Вашем идеальном мире Вашей Москве так, а когда я работал в этой области (2002-2008) в нашем небольшом городе не было даже ни одной типографии, которая могла бы на 100% цветами попасть.
Ну во-первых я не в Москве (а в Екатеринбурге), во-вторых я из полиграфии (профессиональной на фуллтайме) ушел в 2001. Тем не менее, уже в середине 2000-х цветоделение начало появляться в растровых процессорах (например Scitex Brisque, Heidelberg Delta), а сейчас вообще 98% работают с PDF процессом и умеют Profile-to-Profile делать.
>Интернет – векторный
И что характерно, гипертекстовый.
Это уже Фидонет
Кстати, обзор Avocode будет кому-нибудь интересен?
Безусловно
Присоединяюсь, до начала публичной беты было бы интересно узнать мнение того, кто успел пощупать :)
Как раз хотел расспросить о нем. Вы им уже пользовались, он может полностью корректно открыть PSD или еще есть косячки?
Только вот вес у сложного вектора гораздо больше. И шансов подвесить браузер тоже.
Насколько сложного?
Пробовал как-то нарисованный автомобиль весом около 500 килобайт. Firefox ооочень-ооочень долго его загружал.
В вашем случае это явно контент, а не верстка
Вот классический пример тигра на SVG. Там, конечно, не 500 Кб, но рисунок достаточно сложный и грузится весьма быстро.
Благодаря отличному инструменту IcoMoon, можно с легкостью конвертировать всё это в WebFont кит, и с удобством использовать в верстке.

— Что делать когда вектор полноцветный?
— Предложите инструменты для экспорта «вектора» из PSD в SVG.
— Вы пишете про семантику, а потом предлагаете рисовать «графику» с помощью CSS3 и HTML разметки или шрифтов :)

Но всё же, учитывая результаты исследований за 2013 год, 91% населения планеты имеет мобильный телефон, и половина из них используют его как ОСНОВНОЕ средство для серфинга интернета!

www.liveinternet.ru/stat/ru/browsers.html?period=month
gs.statcounter.com/#all-browser-ww-monthly-201306-201406
— Что делать когда вектор полноцветный?

SVG

Предложите инструменты для экспорта «вектора» из PSD в SVG.

File -> Export -> Paths To Illustrator

File -> Export -> Paths To Illustrator

дорогой получается инструмент :)
А вы думаете, что фрилансеры Фотошоп покупают? :)
Что вы. Конечно покупают!
Крякать это богопротивно. Я вот демку использую. С официального сайта скачал месяца 2 назад.
Не такой уж и дорогой — $40–$50 в месяц.

creative.adobe.com/plans
По поводу экспорта шейпов в CVG:

Я ещё не проверял, но вдруг поможет.
psd2svg — cloudconvert.org/psd-to-svg

И недавно увидел плагин к фотошопу за ~20$, который шейпы из макета в SVG экспортирует — zeick.com/ (но ещё не покупал, поэтому о качестве его работы ничего сказать не могу).
Про Zeick слышал, по отзывам – годный, но сам не юзал.
Также, в Photoshop CC есть File -> Generate -> Image Assets.
И вообще, нужно пересаживать дизайнеров на Sketch!
Image Assets генерирует только растр (GIF, PNG, JPG).
О как. Большое спасибо за информацию!
да sketch дико удобный, особенно 3 версия
У Зейка есть бесплатная демо-версия c вотермарком, который легко трется, этого вполне достаточно для того, чтобы оценить его работу.

Если интересно могу сделать 50% скидку, специально для Хабра.
Я уже вчера купил полную версию =)
Но, думаю, многим бы понравилась такая акция.
Вот тогда Zeick за пол цены: Gumroad и PayPal

Пару недель точно провесит.

UMAX, Спасибо
— Что делать когда вектор полноцветный?

Смотря сколько цветов. Иногда и стопки сгодятся.
Вот наш плагин для Photoshop CC и CC 2014 для экспорта шейпов и групп в SVG

Zeick — Photoshop SVG Export

В общем-то, верстальщики просто пользуются тем, что умеет средний браузер среднего пользователя.

Пятнадцать лет назад все верстали таблицами не потому, что все поголовно были идиотами, а потому, что нормальной поддержки CSS2 не было, и надёжно располагать элементы по странице можно было только таблицами. Когда все браузеры научились позиционированию — стали верстать более правильно с точки зрения семантики.

Так и сейчас. Удобного инструмента для векторных изображений нет, зачем придумывать костыли? Какие-то шрифты мастерить, кошмар вообще. Пусть консорциумы и браузеры продумаю правильное решение, и тогда все будут им пользоваться.
Есть у меня такое, на подсознательном уровне. Ощущение от сайта, из-за графики, что сделан в 2003 и уже не очень доверяешь контенту, кажеться, что устаревшая информация.
Хочется согласиться с вами, но не могу, не доверяю… Из-за этого.
заметил ошибку, как только написал, но еще не научился редактировать.

UPD: уже научился.
А есть какая-нибудь вменяемая альтернатива многоцветным иконкам с тенями?
Не уверен, что понял вопрос. Вы имеете ввиду: альтернатива многоцветным иконкам, но без SVG?
Да — именно без SVG :)
Возьмем, например, форум и кучу мелких иконок вокруг каждого сообщения. Мои личные наблюдения показывают, что если .svg элементов на одной страничке больше 20, то браузер при прокрутке начинает жестоко тормозить при любой скорости процессора. Если же все иконки заменить на .svg, то в половине случаев страничка перестает открываться в десктопном фаерфоксе и начинает жесточайше тормозить в гуглохромах с периодическими зависаниями. Отсюда вопрос — чем заменить растр в случае если переход к одноцветным шрифтовым иконкам это «не вариант» по мнению заказчика, который всегда прав?
Плюс ко всему где взять дизайнера, который может толково рисовать что-то в векторе и насколько это будет дороже? :)
Вот странно. Я уже год каждый день смотрю на страницу где более 30 svg-элементов и ничего тормозит ни в одном из браузеров.
Ну возможно я тестировал на каких-то неправильных .svg… нужно повторить и виноват тогда
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Я использую Inkscape — у него есть встроенный оптимизатор. Но даже максимально обрезанные и облегченные SVG в большом количестве вызывают тормоза при прокрутке в браузерах. В разных по-разному — но тормоза на глаз вполне заметные. При том, что файлы достаточно простые и весом в несколько килобайт. Так что мне вот тоже интересно, каков этот процесс «правильной оптимизации»?
Есть, запретить дизайнерам использовать многоцветные иконки с тенями
Всё хорошо, только топикастер не учитывает производительность сабжевых мобильных устройств. Я уж лучше полазаю по сайту с не очень хорошим качеством, но всё же полазаю, нежели по ресурсу с крутым ретина-лайк svg, двумя кадрами в секунду и откликом через пол часа =)

*проверено на фонгапе
НЛО прилетело и опубликовало эту надпись здесь
Если на сайте все кнопки и меню свёрстаны векторно — я скорее всего не увижу этот сайт. Atom поднатужится и перегреется, ARM сожрёт всю батарею и повиснет при рендеринге очередной иконки. Боитесь растра? Думаю все, кто боится трафика, знают, где находится кнопка «отключить загрузку картинок».

А если серьёзно — фанатизм вас погубит. Гораздо раньше, чем этот ваш HTML5-вектор научится рендериться на видеокарте.
Эту страничку увидите? Как с производительностью?
Простите, но оно ужасно… Прыгающее в firefox меню вызывает неприятные ощущения.
Эта верстка еще в процессе. В FF не тестилось.
в Opera видимо тоже :-) (не та, которая Хром)
Как и в IE.
А что, кроме лого, на этой страничке в SVG?
Все иконки в векторе
Там выше спор идет именно за SVG. Иконочные шрифты здесь не в счет, а на представленной странице я увидел именно шрифты в псевдо-классах "::before" (кстати, если IE8 не поддерживаете, то имеет смысл писать псевдо-классы через двойное двоеточие ;)).
НЛО прилетело и опубликовало эту надпись здесь
For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2
www.w3.org/TR/selectors/#pseudo-elements.

Все же про вечность там не говорится и, быть может, в будущих версиях сию совместимость уберут.
НЛО прилетело и опубликовало эту надпись здесь
Грузится пол часа… Закрыл страницу — просто не дождался загрузки, хотя хотел посмотреть, очень.
Ибо слайды тяжеленные
А разработчик об этом не подумал конечно же ;)
До продакшена далеко еще
И зачем это показывать тогда?
Вам пытаются намекнуть, что у SVG есть очень серьезные проблемы с производительностью.
Я не намекаю, а прямым текстом говорю о том, что сайт тормозит безбожно. Причину автор ресурса назвал — ему виднее.
До продакшена далеко еще [2]
Я, например, вижу, но мой мак-мини mid2011 стал очень шумно дышать кулером.
Так вот почему мой «Toshiba Portege R600» (январь 2010) последнее время постоянно шумит кулером, когда я нахожусь на некоторых вебсайтах. Я-то думал, что кулер засорился, и даже разобрал ноутбук и почистил кулер, а оказывается, что просто раньше сайты были растровые, но кто-то за меня решил, что они не совсем чёткие, и теперь они должны рендериться в векторе, отбирая 50-70% CPU.

Про десктоп на базе Intel D510MO, который я собрал для родителей в начале 2011 года, я вообще молчу — исправно проработав 3 года, в последние несколько месяцев стал тормозить на каждом втором сайте.
Присоединяюсь, очень раздражает, когда некоторые сайты тормозят даже на 4-ядерном AMD Phenom'е. А со старого нетбука на Селероне многими сайтами вообще невозможно пользоваться, отклик на попытку скроллинга по 10-15 секунд! Ещё тормозов добавляет, когда в браузере добавляешь масштаба (иногда ведь хочется почитать сайт откинувшись на спинку кресла и не щурясь), да и вся красота при этом частенько расползается… Эй, веб-мастера, верните мне Web 1.0! ;)
+1. Из того что я знаю, самое жестяцкое это комментарии на Ленте… 4 ядра, 4 гига оперативки, SSD под систему, а блок комментов грузится секунд 10 и дико тормозит при скроллинге, если там 100+ комментов. Умудрились же…
Менюшки не тыкаются, а так — нормально. Кроме фоток под метр, особенно, когда они потом расцветают всего лишь вот в таком размере:
У древнего Symbian весь интерфейс был векторный и иконки в SVG, и не тормозило на процессорах с 200 MHz. Тормоза в браузерах, вероятно, дело времени. Почти никто не использует SVG, вот его и не оптимизируют. А можно хотя бы растрированные картинки кэшировать (в Firefox уже что-то сделано), тогда множество одинаковых иконок тормозить браузер не будут. Впрочем, не всё так просто, в WebKit кэширование наоборот пришлось убрать.
Проблемы две:

1. Некоторые иконки нельзя передать в векторе
2. Вектор, по сути, переносит на устройство и умножает в количество-просмотров-раз нагрузку на отрисовку графики

Но прогресс не остановить, поэтому дополнительно:

1. Подробный доклад про SVG: Позвольте представить: SVG
2. Много хороших статей про SVG с примерами в блоге «Про CSS»
НЛО прилетело и опубликовало эту надпись здесь
Например, здесь и тут пиктограммы, а иногда и графика векторные.
НЛО прилетело и опубликовало эту надпись здесь
совет про веб-шрифты плохой. там начинаются проблемы с алиасингом и пр. если уж делать, то сразу в свг.
Всё это круто, но лишь на словах, потому что даже в этой статье сплошные PNG, а не SVG, как же так, автор, говорим одно, а делаем другое. Даже картинка сравнения SVG с PNG сама является PNG, где правая часть искусственно замутнена.

Я то за использования SVG, тем более, что работать в Inkscape для меня на порядок удобнее чем в GIMP (имеется в виду что-нибудь рисовать, а не обрабатывать фотографии), было бы здорово, чтобы размещать на странице картинку просто <img src=«my_image.svg» width=«100» height=«100»>, и чтобы не было никаких проблем ни с IE, ни с каким другим браузером, десктопным или мобильным.

Это чем-то похоже на табличную вёрстку, так верстали не потому, что так хотели, а потому, что по-другому для тех браузеров было невозможно верстать, даже две колонки нельзя было сделать без таблиц, хотя и пытались. Как только браузеры позволили делать «дивную» вёрстку, все на неё и перешли. Кстати, верстать таблицами было одно мучение, сейчас вёрстка на порядок легче, есть куча колоночных CSS фреймворков, и зачастую можно даже не проверять в зоопарке браузеров, скорее всего заработает как надо во всех.
даже в этой статье сплошные PNG, а не SVG

PNG в этой статье – это контент! Это не интерфейс!
<img src=«my_image.svg» width=«100» height=«100»>, и чтобы не было никаких проблем ни с IE, ни с каким другим браузером, десктопным или мобильным


<img src="my-awesome-logo.svg" onerror="this.onerror=null; this.src='my-awesome-logo.png'"/>
Фу-фу-фу!

Есть же очень кошерный способ: lynn.ru/examples/svg/
Не знал, большое спасибо!
НЛО прилетело и опубликовало эту надпись здесь
Некоторые сайты смотрят на вашу статью как на незнамо что.
http://habrahabr.ru/post/133706/ (к сожалению, сей замечательный сайт уже не работает)
Жаль пропустил. Снэпшота не осталось?
Если интересно — могу рассказать о том, как я использую svg-спрайты через свг-шный «use» и автоматизации процесса сборки иконок в svg-спрайт.
Интересно!
Я уверен, что такого добра навалом на http://www.awwwards.com/
Векторный гипертекстовый интернет ©
Добавлю свои пять копеек:
1) использование шрифтов для иконок чревато проблемами, но это не критично в некоторых случаях. Но я бы предпочел таки SVG, чем именно шрифт;
2) я удивлен, почему на каждом углу говорят про Avocode, который еле вышел, как я уже несколько месяцев благополучно пользуюсь убийцей PS непосредственно от Adobe — projectparfait.adobe.com. Project Parfait бесплатный, если все подумали, что сейчас придется еще что-то платить.
Золотая середина, золотое сечение — для программирования эти термины не пустой звук, как для любой дисциплины сложнее метломахательства вообще.

Фотографии местности, животных, людей и вообще фотографии — это JPEG. Его и изобретали для этого. Спрайты, полупрозрачные графические слои — PNG. ПОЛУпрозрачность в настоящий момент может реализовывать корректно только формат PNG. Баннеры, особенно анимированные — GIF. Анимация больше ни в одном типе изображений не поддерживается, насколько мне известно. Канвы для рисования, инфографика, динамические изображения (персонажи в браузерных играх) — SVG. Иконки — web-шрифты. С учётом современных тенденций в дизайне и поддержки веб-шрифтов подавляющим большинством браузеров использование оных становится очень целесообразным. Элементы интерфейса — CSS. Меня не меньше вашего бесит, когда я вижу нарисованные рамки, которые можно было сделать на CSS. Раньше я исхитрялся при помощи HTML4/CSS2 творить вырвиглазные трюки, приводившие в замешательство неопытных пользователей (например, создать иконку на табличной канве с ячейками 1 на 1 пиксель). Получалось. А сейчас я с негодованием лицезрею на некоторых сайтах, как простейшие рамки и линии делают при помощи PNG-графики.
Векторы-шмекторы… А вот можно с помощью SVG нарисовать 7 красных перпендикулярных линий, причем одну из них зелеными чернилами, а другую прозрачными? В-)

А вообще, самого как обычного (но логичного) пользователя всегда бесят десятки крошечных картинок на сайтах, которые составляют кнопки, рамки, заливки и прочее. Доходит до смешного — даже банальные гипертекстовые ссылки (подчеркнутый текст) иногда делаются картинками!
это типа сео-фишка, чтобы враги сцылку не смогли скомуниздить :). Приходилось видеть сайты на которых даже весь текст в картинки загнан был :)
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.