Что касается оптимизации технологии CSS Sprites, что мы можем сделать и насколько сократить количество запросов? Это невозможно сделать в одностороннем порядке, все зависит от взаимодействия изображений XHTML, CSS и CSS Sprites. На данный момент не существует абсолютного метода оптимизации. Вот почему я часто измеряю взаимосвязь между изображениями CSS-спрайтов и XHTML в проектах, таких как: «Фон реализует адаптивную сетку из девяти сеток». Ниже обобщаются некоторые методы вырезания и обрезки изображений. оптимизация изображений.
Оптимизация изображения
. Для неанимационных GIF-файлов рекомендуется использовать PNG8, поскольку он также может достичь того же эффекта и сэкономить 10–30 % размера файла.
По сравнению с Fireworks, Photoshop экспортирует изображения PNG того же качества, но их размер немного больше. Несмотря на то, что Fireworks произвела соответствующую оптимизацию сжатия, наилучшего сжатия добиться не удалось.
Известное мне программное обеспечение для проектирования не обеспечивает наилучшего сжатия для обработки изображений PNG, а размер изображения все еще имеет определенный объем пространства для сжатия. Вы можете попробовать использовать представленный ниже «Инструмент оптимизации изображений», чтобы добиться оптимизации сжатия без искажений.
Что касается объема и размера изображения, рекомендуется, чтобы размер не превышал 100 КБ (что больше соответствует лучшим требованиям к РАЗМЕРУ в национальных условиях), а размер составлял 800 пикселей (наилучший размер). (Узнано из авторитетного источника, нет возможности проверить детали)
Техника вырезания изображений спрайтов CSS.
Порядок изображений спрайтов CSS и комбинированные изображения добавляются сверху вниз, слева направо. Фоновое положение обычно позиционируется с помощью комбинации чисел, что может уменьшить ненужные проблемы, вызванные обслуживанием.
Не рекомендуется сохранять определенный интервал в изображениях CSS-спрайтов, поскольку при этом увеличивается размер файла.
В CSS-спрайтах сочетание близких или одинаковых цветов может уменьшить количество цветов, поскольку размер файла изображений с небольшим количеством цветов будет относительно небольшим.
В изображениях CSS-спрайтов одинакового размера имеется большой разрыв, что в большинстве случаев в некоторой степени увеличивает размер, поэтому изображения CSS-спрайтов не должны иметь пробелов.
Среди изображений CSS-спрайтов одинакового размера вертикально расположенные изображения будут иметь больший размер файла, чем горизонтально расположенные изображения. Демо
В изображениях CSS-спрайтов горизонтально расположенные изображения будут иметь больший размер файла, чем вертикально расположенные изображения. Демо
Равное объединение изображений. При применении изображений CSS-спрайтов объединяйте идентичные изображения соответствующим образом, чтобы сэкономить место и уменьшить объем. Демо
Выделить изображения, которые не нужно объединять: если текущий пользователь определяет, что будет отображаться только одно состояние или уровень, нет необходимости объединять изображения других уровней или состояний. Демо
Золотая позиция обрезки: наиболее гибкая позиция справа или слева от изображения CSS-спрайтов является наиболее подходящей для размещения значка перед текстом. Поэтому другие изображения CSS-спрайтов не будут мешать ему, и это так. нет необходимости резервировать определенную ширину линии.