Вопрос верстальщикам. Плюсы и минусы, вёрстка vs. изображение

Question

[Иван Желудков]

В последнее время многие верстальщики стараются реализовывать практически всё с помощью html/css, нежели использовать изображение.
Первым грубым примером может быть кнопка. В одном случае реализована с помощью спрайта или отдельных изображений, во-втором случае с помощью html, то есть с использованием только кода.
Второй пример. Вот так я реализовал анимацию течения воды из крана на html/css, используя только картинку воды, которая движется на фоне и создаёт очень реалистичный эффект. Так же эту раковину можно было полностью нарисовать в Photoshop-е и вставить картинку, но только анимацию реализовать на html/css.
Третий пример. Более сложный и серьёзный. Сайт "Тематических медиа". У них на сайте Flat дизайн реализован простой вставкой картинки на бэкграунд секции. Но тоже самое можно было сверстать. Да, это сложнее.
Так вот, во-первых как вы реализовываете подобное. Во-вторых, какие положительные и отрицательные стороны вы видите в разных случаях. Возможно вы считаете, что это просто задротство, пусть люди загрузят страницу немного подольше, но реализовывать это вёрсткой не валидно. Приветствуются любые мнения.
P.S. Речь не идёт о красоте. Естественно в сложных дизайнах на сверстаешь на div-ах элементы, речь идёт о простых flat дизайнах, где такое возможно и не так уж сложно реализуется.

Comments

[Иван Желудков]

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

[Par Mactep]

очень реалистично течет вода) http://clip2net.com/s/6daQU4
firefox 25.0.1

[Иван Желудков]

@parmactep, я забыл сказать, что там вёрстка под -webkit-, так как это всё таки сервис, где я редко занимаюсь кроссбраузерностью, так как аудитория там не требует этого. Поэтому владельцы Хромов, увидят и воду и кран. На сайте, разрабатываемом, я же использую плагин, который префиксы добавляет всем какие-нужно для каждого индивидуально. Поэтому на сайте можешь посмотреть не только эту, но и несколько других анимаций.

Answer 1

[AlexKeller]

Кнопки и подобные - некрупные - элементы дизайна стараюсь делать CSS'ом...
Во-первых, обычно меньше весит...
Во-вторых, если завтра придут и скажут, что мой зеленый недостаточно красный, то в Firebug'е подобрать и заменить цвет будет проще...
Ну и в-третьих, произвольный размер шрифта, все тянется и занимает ровно столько места, сколько требуется...

Comments

[Иван Желудков]

Да, как я уже писал выше, оперировать с вёрсткой проще, когда она написана, а не "нарисована".

Answer 2

[Алексей Ярошевич]

Странно, что никто не сказал про рендеринг.
Всякие CSS3 фишки весят меньше, но рисуются на клиенте. И каждая перерисовка будет заставлять браузер перерисовывать и эти ваши модные штуки. Таким образом, скорость работы сайта, перегруженного css3 может быть заметна глазу на слабых машинках — это уже не хорошо.
С другой стороны, как уже много говорили, перекрасить картинку — автоматически крайне сложно, иногда нереально, а перекрасить css3 — не сложнее, чем скушать печеньку.
Нужно искать золотую середину. Не использовать новомодные штуки там, где они не нужны, и стараться использовать там, где будет полезно, даже если для ie6/7/8/9 придется делать отдельные стили. Их все равно придется делать отдельно.

Comments

[Юрий Лобанов]

Да, упоминание слабых машин крайне важно. Совсем недавно, не очень сложная css3 анимация страшно тупила на компе у заказчика. Что касается старых браузеров, я обычно стараюсь верстать так, чтобы в старом браузере все было читаемо, ничего никуда не залезало и так далее, что же до красот - опускаю. Например, делаю плавную замену фона, на старых же браузерах эта замена резкая - объяснить заказчику, что данная вещь не критична не составляет труда.

[Иван Желудков]

В целом согласен, но мне очень понравилась вот эта фраза: "а перекрасить css3 — не сложнее, чем скушать печеньку"

[Masterme]

@webvany при наличии соответствующих инструментов - да. в противном случае проще картинку перекрасить

Answer 3

[Masterme]

Задротство. Текст имеет смысл делать текстом чтобы он индексировался. Какие-то эффекты, если они будут выглядеть одинаково, - без разницы.

Comments

[Иван Желудков]

Но ведь это влияет и на размер, то есть страница загружается дольше, если использовать изображения. Чаще всего.

[Masterme]

@webvany зато делается быстрее. ну, если размер важен - тогда ладно. смотрите сами, в общем, просто это не принципиально.

[Masterme]

@webvany я иногда вставляю маленькие изображения прямо в css в виде data:base64

[Иван Желудков]

@Masterme с помощью каких сервисов/программ ты конвертируешь в такой формат. Насколько выгоднее о размеру получается?

[Masterme]

@webvany по размеру не выгоднее, а по количеству запросов браузера - выгоднее. вставляю вот такой строкой '"data:'.$mime.';base64,'.base64_encode(file_get_contents($file)).'"'

[Иван Желудков]

Можно подробнее, куда вставлять ссылку и прочее. Это разве не тот метод, где вместо картинки длинный код?

[Masterme]

@webvany эта та же картинка, просто в виде протокола data:

[Masterme]

@webvany вставлять в css-файл , выглядит что-то типа background-image: url("data:image/png;base64,iVBORw0KGgoAAAA....BDF=")

[Masterme]

как вставлять - уж решите сами, либо preg_replace либо как-то ещё

[Иван Желудков]

@Masterme В смысле где-то можно превратить картинку в код? или нужен плагин? Какими средствами создаётся.

[Masterme]

@webvany чистый пхп, ничего больше

[Masterme]

@webvany откройте уже гул и почитайте что такое протокол data

[Иван Желудков]

Да да, я уже понял, спасибо

[Родион Мещеряков]

@webvany есть много вариантов узнать data:uri. Я обычно пользуюсь встроенной функциональностью плагина Emmet, установленного в Sublime.

Answer 4

[Steely]

Весь вопрос сводится к простому - затраты времени. Если у вас есть возможность (хорошая зарплата, мало задач, много времени, специфическое задание) и желание делать все так как вы описали - кто же вам запретит?

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

Comments

[Иван Желудков]

А если стоит вопрос скорости загрузки и это уже важно для клиента?

[Steely]

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

[Алексей Ярошевич]

@Steely Возьмем по максимуму — минимум картинок, все в css3. Средний сайт, 5 разных кнопок с закруглениями в нескольких цветовых темах и нескольких размерах. 5х3х3 = 15 штук. Градиенты, шмадиенты, прочее — ну еще штук 15. Скажем, -30 запросов с куста, +графика из n килобайт превращается в ~2n сотен байт, или меньше. Всякие спрайты в css base64 и в gzip. По объему никак не должны проиграть. В идеале у нас останется 3 запроса к серверу, html, css, js. Скорость отрисовки в целом сайта уменьшится, но увеличится скорость отдачи и первый цикл рендера будет много раньше. Как бы вы не крутили веб-сервера и keep-alive в браузере — каждое подключение все равно будет занимать весомую часть времени запроса, в общем, тут не должно быть споров. И миллисекунд очень много выиграется. Если все в совокупности сложить, должно быть до 50-70% сокращения времени на загрузку. Но немного вырастет время на отрисовку. Даже если в итоге получится 20-30%, это 200мс→150мс. Весомо.

[Иван Желудков]

То есть вы считаете, что нет смысла таким образом оптимизировать сайт. Проигрыш по времени перейдёт на отрисовку в браузере того, что свёрстано?

Answer 5

[Матвей Правосудов]

Никто даже и не подумал про удобность. Кодовую кнопку легче растянуть, нежели изображение. А вот фото и картинки - это уже совсем другая история.

Comments

[Иван Желудков]

Да, хороший пример, легко оперировать с кодом, нежели с элементами, вставленными с помощью изображений.

[Иван Желудков]

А если речь идёт именно об иллюстрациях, а не об UI элементе.

