Сколько усилий я должен приложить для оптимизации (разрезания) изображений для Интернета?

Я часто получаю проекты от наших художников, которые содержат большие сложные изображения, которые можно превратить в фоновый цвет, немного мозаики и наложить меньшие изображения. Проблема в том, что это часто занимает довольно много времени и усложняет структуру html. Как мне решить, стоит ли это делать?

Например, это кнопка/наведение курсора мыши:

Кнопка Мышь над

Все кнопки в атласе занимают целых 232 КБ*.

Я могу уменьшить это до 40 КБ, используя цвет фона и накладывая следующее:

  • верхний градиент (горизонтальный)
  • нижний градиент (вертикальный)
  • текст
  • Фото
  • контур
  • свечение для мыши

Но тогда вместо 1 элемента html кнопка заняла бы несколько. Кроме того, мне пришлось бы потратить еще несколько часов, чтобы все вырезать и сделать html/css.

Итак, как новый веб-разработчик, есть ли какие-либо рекомендации относительно того, когда разделить изображения, а когда просто использовать все это? В зависимости от размера/разницы, затраченного времени и дополнительной сложности DOM?

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

* Я новичок в веб-разработке из не-веб-программирования и могу ошибаться, но 200+ КБ кажутся огромными только для некоторых художественных ресурсов.

Ответы (3)

Я бы попросил дизайнера поработать с вами, чтобы переосмыслить кнопку с точки зрения кода, а не экспортируемой графики. Абсолютно стоит усилий, чтобы сделать графику кнопки легче (по размеру). На ваш взгляд, на странице загружается гораздо больше: остальная графика, CSS, HTML, javascript и черт знает что еще. Зачем тратить место из-за небрежного процесса проектирования.

Градиенты и цвет фона можно было бы сделать с помощью CSS, что сделало бы кнопку легче при загрузке и проще в обновлении. Это также означает, что у вас есть один стиль, который можно применять (с корректировками по мере необходимости) к целому ряду кнопок без проблем с согласованностью.

В лучшем случае у вас есть две графики:

  1. Тип и белая штриховая графика (с наложением цвета CSS на последний перед наведением)
  2. Фото мусорное ведро

Вы можете уменьшить это, используя живой шрифт для этикеток.

Да, я имел в виду также разделение CSS-материалов, а не только использование изображений. Итак, что касается сложности dom, вы говорите, что замена тега <img> чем-то вроде этого jsfiddle.net/NrEXK того стоит, верно? (разметка только для демонстрации сложности примера)
Также обратите внимание, что Fireworks создаст для вас CSS и экспортирует его в отдельную таблицу стилей или скопирует в буфер обмена.
@carpat Извините, немного медленно возвращаюсь к этому. Ваш HTML кажется мне слишком сложным, но на первый взгляд кажется, что он все равно будет быстрее, чем то, что вы представили дизайнеру. Я бы обрезал его до мусорной корзины и штрихового рисунка в одном рисунке. Затем, как отметил другой автор, просто используйте псевдоклассы для обработки остальных. Вы должны быть в состоянии добиться эффекта с помощью одного градиента (несколько остановок), который меняется при наведении. Тип должен быть выполнен с помощью веб-шрифтов.
В качестве примечания: градиенты и тени на основе CSS занимают довольно много времени (в миллисекундах :) для рендеринга. Лучше использовать их экономно, не использовать вообще, и/или продвигать рассматриваемые элементы на уровень графического процессора.
Градиенты могут быть медленными, но обычно они не так медленны, как задержка сервера при вызове изображений. Я бы просто ограничил их, потому что они редко добавляют ценность (^_-)

Не уверен, что понимаю проблему.

... 23,6k при «высоких» настройках jpg.

изображение

и с помощью раздвижных дверей CSS......

jsFiddle demo

23k конечно приемлемо. Вероятно, его можно было бы еще уменьшить.

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

Загрузка изображений большего размера в моих проектах ecomm менее приемлема, чем на любом контент-сайте, с которым я работал. Проблема с пиковым трафиком: вы хотите, чтобы эти серверы с удовольствием пыхтели, принимая заказы, а не показывая изображения. Конечно, вы также хотите посмотреть, сколько раз вы обращаетесь к серверу, чтобы запросить отдельные изображения. Вот где встроенные значки base-64 могут действительно качаться в вашем CSS.
следует отметить, что кодировка base-64 примерно в 1,33 раза больше, чем исходные двоичные данные. (Вы правы в том, что множество запросов к серверу для небольших файлов выполняются медленнее, чем для одного большого файла, из-за накладных расходов.)
Спрайты CSS помогают устранить проблему для многих небольших HTTP-запросов.

Я думаю, что пример кода в jsfiddle выше слишком сложен в HTML. Большая часть эффектов, которые вы ищете, может быть достигнута с помощью css на основе классов для одного элемента. Этот подход позволит вам использовать один (семантический) элемент и соответствующим образом стилизовать его...

из того, что я вижу, вы можете использовать один или, может быть, 2 элемента с добавленными псевдоэлементами css и css, чтобы добиться почти того же самого.

см. пример, который я быстро создал: http://codepen.io/peterSalvato/pen/kDvra

это настолько близко, насколько я могу получить во время работы без редактора изображений, чтобы создавать прозрачные изображения для размещения в дизайне. как только у вас есть прозрачные изображения для добавления к кнопке вместо текста (вы должны поместить их в css:pseudoElements, где написано «контент»... вот некоторые чтения о псевдоэлементах: http://www.w3schools .com/css/css_pseudo_elements.asp

одно дополнительное преимущество этого подхода заключается в том, что он позволяет тексту вашей кнопки быть текстом HTML. Это хорошо как для SEO, так и для доступности (программы чтения с экрана и тому подобное)...

надеюсь это поможет.

Сколько усилий я должен приложить для оптимизации (разрезания) изображений для Интернета?
СпросиСетьПолитика конфиденциальности1y, 0v