Во многих случаях общий размер картинок, которые грузятся на стринце составляет 50% (и более) от веса всех компонент страницы. Это следует учитывать при клиентской , т.к. картинки могут стать бутылочным горлышком Вашей системы. Необходимо обдумывать использование каждого графического элемента на странице. Тем не менее, есть ряд практик и советов, которые позволяют ускорить загрузку изображений.
Используйте правильные форматы картинок
В статье “” были рассмотрены используемые в Web форматы изображений. Еще раз об основных форматах:
- GIF — использует ограниченную палитру, что позволяет создавать картинки малого размера. Их удобно использовать для иконок и картинок для верстки. Помимо этого, GIF позволяет использовать прозрачность и создавать анимацию
- JPEG — хорошо подходит для цветных фотографий (отличительной их особенностью является обширная палитра). Предоставляет возможность прогресивной загрузки картинки (сначала грузится превью худшего качества, а потом полное изображение). Поддерживает прогрессивный формат, когда изображение загружается итеративно — от низкого качества к высовому
- PNG — полнофункциональный формат. Может использовать как ограниченную так и полную палитру. Позволяет использовать прозрачность. Его следует использовать только в крайних случаях, например когда необходима градиентная прозрачность
Минимизируйте размер изображений
Понятно, что минимизация размера изображения приведет к его более быстрой загрузке. Есть ряд простых техник для этого:
- Делайте изображение только таким размером, который требуется. Не оставляется белых краев, их легко можно реализовать при верстке
- Используйте сжатие JPEG вместе со сглаживанием, что-бы добиться минимального размера картинки при допустимом качестве
- Используйте минимальную палитру в GIF изображении. Если у Вас два цвета, то палитра тоже должна состоять из двух цветов
- Вырезайте всю доп. информацию из изображения (комментарии и прочие данные, которые сохраняют многие редакторы по умолчанию)
- Склеивайте маленькие картинки в одну и пользуйтесь техникой CSS спрайтов для отображения на странице
Настройка отдачи
Не забывайте устанавливать заголовки кеширования про отдачи с Web сервера картинок. Это позволит избежать повторной загрузки их у клиента при повторном открытии страницы.
Чего делать не стоит
- Не используйте браузерный ресайз (задание аттрибутов width и height меньшими, чем реальный размер фото)
- Не сохраняйте текст в виде изображения (по крайней мере тот, который можно перенести в HTML)
- Не используйте маленькую прозрачную картинку для верстки (мелочь, но только усложнит Вам жизнь)
Не зря сказано киногероем: "Зинаида, подскажи мне что-нибудь по-славянски. " Монтаж металлических конструкций, и это не смотря на кризис.
Комментариев нет:
Отправить комментарий