7 способов оптимизации изображений

4.7 из 5 на основе 3 оценок

16.06.2017 Написать комментарий

Изображения стали основной причиной медленной загрузки объемных страниц (превышающих средний размер 2,2 МБ) на мобильных устройствах.

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

Данная статья предлагает разные способы оптимизации изображений, увеличивающих  производительность мобильной версии сайта.

1. Конвертация Gif-изображений в формат PNG

PNG, пришедший на смену устаревшего и излишне простого формата GIF, позволяет редактировать, восстанавливать, пересохранять картинки, избегая потерь в качестве. Особенность PNG – лучшее сжатие графических отображений, выполненных в одном цвете.

2. Сжатие иллюстративных элементов, выполненных в формате PNG

В сети можно найти массу ресурсов, способных выполнить данную операцию.  Среди наиболее популярных сервисов стоит отметить следующие:

• OptiPNG – программу, разработанную для компрессии/оптимизации изображений. Позволяет оптимизировать большое количество визуальных элеметов посредством выполнения простой команды.
•  PngOptimizer – ресурс, обладающий простым интуитивно понятным интерфейсом, уменьшает размер изображения, созраняя при этом его первоначальное качество.
• PNGout – программа, оптимизирующая рисунки формата PNG и работающая в режиме командной строки.

3. Объединение нескольких картинок в одну посредством применения SS-спрайтов

Sprite Sheet (SS) представляет собой увеличенный рисунок, содержащий мелкие графические элементы дизайна веб-ресурса. Использование спрайтов приносит много пользы, поскольку позволяет загрузить все элементы одним файлом, тем самым снижая нагрузку на сервер.

4. Сжатие изображения формата JPG

Photoshop отлично справляется с данной задачей. При создании сервисов для редактирования иллюстративных элементов, разработчики стараются ориентироваться на используемую данным сервисом систему оценки качества картинок.

5. Удаление ненужных данных

Как правило, в файле JPG содержится различная информация, совершенно ненужная веб-дизайнерам: дата создания, лишние теги. Различные программы, найденные на просторах сети, помогают с легкостью удалить дополнительную информацию.

6. Уменьшение размера картинки

Некоторые владельцы сайтов склонны загружать без надобности огромные рисунки. Такие графические отображения приходится сжимать, стараясь не нарушить при этом их исходное качество. Поставленную задачу успешно решают программы наподобие File Optimizer.

7. Указание размеров изображения в HTML коде

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

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