Answer 6

[Юрий Лобанов]

У меня практически не возникает таких вопросов, так как чаще всего требуется поддержка, о боги, ie6.
И это на самом деле тоже ответ.
А в общем и целом - по ситуации, как пишет Кирсанов - для дизайнера идеальным форматом является картинка или pdf, ничего никуда не денется, все будет в точности так, как задумал дизайнер. Но сами понимаете - в наше время это просто невероятно, делать, например, заголовки картинкой. Думаю, со временем, все простые и не очень иллюстрации будут делаться версткой.

Comments

[Иван Желудков]

Я стараюсь всё, что могу делать вёрсткой. Спасибо за ответ.

[Иван Желудков]

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

[Юрий Лобанов]

Боюсь, что я всего-лишь говорю о суровой реальности, даже сейчас это практикуется. Ну а уж в плане баннеров, не флеш, а просто jpg: в сущности чаще всего это просто текст с иллюстрацией, и часто вижу текст склеенный вместе с картинкой в одно изображение.

[Иван Желудков]

Ну это либо очень плохие верстальщики, либо старомодные верстальщики, которые учились давно.

[Юрий Лобанов]

http://lifestylefederation.com/ - очень милый сайт, на мой взгляд. И на главной текст сделан картинкой :-)

[Иван Желудков]

Действительно, новый сайт с параллакс скроллом, тем не менее используют картинки. У них все заголовки картиночные. Видимо поэтому я так долго ждал, когда загрузится страница

[Юрий Лобанов]

@webvany, и это не единственный пример. Вполне вероятно, что Вы можете не замечать местами такие вот случаи. На сайтах дизайнеров таких примеров много.

Answer 7

[pomeo]

Если вы для сайта соседа дяди Васи делаете html + css вместо картинки, которая сохранила бы 10x времени, то вам просто нечего делать. Если вы поддерживаете сайт на который ходят пара десятков тысяч человек в день, то убирание картинок из загрузки сильно сократит трафик. Превращение ещё пачки мелких картинок в base64 уменьшит запросы на сервер.

Comments

[Иван Желудков]

Я делаю на заказ сайты. Не смотря на то, что мои клиенты чаще всего в IT не разбираются вообще, я стараюсь делать всё качественно, будто бы проверять будет такой же как я человек. А насчёт base64, надо почитать об этом, так как действительно полезная штука говорят. И вот вопрос насчёт скриптов. Например есть скрипт, который можно указать ссылку на сервера гугла и посетитель его оттуда скачает или загрузить его к себе на сервер и пользователи будут качать у меня. Как поступить лучше для сервера?

[Par Mactep]

@webvany скрипты лучше от гугла отдавать... Есть масса плюсов такого подхода...

[Иван Желудков]

А если например какой-то js плагин, его же можно раздавать с сайта автора. Тоже хорошо?

[pomeo]

@webvany надо с cdn раздавать, а не сайта автора, у гугла раздача с cdn.

[Иван Желудков]

