Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Ускорение WordPress — как оптимизировать изображения для Web

Опубликовано: 01.09.2018

видео Ускорение WordPress — как оптимизировать изображения для Web

Изображения для WEB на практике в 2017 году - обзор форматов, сжатие, оптимизация размера

Большинство начинающих пользователей не знают, как правильно сохранять изображения, которые могут иметь огромное влияние на скорость загрузки сайта. В этой статье мы вам покажем, как правильно сохранять изображения, оптимизированные для 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 + .

rss