Несколько способов оптимизации изображений

Почему нужно оптимизировать изображения, размещённые на страницах ваших сайтов. Если вы не совсем понимаете для чего это, то приведу несколько весомых аргументов:

• Наибольшее количество времени тратится на загрузку изображений (64 процента от общего времени)
• Оптимизация изображения снизит размер страницы больше, чем любая другая составляющая сайта.
• Оптимизация изображений, возможно, самый простой способ оптимизации страницы

1. Выберите нужный формат

Сегодня есть несколько основных форматов растровых изображений, из которых вам и предстоит выбрать тот, что необходим для вас. Я уже писал о них более подробно в другой статье.

Как выбрать нужный? Вот несколько советов, которые помогут сделать правильный выбор.

• Если вам требуется анимацию, берём GIF
• Если вы размещаете фотографии — JPEG
• Если вам нужна фотография с прозрачностью, выберите PNG
• В любых других случаях попробуйте 8-бит PNG, но если не понравилось качество, то делаем JPG

2. Оптимизация без потерь

Для того чтобы оптимизировать изображение без потерь вы можете воспользоваться специальными приложениями, к примеру imageoptim.com для OS X или File Optimizer для Windows, Linux. Эти приложения не потребуют от вас большого количества времени или специальных знаний. Процесс конвертации лёгок и прост, а фотографии не потеряют в качестве.

Не обязательно, но попробовать стоит.

3. Правильные размеры

Используйте правильные размеры изображений.

<IMG SRC = «Image_full_size_3000x2000px.jpg » width = «140» height = «84» >

Если вы ставите изображения большого размера на страницу, но при этом указываете малые размеры в html-коде, то всё равно это не избавит вас от загрузки оригинального, большого изображения.

Нужно убедиться, что оригинальное изображение имеет тот же размер что и указанный на странице.

<IMG SRC = «Image_min_size_ 140×84.jpg» width = «140» height =»84″ >

4. Сохранить для Web

Трудно упустить из виду один из самых распространённых редакторов растровой графики – Adobe Photoshop. Для того чтобы оптимизировать изображение на стадии экспорта мы можем выбрать в главном меню «Файл» > «Сохранить для WEB».

Тут нас ждёт довольно отзывчивый интерфейс настройки и оптимизации изображений. С ним стоит поковырятся основательно, если хотите получить идеальный баланс «качество – размер».

5. Использование СSS и SVG

В том случае если в качестве изображений у вас используются примитивные линии и геометрические формы, то вы вполне можете заменить их кодом на CSS или SVG форматом. Изображения в формате SVG поддерживаются всеми браузерами и не теряют резкости при увеличении.

Кроме того этот формат имеет ряд преимуществ о которых нельзя не сказать:

• Если текст включен в SVG изображение, то он отображается как текст.
• SVG меньше по размеру чем аналогичные JPEG и GIF
• Поддерживает анимацию
• SVG – векторный формат. Отсюда вытекают некоторые характерные плюсы, такие как — хорошая масштабируемость и т.д.
• Есть возможность внедрять изображения в формате JPG, PNG, GIF
• Совместимость с CSS

Это лишь некоторые преимущества. Решайте сами.

6. Прогрессивный формат JPEG

Существует два основных способа загрузки изображений для JPEG формата. «Базовый» способ загружает картинку сверху вниз, постепенно подгружая недостающие части. «Прогрессивный» JPEG загружает сначала расплывчатый образ, а затем обновляет его, добавляя резкости. Дело здесь не в разнице размеров «базовых» и «прогрессивных» файлов, хотя прогрессивные занимают меньший размер. Дело здесь в том, что прогрессивные джпеги воспринимаются как более «быстрые».

Изменить разновидность формата можно, при сохранении картинки, в программе фотошоп.

На прикреплённом примере мы видим эту опцию в нижней части окна.

Оптимизация изображений определённо нужна и стоит уделить ей должное внимание. Как вы видите, способов хватает. Здесь конечно перечислены не все.

Не нужно забывать о самом главном способе оптимизации вашего сайта. Стоит проанализировать, нужны ли вам размещённые изображения? Может быть, стоит удалить некоторые из них.

Надеюсь, статья оказалась для вас полезной. Можете написать о своих способах оптимизации изображений в комментариях.