@pomeo спасибо, я нашёл хорошую статью на эту тему. Буду знать (http://habrahabr.ru/post/109309/)

Answer 8

[Юрий Лобанов]

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

Comments

[Иван Желудков]

Понимаю. Я в photoshop-е очень мало работаю, но иногда приходится верстать по psd макету и что в этом плохого? Насчёт шрифтов, ну несколько дней это вы перебрали, за несколько дней можно качественную страницу сверстать. Я например один логотип сначала вставил картинкой, а потом шрифтом, так как там только текст. И сколько не сравнивал две страницы, разницы вообще не заметил. Бывают исключения. Насчёт прелоадера, если страница будет с большим количеством картинок, это сильная нагрузка на сервер, и я думаю это уже веская причина иногда верстать заголовки. Что там быстрый интернет, у многих до сих пор IE6-8 стоит, irl компании имеют аудиторию не сидящую в интернете, соответственно им интернет скорость не играет сильной роли в жизни, как для посетителя тостера например. Так вот многое ещё зависит от аудитории. Но мне не сильно непонятно, как можно заголовки изображениями делать. Меня волнуют лишь мнения разных сторон, так как я занимаюсь вёрсткой и хочу знать как верстают другие люди, можно найду какие-то лайфхаки для себя.

Answer 9

[Oleg Denisov]

Тут от случая к случаю, от места к месту. Кнопки, текст, картинки в круглых рамках, с тенями и всякими мелкими плюшками лучше через стили и разметку, приятнее будет потом открыть сайт в каком-нибудь ipad или другом устройстве в высокой плотностью точек и насладится четко отрисованными браузером, сверстанными элементами, нежели вставленной картинкой кнопкой или текстом

Comments

[Иван Желудков]

Вот ещё один плюс, картинки, как я понимаю не очень приятно на глаз отображаются на экранах, с высоким dpi? Верно?

[Anton Guz]

@webvany , нет, не обязательно. Во-первых, у вас есть возможно поставлять картинки с высоким dpi. Если речь о <img /> Во-вторых, можно использовать @media, если картинка ставится через css.

[Иван Желудков]

@aguz можешь вкратце объяснить, что делают эти параметры. Так как гугл не позволяет вбивать запросы такого типа и оставляет только media или img.

[Anton Guz]

@webvany извиняюсь, это своего рода опечатка. &lt;img /&gt; - это тег img. Должно было быть так <img /> . &#64;media - речь про Media queries: http://htmlbook.ru/css/media , https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

[Иван Желудков]

Ааа, теперь всё понятно, спасибо.

Answer 10

[Anton Essential]

Я это делаю вот так , потому что мне тупо по приколу , прёт , и пофиг на время

Comments

[Иван Желудков]

У меня такая же ситуация. Но это задротство, поэтому я хочу узнать мнение тех, кто так не делает и те, кто так делают. Я понял тебя, спасибо.

[Родион Мещеряков]

@AntonEssential Мощно! Сколько времени примерно ушло? С другой стороны, к работе такого уровня и требования будут соответствующие. А у вашей работы нет 100% соответствия реальным теням, проекциям и прочим вещам реального мира, и это бросается в глаза. Тем не менее, работа вызывает уважение. Удачи!

[Anton Essential]

два дня провозился , ну да это не академический рисунок . )

[Иван Желудков]

@rodionme не хочу "понтоваться", но у меня на анимации во flat дизайне уходит пару часов. Вот пример http://cdpn.io/hogvp (где то 3 часа делал). Я не копировал, поэтому дольше, чем можно ожидать. Придумывал иллюстрацию на ходу.

Answer 11

[Anton Guz]

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

Здесь нет однозначного ответа. Он лежит в плоскости:
- ваши знания (от этого будет зависеть время, потраченное на вёрстку)
- перечень девайсов, под которые нужно решить проблему (например Вадим Макишвили делится как напечатать непечатаемый фон http://vimeo.com/74930902 )
- сложность той картинки, которую нужно сделать в html (практически нет ничего невозможного http://codepen.io/jaysalvat/full/HaqBf)

Вот и получится, что плюсы и минусы будут меняться от примера к примеру.

Comments

[Иван Желудков]

Вопрос и был создан с целью холивара, так как меня интересуют мнения двух сторон. Да, про то, что нет ничего невозможного я знаю. Я кидал кран с водой в ссылке в тексте вопроса, но он только под -webkit-, поэтому только на Chrome работает.

Answer 12

[LucemFerre]

Лично мое мнение, что делать надо так, что бы сократить трудозатраты сейчас, по возможности, на будущее. Но при этом не создавать неудобств для пользователя.
Если можно сделать что то статичное, картинкой за пол минуты, и эта картинка будет достаточно легкой, то единственный профит, который мы получим, сверстав это на CSS - это "прокачка скила" и возможности показать это на собеседовании (еще бы кроссбраузерно было :) ).
С другой стороны, если мы делаем какой то элемент UI, частенько они могут понадобиться нам в другом размере/цвете/...какое то другое небольшое изменение..., есть смысл потратить некоторое время на создание этого элемента на CSS.

Comments

[Иван Желудков]

Согласен.