Изображения в верстке. Хватит это терпеть



Надеюсь этот пост послужит ликбезом всем веб-дизайнерам, верстальщикам, и проджект-менеджерам. Если вы хороший верстальщик, вас однозначно раздражают растровые изображения. Вы ненавидите растр, и всё, что имеет заметные глазу пиксели. Если это не так, добро пожаловать под кат.

Всё началось давным-давно, когда верстальщики верстали при помощи таблиц. Такая верстка занимала не много времени, корректно отображалась во всех браузерах, и никто даже и не думал использовать какие-то там DIV-ы. Но время шло, Интернет развивался и эволюционировал, и возможности таблиц иссякли, а верстальщикам стало крайне некомфортно в табличной “клетке”. Тут то до них и дошло, что таблицы нужно использовать только для табличных данных! И интернетом стали править слои.

Настала эра WEB 2.0, овальные стеклянные кнопки с тенями, отражающийся логотип с бликами, и прочие “прелести”. Так получилось, что избавившись от одной заразы, подцепили другую: растровые изображения.

Главная мысль этого поста заключается в том, что Интернет – векторный, и растровые изображения должны использоваться ТОЛЬКО для фотографий. По своей сути любой сайт – это интерфейс, и все интерфейсы должны быть векторными. Год назад, начав пользоваться highDPI дисплеем на десктопе, я будто прозрел. Плохая верстка моментально детектировалась при первом посещении сайта, не нужно было даже открывать инспектор.

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



Учитывая, что большинство смартфонов сейчас имеют highDPI дисплеи, становится глупым использовать растровую графику в верстке, которая мало того, что заставляет глаза пользователя незамедлительно покинуть глазницы, но и имеет вполне ощутимый вес, что не менее критично для пользователей мобильных устройств. Вот, почему нецелосообразно использовать @2x растровые изображения, о которых вы сейчас подумали.

Верстая без использования растровых изображений, вы получаете немало весомых преимуществ:

  • Малый вес, а значит быстрая скорость загрузки.
  • Прекрасное отображение на highDPI дисплеях.
  • Гибкость и масштабируемость всего и вся


Лично я прихожу в бешенство, когда вижу очередной макет, в котором 30+ векторных простых иконок, и они зачем-то насильно растрированы. Зачем?



Дизайнеры, запомните! Фотографии – растр, всё остальное вектор.

Благодаря отличному инструменту IcoMoon, можно с легкостью конвертировать всё это в WebFont кит, и с удобством использовать в верстке.



А еще лучше, использовать в дизайнах FontAwesome, который активно поддерживается сообществом, и развивается. Можно с легкостью установить этот шрифт в систему, и использовать его в графическом редакторе, в своих макетах, копируя иконки с http://fontawesome.io/cheatsheet.



Тоже самое с градиентами. Каждый второй дизайнер считает своим долгом кинуть градиент на шейп, и кликнуть по «Rasterize Layer Style». А ты потом обтыкайся своей пипеткой по грёбаному градиенту, пытаясь подобрать цвета. Я стал относиться к этому с особым трепетом, начав пользоваться CSSHat от Source.



Кстати, эти ребята разрабатывают “фотошоп-киллер” для верстальщиков, под названием «Avocode». Проект сейчас находится на стадии private-beta, и пока сильно ограничен в возможностях. Обзор: http://habrahabr.ru/post/231381/



Напоследок хочу сказать, что возможности CSS/SVG практически безграничны, тем более, что им на помощь спешат WebGL и Canvas. В этом можно убедится, покопавшись на http://codepen.io.





Спасибо, что дочитали до конца, и запомните: Интернет – векторный!

UPD:
Пара ссылок от pepelsbey
1. Подробный доклад про SVG: Позвольте представить: SVG
2. Много хороших статей про SVG с примерами в блоге «Про CSS»

И от SVGen
A Compendium of SVG Information

UPD2:
Запилил обзор Avocode

