Максимальные размеры изображения в спецификации браузера/CSS?

Я хочу отобразить страницу, содержащую около 6000 крошечных миниатюр изображений (40x40 каждая). Чтобы не делать 6000 HTTP-запросов, я изучаю спрайты CSS, то есть объединяю все эти миниатюры в одну длинную полосу и использую CSS для обрезки необходимых изображений. К сожалению, я обнаружил, что файлы JPEG не могут быть больше 65500 пикселей в одном измерении. Опасаясь дальнейших ограничений в веб-стеке, я задаюсь вопросом: может ли что-либо из следующего не справиться с изображением размером 40x240000?

  • Интернет-проводник
  • Опера
  • Вебкит
  • Любая спецификация CSS
  • Любая спецификация HTML
  • Спецификация PNG

Редактировать: цель этого состоит в том, чтобы просто отобразить всю коллекцию изображений одновременно, требуя, чтобы пользователь не прокручивал ее. Я хочу, чтобы «микро-миниатюры» перетекали в существующий макет CSS, поэтому я не могу просто использовать большое прямоугольное изображение. Я не хочу, чтобы пользователю приходилось просматривать несколько страниц, чтобы увидеть все. Общее количество пикселей не так уж велико — всего в два раза больше, чем уместилось бы на дисплее с разрешением 2560x1600. Общий размер файла всех микроминиатюр составляет всего пару мегабайт. Предполагая, что каждое изображение обрабатывается в несжатом виде в памяти браузера, занимая 8 байтов памяти на пиксель (RGBA плюс 100%-ный коэффициент накладных расходов), мы говорим об использовании оперативной памяти в сотнях мегабайт; вполне разумно для специализированного приложения в 2010 году. Единственная неразумная вещь — это объем HTTP-запросов, которые были бы сгенерированы, если бы все микроминиатюры отправлялись по отдельности.


css-sprites
person jl6    schedule 05.12.2010    source источник
comment
Вот вопрос: на кой черт тебе это нужно?   -  person Jere    schedule 05.12.2010
comment
Это крайне нецелесообразно — действительно нет разумного обоснования для разбиения этого на несколько страниц?   -  person John Parker    schedule 05.12.2010
comment
Не то чтобы я советовал это, я не могу представить, зачем вам 6000 изображений на странице в виде отдельных спрайтов. Но у вас не будет изображения 40x240000, у вас будет изображение 3120x3120, которое представляет собой квадрат изображения 78x78, дающий вам достаточно места для 6084 изображений. Объясните, что вы пытаетесь сделать в своем вопросе. Это не карта изображений, не так ли?   -  person PeteT    schedule 05.12.2010
comment
+1 за интересный фактор, но ... вау :-)   -  person    schedule 06.12.2010
comment
Я определенно выберу подход с сеткой изображений вместо подхода с полосой изображений, если я не могу заставить полосу работать, но если я смогу, это значительно упростит ситуацию.   -  person jl6    schedule 06.12.2010
comment
Я бы хотел, чтобы кто-нибудь действительно ответил на этот вопрос. Хорошая это идея или нет, мне также нужно знать, как долго я могу делать изображение и ожидать, что оно будет работать в качестве фонового изображения в разных браузерах.   -  person chowey    schedule 21.01.2014

Ответы (2)


arrow_upward
18
arrow_downward

Ну, Safari/iOS перечисляет эти ограничения:

  • Максимальный размер декодированных изображений GIF, PNG и TIFF составляет 3 мегапикселя. То есть убедитесь, что ширина * высота ≤ 3 * 1024 * 1024. Обратите внимание, что декодированный размер намного больше, чем закодированный размер изображения.

  • Максимальный размер декодированного изображения для JPEG составляет 32 мегапикселя с использованием субдискретизации. Изображения JPEG могут иметь размер до 32 мегапикселей благодаря субдискретизации, которая позволяет декодировать изображения JPEG до размера, составляющего одну шестнадцатую числа пикселей. Изображения JPEG размером более 2 мегапикселей подвергаются субдискретизации, то есть декодируются до уменьшенного размера. Подвыборка JPEG позволяет пользователю просматривать изображения с новейших цифровых камер.

  • Размер отдельных файлов ресурсов не должен превышать 10 МБ. Это ограничение распространяется на HTML, CSS, JavaScript или непотоковые медиафайлы.

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

person Steve-o    schedule 07.12.2010

arrow_upward
3
arrow_downward

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

Таким образом, я бы рекомендовал просто загружать изображения по мере необходимости через Ajax. (т. е. когда пользователь прокручивает ниже видимого в данный момент набора изображений.) Хотя это будет использовать больше подключений, это будет означать, что вы можете иметь миниатюры разумного размера, и, как общий подход, гораздо более управляемый, чем повторное создание предварительно - генерируемые миниатюры изображений «листы» на бэкэнде при добавлении нового изображения и т. д.

person John Parker    schedule 07.12.2010
comment
Middaparka предлагает наилучший подход для загрузки 6000 изображений только на одну страницу, этот метод называется отложенной загрузкой изображений, проверьте Google на наличие множества ресурсов и простых в использовании и очень настраиваемых плагинов jQuery google.com/search?q=lazy+image+loading - person Xavi Esteve; 15.12.2010