Оптимизация web-изображений

В каких случаях использовать тот или иной формат изображений:
png: используйте png-изображения, если картинка содержит текст или вам необходим прозрачный фон
gif: gif-изображение следует использовать для очень маленьких размеров, таких как 5х5px
jpg: этот формат используется для отображения фотографий, иллюстраций и др.
Используйте превью (thumbnail) вместо адаптивного изображения
В случае с отображением больших картинок ориентируйтесь на максимальный размер, который требуется показать пользователю на сайте.
То есть, если надо отобразить изображение 500px в ширину, то уменьшите пропорционально оригинальную фотографию до ширины 500px.
Для этого я рекомендую сервис jpeg-optimizer.com, который не только изменит размер изображения, но и сожмёт её размер так, что она будет весить на 50% меньше. Это также позволит быстро загружать изображения на сайте при медленном интернет соединении.
Оптимизация web-изображений
Если вы используете CMS WordPress для своего интернет-проекта, то движок автоматически создаст несколько разных размеров из вашего изображения. Будьте осторожны при использовании авторезайзинга в вордпресс на проекте, который изобилует большим количеством картинок. Размер сайта может значительно увеличиться!
Используйте CSS вместо картинок
Закинуть текст в изображение часто намного проще, чем морочиться с CSS. Но с помощью спецификации CSS3 можно добавлять очень много эффектов. Добавляя текст в изображение вы значительно увеличиваете размер картинки, а CSS3 это всего лишь несколько байт текста.
Так что, если что-то можно сделать используя CSS — делайте это! 
 
Используйте web-шрифты
Несмотря на век высоких технологий большая масса людей по-прежнему закидывает текст в изображения. Потому что их так когда-то этому научили. Это определённо плохо! В 90% случаях вы можете использовать web-шрифты и CSS. Web-шрифты быстрее загрузятся, нежели изображение.
Очень легко можно научиться использовать веб-шрифты. Правда не все шрифты одинаково полезны для разных веб-браузеров — .ttf, .woff, .svg, .eot. Но это не беда! Если у вас есть один из этих шрифтов, используя конвертер шрифтов можно очень легко получить все необходимые.
После того как все шрифты у вас, их необходимо закачать на сервер, где расположен сайт и прописать в файле стилей несколько строк кода, чтобы браузер знал, где лежит его шрифт.
@font-face {
       font-family: ‘seoshanti-ru’;
       src: url(‘seoshanti-ru.eot’);
       url(‘seoshanti-ru.woff’) format(‘woff’),
       url(‘seoshanti-ru.ttf’) format(‘truetype’),
       url(‘seoshanti-ru.svg#font’) format(‘svg’);

}
Последним шагом осталось указать, к какому тегу будет применяться данный шрифт, например, к всем параграфам на сайте
p { font-family: «seoshanti-ru», Georgia, Serif; }

Шрифты Georgia и Serif прописываются для тех случаев, когда браузер не смог по каким-либо причинам найти шрифт, он будет загружать следующие по порядку шрифты, чтобы хоть как-то логично отобразить содержимое.
В Photoshop используйте «Сохранить для WEB»
 
Когда Photoshop пришёл в web-дизайн, большинство пользователей не использовали кнопку «Сохранить для Web», и это была их очень большая ошибка. Благодаря функции «Save for Web» мы сможем до сохранения изображения оценить качество этого изображения. Таким образом мы подберём оптимальные настройки для сохранения изображения для web.
Оптимизация web-изображений
Если у вас нет Photoshop и функции «Save for Web» используйте online-программы для оптимизации качества и размера изображений, например, http://optimizilla.com
 
Для WordPress используйте плагины
Если вы счастливый обладатель CMS WordPress, то здесь могу предложить для сохранения большого количества времени на оптимизацию фотографий плагин WP Smush. Работает этот плагин очень просто: устанавливаете и всё, дальше как обычно загружаете фотографии. WP Smush берёт каждую фотографию и оптимизирует её размер без потери качества изображения. Результат впечатляет: некоторые изображения могут сократить размер до 80%
 
 
Используйте технику кэширования для быстрого отображения картинок
Кэширование на самом деле предоставляет не оптимизацию изображений, а является практикой быстрого отображения изображений для вернувшихся пользователей. Однажды, побывав на вашем сайте, браузер пользователя скачивает изображения и хранит их какое то время.
Ниже кусок кода позволит оставлять в кэше определённые типы файлов, таких как изображения, файлы скриптов , стилей и др.
Код необходимо разместить в файл .htaccess в корне вашего сайта. Если вы не видите такой файл, первым делом проверьте, показывает ли ваш ftp-менеджер скрытые файлы. Иначе, при создании нового файла .htaccess он перезапишет уже существующий, но скрытый файл.
# КЭШ НА 1 ГОД
<FilesMatch «\.(ico|pdf|flv)$»>
Header set Cache-Control «max-age=29030400, public»
</FilesMatch>
# КЭШ НА 1 НЕДЕЛЮ
<FilesMatch «\.(jpg|jpeg|png|gif|swf)$»>
Header set Cache-Control «max-age=604800, public»
</FilesMatch>
# КЭШ НА 2 ДНЯ
<FilesMatch «\.(xml|txt|css|js)$»>
Header set Cache-Control «max-age=172800, proxy-revalidate»
</FilesMatch>
# КЭШ НА 1 МИНУТУ (60 СЕКУНД)
<FilesMatch «\.(html|htm|php)$»>
Header set Cache-Control «max-age=60, private, proxy-revalidate»
</FilesMatch>

Site Footer