Вопросы относительно CSS spritesheet (и немного о кешировании)

Question

1) Во-первых, я должен упорядочить изображения в моей таблице спрайтов определенным образом?

2) Скажем, у меня есть таблица спрайтов css, которая содержит изображения до и после. Как изображение показывает корову, но когда изображение зависло, оно показывает корову с крыльями. В моих же интересах не использовать спрайт-лист CSS для этого? Загружает ли css все картинки в моей таблице спрайтов одновременно?

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

4) Наконец, я хочу начать форум. Я пока ничего не знаю о форумах, но планирую начать в ближайшее время. Я имею в виду просто набор из 40 изображений по умолчанию, которые люди могут выбирать только в качестве своих аватаров. Должен ли я даже сделать таблицу спрайтов для этих изображений (если это вообще возможно)?

Я знаю, что это много вопросов, поэтому, пожалуйста, ответьте на любые вопросы, которые у вас есть. Спасибо!

Answer 1

«spritesheet» - это только одно большое изображение.Итак ...

1) Не имеет значения.

2) Опять же, это всего лишь одно изображение.Если не все пользователи захотят активировать функцию «после», вы можете сэкономить им некоторую пропускную способность, сделав ее отдельным спрайтом.Если большинство людей захотят использовать функцию после, вы можете сэкономить им пропускную способность, сделав все это одним спрайтом.(Хотя обратите внимание, что если мы говорим о действительно больших изображениях, будет практический предел того, сколько вы хотите вставить в один спрайт. Никто не будет ждать, например, для загрузки 1 МБ файла).

3) Опять же, спрайт - это просто изображение.Он имеет те же плюсы / минусы кэширования, что и любое изображение.

4) 40 попаданий на сервер - это много по сравнению с 1 спрайтом.Так что, основываясь исключительно на этом, спрайт будет полезен.Но если это редко, что вы получите более 10 или около того из этих аватаров на одной странице, то спрайт будет ущерб, так как он загружает такой большой файл.

Answer 2

Просто при заказе изображений у меня есть файл спрайта для сайта, над которым я работаю, который содержит различные логотипы браузера с добавленными к ним номерами версий. Таким образом, в файле содержится много повторений визуальной информации.

Я был довольно удивлен, обнаружив, что направление повторения может оказать большое влияние на размер файла, который я мог бы достичь для изображения при сохранении в формате PNG. Когда у меня были похожие логотипы в столбцах, файл получился размером около 120 КБ; в то время как я выстроил их в ряды, он получился размером 41 КБ.

Когда проект будет запущен, я опубликую реальные изображения. Вероятно, довольно редко повторять подобные изображения в файле спрайта; обычно ваши изображения будут другими, или вы просто будете использовать одно и то же изображение несколько раз. (Действительно, я мог бы в итоге рефакторинг своих спрайтов так, чтобы различные биты были в их собственном файле.) Но я не осознавал, что такие предположительно похожие изображения могут быть закодированы в два файла с такими различными размерами, исключительно на основе геометрического расположения элементов в файле изображения.

Answer 3

1) Не уверен, но я не думаю, что это будет иметь большое значение, если вообще.

2) Лучший способ сделать это с помощью ролловеров CSS-изображений.) Спрайт-листы лучше использовать для кэширования, поскольку это всего лишь одно изображение, а не веб-серверу, требующему подключения, отправки изображения, отключения, повторной отправки, отправки другого изображения, отключения и т. Д.) Я бы просто использовал отдельные изображения.В этой ситуации нет никакой причины использовать таблицу спрайтов.