Как оптимизировать изображения для сайта

Значительный, можно сказать основной вес странице придают графические файлы, фотографии, скриншоты (сейчас не рассматриваем подключаемые файлы, также замедляющие загрузку). Картинки грузятся много дольше текста, поэтому лучше сразу определиться – как оптимизировать изображения для сайта:

• Уменьшить до необходимого физический размер файла.
• Сжать изображения (сохранить для web, немного ухудшиться качество, но вес картинки ощутимо уменьшится).

Уменьшить размеры изображений

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

Как оптимизировать изображения для сайта ещё – с помощью кликабельных изображений. Если фактический размер фотографии не важен (например – картинка не привязана к границам блока), то реально использовать совсем небольшие картинки – по 300-600 пикселей, но нужно сделать их масштабируемыми при наведении мыши, средствами CSS, или кликабельными с помощью плагинов. При этом миниатюры изображений не замедляют загрузку страницы, а изображения можно увидеть в полном размере.

Программное сжатие

Оптимизировать изображения для web, можно с помощью онлайн сервисов или в позволяющих это делать графических редакторах. Но часто картинки требуют дополнительной обработки (обрезка, добавление резкости, составление в коллаж), и ради экономии времени удобно делать всё в одной программе – «фотошоп», и сжатие тоже. Как оптимизировать изображения для сайта в фотошопе – используем функцию «сохранить для web», при этом выбираем формат и нужное качество.

Важно: Альтернативный текст alt и всплывающая подсказка title тоже имеют значение, но от них скорость загрузки страницы не зависит, и основную роль они играют в поисковой оптимизации.

Отредактировано: 11.04.2017 15:29:30