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

В последнее время многие верстальщики стараются реализовывать практически всё с помощью html/css, нежели использовать изображение.
Первым грубым примером может быть кнопка. В одном случае реализована с помощью спрайта или отдельных изображений, во-втором случае с помощью html, то есть с использованием только кода.
Второй пример. Вот так я реализовал анимацию течения воды из крана на html/css, используя только картинку воды, которая движется на фоне и создаёт очень реалистичный эффект. Так же эту раковину можно было полностью нарисовать в Photoshop-е и вставить картинку, но только анимацию реализовать на html/css.
Третий пример. Более сложный и серьёзный. Сайт "Тематических медиа". У них на сайте Flat дизайн реализован простой вставкой картинки на бэкграунд секции. Но тоже самое можно было сверстать. Да, это сложнее.
Так вот, во-первых как вы реализовываете подобное. Во-вторых, какие положительные и отрицательные стороны вы видите в разных случаях. Возможно вы считаете, что это просто задротство, пусть люди загрузят страницу немного подольше, но реализовывать это вёрсткой не валидно. Приветствуются любые мнения.
P.S. Речь не идёт о красоте. Естественно в сложных дизайнах на сверстаешь на div-ах элементы, речь идёт о простых flat дизайнах, где такое возможно и не так уж сложно реализуется.
  • Вопрос задан
  • 4864 просмотра
Решения вопроса 12
AlexKeller
@AlexKeller
Кнопки и подобные - некрупные - элементы дизайна стараюсь делать CSS'ом...
Во-первых, обычно меньше весит...
Во-вторых, если завтра придут и скажут, что мой зеленый недостаточно красный, то в Firebug'е подобрать и заменить цвет будет проще...
Ну и в-третьих, произвольный размер шрифта, все тянется и занимает ровно столько места, сколько требуется...
Ответ написан
qfox
@qfox
Ответы есть у меня
Странно, что никто не сказал про рендеринг.
Всякие CSS3 фишки весят меньше, но рисуются на клиенте. И каждая перерисовка будет заставлять браузер перерисовывать и эти ваши модные штуки. Таким образом, скорость работы сайта, перегруженного css3 может быть заметна глазу на слабых машинках — это уже не хорошо.
С другой стороны, как уже много говорили, перекрасить картинку — автоматически крайне сложно, иногда нереально, а перекрасить css3 — не сложнее, чем скушать печеньку.
Нужно искать золотую середину. Не использовать новомодные штуки там, где они не нужны, и стараться использовать там, где будет полезно, даже если для ie6/7/8/9 придется делать отдельные стили. Их все равно придется делать отдельно.
Ответ написан
@Masterme
Задротство. Текст имеет смысл делать текстом чтобы он индексировался. Какие-то эффекты, если они будут выглядеть одинаково, - без разницы.
Ответ написан
@Steely
Весь вопрос сводится к простому - затраты времени. Если у вас есть возможность (хорошая зарплата, мало задач, много времени, специфическое задание) и желание делать все так как вы описали - кто же вам запретит?

Но если вы зарабатываете своим трудом, то такой подход малоэффективен в силу трудозатрат, тем более, конечному пользователю совершенно все-равно как оно там "нарисовано" картинкой или с помощью непонятных слов.
Ответ написан
oxyberg
@oxyberg
Продуктовый дизайнер ВКонтакте
Никто даже и не подумал про удобность. Кодовую кнопку легче растянуть, нежели изображение. А вот фото и картинки - это уже совсем другая история.
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
У меня практически не возникает таких вопросов, так как чаще всего требуется поддержка, о боги, ie6.
И это на самом деле тоже ответ.
А в общем и целом - по ситуации, как пишет Кирсанов - для дизайнера идеальным форматом является картинка или pdf, ничего никуда не денется, все будет в точности так, как задумал дизайнер. Но сами понимаете - в наше время это просто невероятно, делать, например, заголовки картинкой. Думаю, со временем, все простые и не очень иллюстрации будут делаться версткой.
Ответ написан
pomeo
@pomeo
Если вы для сайта соседа дяди Васи делаете html + css вместо картинки, которая сохранила бы 10x времени, то вам просто нечего делать. Если вы поддерживаете сайт на который ходят пара десятков тысяч человек в день, то убирание картинок из загрузки сильно сократит трафик. Превращение ещё пачки мелких картинок в base64 уменьшит запросы на сервер.
Ответ написан
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Для меня загадка - как можно сегодня верстать страницы в фотошопе, а Вы прекрасно знаете, как много людей делают именно так, возможно и Вы тоже.
Для Вас непонятно, как можно делать заголовок картинкой, а для кого-то - как можно потратить на подгонку букв несколько дней вместо того, чтобы нарисовать их. Даже у выверенных временем шрифтов иногда межбуквенное расстояние гуляет. В зависимости от специфики ту или иную букву хочется поднять, опустить или увеличить. Все это делать средствами верстки иногда неоправданно долго, так появляются картинки вместо заголовков. Грамотно заполнить альты и остается только одна проблема - скорость загрузки. Делаем интересный прелоадер и про эту проблему можно почти забыть, тем более если аудитория предположительно имеет быстрый интернет и Ваш сервер может отдавать с достаточной скоростью контент.
Ответ написан
Тут от случая к случаю, от места к месту. Кнопки, текст, картинки в круглых рамках, с тенями и всякими мелкими плюшками лучше через стили и разметку, приятнее будет потом открыть сайт в каком-нибудь ipad или другом устройстве в высокой плотностью точек и насладится четко отрисованными браузером, сверстанными элементами, нежели вставленной картинкой кнопкой или текстом
Ответ написан
AntonEssential
@AntonEssential
Я это делаю вот так , потому что мне тупо по приколу , прёт , и пофиг на время
Ответ написан
@aguz
Client-side developer
Всё-таки это холиварная тема. Есть надежда, что хоть ссылок в комментариях оппоненты набросают.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы