Зачастую, общаясь с клиентами, самостоятельно наполняющими свои сайты, приходится объяснять им необходимость оптимизации изображений для сайта.
Устав объяснять одно и то же из раза в раз, решили опубликовать здесь статью, чтобы просто давать читать ее клиентам.
Почему нужно оптимизировать изображения для сайта
Для многих оказывается откровеним факт, что картинки для сайта надо оптимизировать, большинство клиентов вообще над этим не задумывается, и порой выкладывают на сайт фотографии слитые с зеркальных камер, напрямую, вообще без никакой обработки! Объем таких файлов достигает 10 - 12 Мб!!
Между тем, тяжелые картинки наносят серьезный вред вашему сайту:
- во-первых сайт долго открывается, порой это не очень заметно на высокоскоростном интернете, но для тех посетителей вашего ресурса, у которых интернет не очень реактивный, открытие сайта становится настоящим испытанием. Кроме того к долго загружающимся сайтам отрицательно относятся поисковые роботы;
- во-вторых из-за тяжелых картинок становится тяжелее вся папка файлов сайта, при большом количестве тяжелых изображений достигая каких-то сумасшедших размеров, что тратит место на хостинге, и серьезно затрудняет создание и использование резервных копий.
Как оптимизировать изображения
Для простоты мы разбили процесс оптимизации изображений на несколько этапов:
Уменьшаем размер изображения.
- Посмотрите какого размера картинки отображаются на вашем сайте. Если ширина поля, куда вставляется картинка составляет 600 пикселей, нет никакого смысла пихать туда фотографию размером 2000 х 3000 пикселей! Для самостоятельного изменения размера изображений мы рекомендуем пользоваться бесплатной программой FastStone Image Viewer, скачать ее можно здесь.
- Открываем изображение при помощи FastStone. Перемещаете мышку к левому краю, открывается менюшка:
- Выбираете пункт "изменить размер", и в открывшемся окне выставляете нужную Вам высоту или ширину (должна стоять галочка в чекбоксе "Сохранять пропорции")
- Сохраняете. Получается картинка нужного размера.
Уменьшаем вес файла изображения.
После того, как изображение уменьшено до нужного размера, открываете сайт Оптимизилла, загружаете туда картинку, и скачиваете ее уже оптимизированную. Можно выбрать качество сжатия для файлов в формате jpg, или количество цветов для файлов png.
Если же Вы вставляете на сайт картинки в формате gif, тогда используем сервис Ezgif
Разница в весе загруженного и оптимизированного изображений может получиться многократной!
И в конце еще одно важное замечание: давая имена файлам изображений, используйте только цифры и латинские буквы, из знаков можно испльзовать только дефис и нижнее подчеркивание. Использование в имени файла кириллицы, пробелов, точек, запятых и других знаков, может привести к неверному прочтению файла сервером.