Ускорение WordPress — как оптимизировать изображения для Web
01.09.2018
Большинство начинающих пользователей не знают, как правильно сохранять изображения, которые могут иметь огромное влияние на скорость загрузки сайта. В этой статье мы вам покажем, как правильно сохранять изображения, оптимизированные для web.
Любой эксперт скажет вам, что иллюстрации к статьям помогают повысить информативность статьи и вовлеченность читателя. Однако, если загрузить неоптимизированные изображения, то это значительно замедлит скорость загрузки сайта. По данным Strangeloop , задержка в 1 секунду может стоить вам 7% от продаж, 11% меньше просмотров страниц и снижение удовлетворенности клиентов на 16%.
Ленивая загрузка изображений. Ускорение WordPress плагинами BJ Lazy Load и A3 Lazy Load
Как сохранять изображения правильно?
При сохранении изображений, необходимо учитывать две вещи: формат изображения и сжатие. Выбрав правильную комбинацию, вы уменьшите размер изображения в 5 раз.
В основном используются только два формата изображений — это JPEG и PNG. Тут не надо ничего придумывать и усложнять, просто запомните, что: формат JPEG используется для изображений с большим количеством цветов, а PNG для более простых изображений или когда вы работаете с прозрачными изображениями.
Для тех, кто не знаете разницу: формат PNG — это изображения без сжатия, что означает высокое качество, и соответственно большой размер. А JPEG представляет собой сжатый формат файла, который незначительно снижает качество изображения, чтобы добиться значительно меньшего размера файла.
На WPWow мы используем для изображений формат JPEG в основном.
Следующим важным моментом является сжатие, с помощью которой можно добиться огромной разницы в размере файла. Это делается специальными инструментоми сохранения изображений оптимизированных для Web.
На таблице ниже мы показали вам результаты инструментов сжатия, с помощью которых мы оптимизировали изображение Strangeloop сверху.
| Оптимизированный JPEG высокое (Photoshop) | 33 Кб |
| Оптимизированный с помощью TinyPNG | 57 Кб |
| Оптимизированный с помощью JPEG Mini | 70 Кб |
| Оптимизированный JPEG Наилучшее (Photoshop) | 93 Кб |
| Неоптимизированный JPEG | 119 Кб |
| Оптимизированный PNG (TinyPNG) | 135 Кб |
| Неоптимизированный PNG | 145 Кб |
Инструменты сжатия изображения для блоггеров
Теперь, когда вы увидели разницу и размеры каждого типа сжатия, мы покажем вам как правильно сохранять изображения оптимизированные для web и ускорить ваш WordPress сайт.
Adobe Photoshop
В Фотошоп встроена функция сохранения изображений оптимизированных для интернета. Просто откройте изображение и нажмите Файл » Сохранить для Web.
Откроется окно сохранения с дополнительными опциями. В правой части вы можете задать формат изображения. Для формата JPEG вы увидите несколько вариантов качества. Также обращайте внимание на размер файла в левом нижнем углу.
TinyPNG
TinyPNG — это бесплатный веб-ресурс, который использует для сжатия смарт технологию. Все, что вам нужно сделать это зайти на их сайт и загрузить изображение, и за пару секунд вы получите ссылку на скачивание готового сжатого варианта изображения.
Также для разработчиков имеется API, для автоматической конвертации изображений.
JPEG Mini
JPEG Mini использует рекомпрессивную технологию, которая значительно уменьшает размер изображения не влияя на качество. Вы можете использовать веб версию бесплатно или приобрести версию для компьютера. Они также имеют платную API для автоматизации процесса на вашем сервере.
ImageOptim
ImageOptim — это небольшая утилита для Mac, позволяющая сжимать изображения без потери качества, путем поиска лучших параметров сжатия и удаления ненужных цветовых профилей.
Альтернативой для Windows является Trimage
Как вы можете видеть, существует несколько инструментов, которые можно использовать для оптимизации изображений для Web. При использовании Photoshop мы добились лучших результатов в размере, но качество пострадало довольно таки значительно. Tiny PNG явный победитель для сжатия PNG файлов.
Некоторые рекомендуют использовать для сжатия изображений комбинацию Tiny PNG + Optim или JPG Mini + Optim, чтобы добиться еще более высоких результатов сжатия. Однако, на использование двух инструментов может потребоваться немного больше времени, чем обычно.
Выводы об оптимизации изображений
Если вы раньше никогда не оптимизировали изображения перед публикацией, то начните делать это сейчас. Это значительно может сказаться на скорости сайта, и в конечном итоге, пользователи и поисковые системы будут благодарны вам за это. Конечно, не стоит забывать и о качестве изображения, но незначительных изменений в качестве можно допустить, и большинство пользователей просто не заметят этого.
Надеемся, вы нашли эту статью полезной. И не забудьте рассказать про оптимизацию изображений вашим друзьям блоггерам, чтобы они ускорили скорость загрузки их сайтов и были благодарны вам. Для этого можете использовать кнопки социальных сетей.
Если у вас имеются вопросы, то задайте их в комментариях ниже. Также не забывайте следить за нами в Twitter и Google + .