UPD3:
k3nny продолжил тему в своём посте SVG, Iconfonts vs PNG
Метки:
Поделиться публикацией
Похожие публикации
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама
Комментарии 125
  • +18
    Retina, говорите? А чего такой ужасный jpg?
    • –34
      Этот jpg не элемент интерфейса, и несет сугубо информативный смысл. Так что переживем :)
      • +21
        *Здесь должна быть картинка «JPG vs PNG»*
        • –6
          *Здесь должна быть картинка «SVG vs PNG»*
          • +7
            Здесь написан текст и его достаточно!
            • +3
              Удалил ненавистный жпег. Да наступит дзен!
            • +2
              Пожалуйста:


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

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

                Не-а. Я верстаю бумажную газету :)
                • +1
                  Пост в хабе «Веб-разработка», так что понятно о каком верстальщике идет речь ;)
                  • +3
                    Там проблема растровых изображений ещё актуальнее. Так как мало того, что зачастую изображения спорного качества, так часто ещё и в CMYK надо конвертировать и с чёрным цветом играться, чтобы не получить каку на выходе.
                    • 0
                      В 21 веке, причем в середине его второго десятилетия с CMYK и генерацией черного уже не играются. Profile-To-Profile, Color Model Conversion и другие страшные вещи давно переехали in RIP. Ручное цветоделение в Photoshop осталось актуальным только для фрилансеров, которые готовят макеты под конкретные и постоянно разные условия печати. Остальные (тем более газетные) давно пользуются всякими PDF-based Workflow и не забивают себе мозг цветоделением каждой картинки.
                      • 0
                        Это в Вашем идеальном мире Вашей Москве так, а когда я работал в этой области (2002-2008) в нашем небольшом городе не было даже ни одной типографии, которая могла бы на 100% цветами попасть.
                        • 0
                          Ну во-первых я не в Москве (а в Екатеринбурге), во-вторых я из полиграфии (профессиональной на фуллтайме) ушел в 2001. Тем не менее, уже в середине 2000-х цветоделение начало появляться в растровых процессорах (например Scitex Brisque, Heidelberg Delta), а сейчас вообще 98% работают с PDF процессом и умеют Profile-to-Profile делать.
                  • +75
                    >Интернет – векторный
                    И что характерно, гипертекстовый.
                    • 0
                      Это уже Фидонет
                    • +25
                      Кстати, обзор Avocode будет кому-нибудь интересен?
                      • +9
                        Безусловно
                        • +5
                          Присоединяюсь, до начала публичной беты было бы интересно узнать мнение того, кто успел пощупать :)
                          • +1
                            Как раз хотел расспросить о нем. Вы им уже пользовались, он может полностью корректно открыть PSD или еще есть косячки?
                      • +11
                        Только вот вес у сложного вектора гораздо больше. И шансов подвесить браузер тоже.
                        • 0
                          Насколько сложного?
                          • +4
                            Пробовал как-то нарисованный автомобиль весом около 500 килобайт. Firefox ооочень-ооочень долго его загружал.
                            • +6
                              В вашем случае это явно контент, а не верстка
                          • +3
                            Вот классический пример тигра на SVG. Там, конечно, не 500 Кб, но рисунок достаточно сложный и грузится весьма быстро.
                          • +5
                            Благодаря отличному инструменту 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
                            • +2
                              — Что делать когда вектор полноцветный?

                              SVG

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

                              File -> Export -> Paths To Illustrator

                              • +1
                                File -> Export -> Paths To Illustrator

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

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

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

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

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

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

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

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

                                          Zeick — Photoshop SVG Export

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

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

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

                                                UPD: уже научился.
                                            • 0
                                              А есть какая-нибудь вменяемая альтернатива многоцветным иконкам с тенями?
                                              • 0
                                                Не уверен, что понял вопрос. Вы имеете ввиду: альтернатива многоцветным иконкам, но без SVG?
                                                • +8
                                                  Да — именно без SVG :)
                                                  Возьмем, например, форум и кучу мелких иконок вокруг каждого сообщения. Мои личные наблюдения показывают, что если .svg элементов на одной страничке больше 20, то браузер при прокрутке начинает жестоко тормозить при любой скорости процессора. Если же все иконки заменить на .svg, то в половине случаев страничка перестает открываться в десктопном фаерфоксе и начинает жесточайше тормозить в гуглохромах с периодическими зависаниями. Отсюда вопрос — чем заменить растр в случае если переход к одноцветным шрифтовым иконкам это «не вариант» по мнению заказчика, который всегда прав?
                                                  Плюс ко всему где взять дизайнера, который может толково рисовать что-то в векторе и насколько это будет дороже? :)
                                                    • +1
                                                      Вот странно. Я уже год каждый день смотрю на страницу где более 30 svg-элементов и ничего тормозит ни в одном из браузеров.
                                                      • 0
                                                        Ну возможно я тестировал на каких-то неправильных .svg… нужно повторить и виноват тогда
                                                        • НЛО прилетело и опубликовало эту надпись здесь
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                              • +2
                                                                Я использую Inkscape — у него есть встроенный оптимизатор. Но даже максимально обрезанные и облегченные SVG в большом количестве вызывают тормоза при прокрутке в браузерах. В разных по-разному — но тормоза на глаз вполне заметные. При том, что файлы достаточно простые и весом в несколько килобайт. Так что мне вот тоже интересно, каков этот процесс «правильной оптимизации»?
                                                                • +1
                                                                  Попробуйте использовать SVGO github.com/svg/svgo
                                                                  А тут рассказ про него tech.yandex.ru/events/yagosti/wsd-msk-nov-2012/talks/453/

                                                                  Прошу прощения за такие ссылки, Карма по-другому не позволяет выставлять.
                                                      • 0
                                                        Есть, запретить дизайнерам использовать многоцветные иконки с тенями
                                                      • +16
                                                        Всё хорошо, только топикастер не учитывает производительность сабжевых мобильных устройств. Я уж лучше полазаю по сайту с не очень хорошим качеством, но всё же полазаю, нежели по ресурсу с крутым ретина-лайк svg, двумя кадрами в секунду и откликом через пол часа =)

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

                                                          А если серьёзно — фанатизм вас погубит. Гораздо раньше, чем этот ваш HTML5-вектор научится рендериться на видеокарте.
                                                          • –9
                                                            Эту страничку увидите? Как с производительностью?
                                                            • +7
                                                              Простите, но оно ужасно… Прыгающее в firefox меню вызывает неприятные ощущения.
                                                              • –1
                                                                Эта верстка еще в процессе. В FF не тестилось.
                                                                • +3
                                                                  в Opera видимо тоже :-) (не та, которая Хром)
                                                                  • –1
                                                                    Как и в IE.
                                                                • –1
                                                                  А что, кроме лого, на этой страничке в SVG?
                                                                  • 0
                                                                    Все иконки в векторе
                                                                    • 0
                                                                      Там выше спор идет именно за SVG. Иконочные шрифты здесь не в счет, а на представленной странице я увидел именно шрифты в псевдо-классах "::before" (кстати, если IE8 не поддерживаете, то имеет смысл писать псевдо-классы через двойное двоеточие ;)).
                                                                      • НЛО прилетело и опубликовало эту надпись здесь
                                                                        • 0
                                                                          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.

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

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

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

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

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

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

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

                                                                                    PNG в этой статье – это контент! Это не интерфейс!
                                                                                    • +2
                                                                                      <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'"/>
                                                                                      • +7
                                                                                        Фу-фу-фу!

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

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

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

                                                                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.