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

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

16 голосов
/ 05 декабря 2010

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

  • Internet Explorer
  • Opera
  • WebKit
  • Любая спецификация CSS
  • Любая спецификация HTML
  • Спецификация PNG

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

Ответы [ 2 ]

18 голосов
/ 07 декабря 2010

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

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

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

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

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

3 голосов
/ 07 декабря 2010

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

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

...