Новости

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

Оптимизация изображений (картинок) для сайта — 8 онлайн сервисов

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

видео Оптимизация изображений (картинок) для сайта — 8 онлайн сервисов

Оптимизация изображений для сайта

 


Оптимизация изображений в WordPress для ускорения сайта и улучшения SEO

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


Оптимизация изображений на сайте - Лайфхаки для вебмастеров, урок 1

Для чего нужна оптимизация изображений

Одним из показателей успешности сайта, является его скорость загрузки. Для этого вебмастера применяют целый комплекс мер, одним из которых является сжатие всех картинок с веб-площадки. Для чего же сжимать картинки? Предположим, вы вбиваете в поисковик фразу по которой найдено много сайтов с нужной информацией. Вы кликаете на любой сайт из списка, и… он долго, очень медленно начинается грузиться. Знакома такая картина? Уверен, что у большинства не хватит терпения дождаться пока он загрузится, и сайт попросту закрывают. А сам владелец этого сайта потом удивляется, почему посетители не посещают его детище, вроде и тексты уникальные, и в поисковиках все страницы проиндексированы.

Сжать (оптимизировать) картинки можно самому, например в Photoshop, но что делать если вы не сильны в этой программе, или у вас столько много изображений, что сжимать каждую вручную просто нереально. Для этого, просто нужно воспользоваться одним из онлайн сервисов по оптимизации изображений.

Работать с такими сервисами очень просто. Вы загружаете на их сервер картинку (или несколько), которые нужно сжать, кликаете на кнопочку, и ждёте несколько секунд, после чего появляется эта же картинка, но уже оптимизированная (сжатая), притом же ее качество ничем не хуже оригинала.

А сейчас я покажу несколько, а вернее 8 таких сервисов, из которых вы сможете выбрать любой, что вам понравится. Для эксперимента я возьму вот эту картинку в формате jpg, размером 640х480 и весом 125кб и посмотрим, как ее будут сжимать те или иные сервисы.

Обычно все эксперименты сперва проводят на животных, так и я не стал в этом деле оригинален, поэтому и выбрал эту симпатичную мордашку. Итак, приступаем.

Сервис сжатия изображения TinyPNG

Сервис TinyPNG позволяет сжимать картинки в двух форматах png и jpg. Одновременно можно загружать до 20 файлов размером до 5mb, а это очень удобно.

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

Скачать готовую оптимизированную картинку можно кликнув по ссылке «download».

Сервис JPEGmini или ваше фото на диете

JPEGmini отличный сервис, но только он умеет обрабатывать изображения в одном формате jpeg. Из за этого ограничения, многие вебмастера им не пользуются, а зря, ведь результат превосходит все ожидания.

Первым делом загружаем свою картинку, нажав на кнопочку «UPLOAD PHOTO».

Откроется серое окошко, в которое загружаем свои изображения, или перетаскиваем их прямо с рабочего стола компьютера.

Ждете немного, а после смотрите полученный результат сжатия. Как говорится «найдите 10 отличий»!

Скачать сжатую картинку можно нажав на кнопку «Download», которая расположена под изображением.

Сервис WebResizer — оптимизация картинок для вашего сайта

Ещё один не плохой сервис WebResizer для быстрого сжатия картинок. Отличие этого сервиса от других, в том, что он помимо оптимизации, способен поворачивать фото, менять его размер, изменять качество и многое другое.

Нажмите на кнопку «Выберите файл», а после «upload image» (максимальный размер до 10mb).

Через пару секунд вам покажут готовый результат, где вы можете скачать сжатую картинку, кликнув на ссылку «download this image», или отредактировать её.

В общем очень быстрый сервис, и к качеству оптимизированных картинок нареканий нет.

Сервис DynamicDrive — онлайн оптимизация картинок

С помощью сервиса DynamicDrive можно загружать картинки не только с компьютера, а так же непосредственно с указанного вами URL изображения, что очень удобно. Поддерживаются форматы gif, jpg и png, размером до 2.86mb.

Жмете на кнопку «Выберите файл», или в поле выше вводите URL картинки, далее на кнопочку «optimize».

Кроме этого, сразу после оптимизации фото, на выбор будут представлены несколько вариантов сжатия. Для моей картинки был дан выбор для скачивания, от оригинала 100% до 93%!

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

Сервис JPEG-Optimizer — сжатие JPG картинок

Как понятно из названия, сервис JPEG-Optimizer способен оптимизировать только изображения в формате jpg, но зато имеет ряд преимуществ перед другими подобными сервисами.

Нажимаем на кнопку «Выберите файл», и выбираем с компьютера файл который нужно сжать, дальше указываем степень сжатия (он может быть от 0 до 99%), следующий параметр это размер новой фотографии, то есть размер после оптимизации. После жмем на «Optimize Photo».

Для примера я оставил предложенные по умолчанию настройки, как можно увидеть, картинка сжалась на 89.6% и стала весить всего 13kb, качество можно оценить по картинке.

Сервис CompressJPEG — онлайн оптимизация картинок

Сервис CompressJPEG оптимизирует картинки трёх форматом jpeg, png и pdf. Первым делом выбираем русский язык. Далее указываем формат загружаемой картинки, жмем кнопку «Загрузить», и немного ждем их обработку.

Очень скоро вы увидите результат сжатия.

Картинка сжалась на 55%, что вполне не плохо, теперь можно ее скачать, нажав на соответствующую кнопочку.

Сервис сжатия изображений Optimizilla

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

Качество картинки получается вполне сносным, и это видно по картинке выше.

Сервис ShrinkPictures — оптимизация картинок и не только

Последний сервис представленный в нашем обзоре это ShrinkPictures . Отличается данный сервис от своих конкурентов тем, что позволяет не только оптимизировать (сжимать) картинки, но также изменять размеры, а ещё применить специальные эффекты.

Выбираем файл для сжатия нажав на кнопку «Выберите файл». Далее устанавливаем такие параметры как размер изображения, эффекты, качество оптимизации, и после нажимаем на «Resize».

После появляется результат, и чтобы скачать картинку, кликаем на ссылку «Download this picture Now».

Если картинка по каким-то причинам не понравится, то вы всегда сможет изменить настройки и повторить всё с самого начала.

Подводим итоги эксперимента

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

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

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

rss