Веб-дизайн: непрозрачность изображений для моего сайта - PullRequest
0 голосов
/ 07 марта 2011

Я создаю веб-сайт и хочу создать прозрачное меню.Я знаю, что типы изображений .gif обеспечивают прозрачность, но, по моему опыту, не прозрачность (что-нибудь между прозрачностью и непрозрачностью) - по умолчанию кажется, что непрозрачность установлена ​​на 100%, то есть сплошное изображение без прозрачности / прозрачности.

Я не уверен, связана ли проблема с типом файла или с тем, как я экспортирую свое меню.Если это чего-то стоит, я использую Fireworks для создания и экспорта своего меню.

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

Спасибо, Патрик

1 Ответ

1 голос
/ 07 марта 2011

Я бы сказал, что PNG, вероятно, лучшая ставка. Более современные браузеры (читай: не IE6) понимают 8-битный альфа-канал, который он предоставляет, тогда как GIF-файлы просто имеют ключ прозрачности.

Зачастую в наши дни узким местом на сайтах является не размер изображения (ни в размерах, ни в данных), а количество запросов, необходимых для загрузки страницы. Более современные дизайны сайтов пытаются упаковать как можно больше изображений, используя такие методы, как CSS Spriting (woot.com, большинство из Google). Другим узким местом часто является неправильная настройка кэширования, что заставляет возвращающихся посетителей перезагружать кучу вещей.

Вы увидите, что различные страницы Google кэшируют все, что могут, и уменьшают количество вещей, которые необходимо загрузить на одной странице (объедините все Javascript-коды в одну, все таблицы стилей CSS в одну), чтобы браузер выполнял 2 и 3 запроса. вместо 15-20.

Я бы пошел с PNG и посмотрел на спрайты CSS и кеширование как на альтернативную оптимизацию.

См. здесь для примера спрайта изображения, используемого на главной странице Google.

...