Есть ли лучшее решение, чем CSS-спрайты?

Question

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

Мне нужно отобразить 100 изображений PNG в таблице td, и изображения имеют размер PNG 75x16.Чтобы уменьшить количество HTTP-запросов, я сгруппировал все 166 изображений (только около 100 показано одновременно) в большую таблицу спрайтов и использовал тег IMG для отображения выходных данных, по одному изображению за раз.Это код:

CSS:

.sprites {background-image:url('folder/spritesheet.png');background-color:transparent;background-repeat:no-repeat;display:inline;}
#png3  {height:16px;width:75px;background-position:0px 0;}
#png5  {height:16px;width:75px;background-position:-75px 0;}

PHP:

$classy = "png" . $db_field['imageid'];
echo "<td>" , "<img src='transparent.gif' class='sprites' id='$classy' alt='alt' align='absmiddle'/>" , "</td>";

$ classy - это переменная, которая вызывает правильное изображение на основе вывода SQL-запроса,transparent.gif - прозрачный GIF размером 1 пиксель.И это результат, изображения отображаются правильно внутри таблицы:

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

Единственное другое решение, которое я нашел, - это использование сжатия JAR, но эта концепция работает только для Firefox.Это код, который используется для отображения этих же изображений с использованием сжатия jar (PHP, без CSS):

$logo = "jar:http://www.website.com/logos.jar!/" . $db_field['imageid'] . ".png";
echo "<tr>" , "<td>" , "<img src='$logo' alt='alt' width='75' height='16'/>";

Все 166 изображений сжимаются в архиве jar и загружаются на сервер, а такжеjar - это не сплошной архив, извлекается только вызванное изображение, но не все.Это решение быстро освещается, и я никогда не видел более быстрого способа отображения такого количества изображений.Концепция здесь и заслуживает ссылки.Другое преимущество по сравнению со спрайтами CSS состоит в том, что с помощью jar каждое изображение может быть индивидуально оптимизировано по размеру (например, одно оптимизировано до 64 цветов, другое - до 128, 32 ... в зависимости от изображения), а большая таблица спрайтов не может быть оптимизирована, посколькусодержит много цветов.

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

Answer 1

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

HTTP-запросы

Когда-либо слышали о "2 одновременных соединениях" ( последние браузеры имеют около 6-8 ).Загрузка большого количества материала означает, что если 2 загружаются одновременно, остальные должны ждать в очереди.Загрузка в один большой кусок лучше.Это главная причина, по которой используется спрайтинг.Помимо предела соединения, вы управляете этими изображениями «одного и того же назначения» в одном изображении.

Кэш

Теперь я скажу один большой кусок, но вы можете спросить:что еще хуже?Нет, потому что у меня в рукаве туз, и вот тут-то и появляется «кеш».Все, что вам нужно, - это загрузить одну страницу, а потом - пуф!Остальные страницы, которым нужно это изображение, похожи на скорость света и спасают вас от другого HTTP-запроса.Никогда не стоит недооценивать силу кэша.

Изображения

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

• GIF для значков, JPG для изображений, PNG для прозрачных элементов.

• удалить неиспользуемые цвета.да, вы можете сделать это в некоторых инструментах.урезать размер

• никогда не изменять размер изображения в HTML.вместо этого изменились версии.

• теряют качество.да, есть такая вещьснизить качество изображения до разумных пределов.слишком большая потеря делает ваше изображение слишком «облачным» или «блочным»

• изображения с прогрессивной загрузкой.Он «быстро загружает» размытое изображение, а затем очищает его.

• избегайте анимированных изображений.они раздутые, не говоря уже о раздражении.

Серверные хитрости

Существуют ограничения на подключение - но это не мешает вам используя другие домены или даже субдомены !Распределите ваш контент по другим доменам или поддоменам, чтобы увеличить количество ваших подключений.Для изображений выделите субдомен или два для него, например, скажем img1.mysite.com и img2.mysite.com или другой домен mysite2.com.это выгодно не только для вашего пользователя, но и для распределения нагрузки на сервер.

Другой метод - использование Content Delivery Network (CDN).CDN имеет глобальную сеть серверов, которые содержат «кэшированные» версии ресурсов вашего сайта.Например, я нахожусь в Азии, когда я просматриваю ваш сайт с ресурсами CDN, он находит этот ресурс на сервере, ближайшем к Азии.

Наценка

Не обязательно связанные скорость и семантика, но использование id должно быть зарезервировано для более важных целей.Если вы используете ID для маркировки изображений для их стилей, что если есть еще один элемент, которому нужно такое же изображение?Идентификаторы должны быть уникальными, их нельзя использовать дважды.Поэтому я предлагаю вместо этого использовать несколько классов.

также, идентификаторы имеют приоритет над классами.чтобы избежать неожиданных переопределений, используйте классы.узнать больше о CSS-специфике .

.sprites {
    background-image:url('folder/spritesheet.png');
    background-color:transparent;
    background-repeat:no-repeat;
    display:inline;
    height:16px; /*same width and heights? place them here instead*/
    width:75px;
}
.png3  {
    height:16px; /* in cases you need a different dimension, this will override */
    width:75px;  
    background-position:0px 0;
}
.png5  {
    background-position:-75px 0;
}

$classy = "png" . $db_field['imageid'];
echo <img src='transparent.gif' class='sprites {$classy}' alt='alt' align='absmiddle'/>";

Answer 2

Я вставляю небольшие изображения / значки в таблицу стилей:

.someicon{
    background-image:url('data:image/png;base64,iVBORw0KGg....');
}

это работает со всеми современными браузерами и не требует от меня создания спрайтов (плюс даже сохраняет один дополнительный файл для загрузки).

В процессе разработки изображения определяются в таблице стилей обычно так:

.someicon{
    background-image:url('../images/someicon.png');
}

и у меня есть система, которая генерирует окончательную таблицу стилей (включая объединение всех CSS в одну, минимизацию и замену ссылки на изображение данными: url) автоматически всякий раз, когда я изменяю таблицу стилей.

Это хорошо работает и экономит мне массу работы. При сжатии с помощью gzip файл CSS не намного больше, чем отдельные файлы, добавленные вместе. После оптимизации файлов PNG / JPG CSS для моей стартовой страницы составляет 63K без сжатия. Даже с немного меньшим файлом спрайта я бы, вероятно, не сэкономил бы больше доли секунды времени загрузки для среднего пользователя, поэтому я не буду беспокоиться о спрайтах.