Онлайн-инструменты для уменьшения веса и оптимизации изображений. Онлайн оптимизация
15 онлайн сервисов оптимизации изображений |
15 онлайн сервисов оптимизации изображений
Наверняка каждый сталкивался с тем, чтобы сжать изображение или оптимизировать изображение онлайн. Конечно можно самому воспользоваться Фотошопом, но не все умеют с ним работать, а вот таким можно воспользоваться программами или плагинами для сжатия изображения, но бывает так, что по разным причинам этого либо мало, либо неудобно, либо несподручно, а есть вариант использования онлайн сервисами для оптимизации изображения для сайта. Этот вариант достаточно удобен всем и каждому, потому, что не нужно иметь опыт работы с программами и тратить на это время, а просто открыть онлайн сервис сжатия изображений, загрузить картинку и скачать уже готовую в сжатом виде.
Вот как раз в этом обзоре мы рассмотрим 15 онлайн сервисов сжатия изображений для сайта в различных форматах и с различными методами сжатия изображения. Тем, кто это делает постоянно уже является просто необходимостью, поэтому просто выбираем для себя некоторые из них и кладем себе в копилку, чтобы потом не искать. С их помощью можно легко делать обработку фотографий онлайн без установки каких-либо программ, согласитесь удобно иметь всегда под рукой бесплатную обработку фотографий.
Обзор онлайн сервисов оптимизации изображений
1. OptiPic
Начнем обзор с удобного сервиса, где можно оптимизировать изображение для сайта онлайн, который сразу на главной странице предлагает проверить сжатие изображений на сайте. Этот сервис делает максимальное сжатие изображений на сайте с практически с любой CMS, в том числе может выполнять оптимизацию изображений в вордпресс. Конечно, предоставляется инструкция для подключения любой из предложенных CMS. Качество сжатия отличное, но нужно иметь в виду, что сервис платный, но у вас есть возможность получить скидку и дополнительные мегабайты путем программы скидок, выполнив некоторые условия публикации отзыва, ссылки, описания работы. Вообщем рекомендую к использованию, к тому же если воспользуетесь ссылкой, то получите скидку 10%.
2. IMAGIFY — поддержка форматов JPG, PNG и GIF
А этот сервис сжатия изображений онлайн примечателен тем, что он может сжимать изображения и вручную и оптимизировать изображения wordpress с помощью плагина. Сервис предлагает 3 уровня сжатия и причем достаточно качественное, при регистрации всего дадут 25мб для бесплатного использования, а потом уже за деньги. Причем в бесплатном режиме можно сжать фото без потерь только до 2мб. Есть возможность использовать этот сервис на нескольких сайтах, только для каждого нужно создать свой API ключ. В целом достаточно интересный и удобный сервис как для ручного сжатия так и для оптимизации изображения в WordPress с помощью плагина.
3. Tiny JPG и Tiny PNG
Данный сервис может работать вручную и как плагин, сжать фото онлайн бесплатно на лету. Из ссылок видно, что сервис может сжимать в двух форматах: JPG и PNG, но делает он в ручном режиме без визуального редактора, т.е. просто загрузил и тут же можно скачивать уже сжатую картинку. Можно загружать сразу до 20 штук и оптимизировать размер изображения не более 5мб. Для каждого формата изображений предоставляется отдельная ссылка. Такой вот утонченный подход, но видно, что сервис нацелен для новичков, чтобы было все сразу просто и понятно, но он мне приглянулся стилем панды, ничего лишнего и сверху всё что нужно для сжатия, а если вам нужно почитать о нем, то это находится уже ниже. Он на английском, но это вам не помешает при его использовании.
4. Compressor.io — поддержка форматов JPEG, PNG, GIF, SVG
А этот сервис сжатия онлайн работает только в ручном режиме и предлагает 2 режима сжатия: оптимизация изображений без потери качества (только.jpg и .png), ну и конечно с небольшими потерями. Конечно этот сервис гораздо проще чем предыдущий и поэтому им легко пользоваться, так что освоите вы его за пару минут. Основным его плюсом является его полная бесплатность, ну а на счет качества нужно вам решить самим, т.е. попробовать.
5. Optimizilla — поддержка формата JPEG и PNG
А этот сервис тоже бесплатный, но он имеет немного другой интерфейс, а что именно понравилось, так это то, что можно загрузить до 20 изображений и редактировать их в визуальном редакторе, переходя от одного изображения к другому. Удобство в том, что вы можете сжимать фото в онлайн, глядя сразу на результаты, поэтому некоторым визуальный анализ оптимизации изображений покажется удобной опцией, причем можно при просмотре увеличивать картинки при просмотре рузультатов. Правда поддерживает всего 2 формата, но увы так бывает, что и этого хватает кому-то с головой.
6. EZGIF.COM — поддержка форматов GIF, JPG, PNG, APNG, WebP
А этот сервис можно выделить супер многофункциональностью, потому как он делает много операции с картинками. Он может обрезать и сжать фото онлайн, повернуть, поменять размер, добавить текст, работать с видео и анимацией. Такой мульти-сервис может работать с форматами GIF, JPG, PNG, APNG, WebP и согласитесь, достаточно интересный и мощный, я бы даже его назвал онлайн веб-редактором изображений, который не похож на любые остальные, тем и примечателен. Он хоть и на английском языке, но интерфейс у него достаточно прост и понятен, поэтому у вас не возникнет трудностей с ним.
7. Compressjpeg com — поддержка форматов .jpg и .jpeg
А этот сервис может сжать фото онлайн форматов jpg и jpeg, но он один в один похож на сервис optimizilla.com, я так думаю, что они собраны на одном движке, потому как функционал одинаковый, ну за исключением внешнего оформления и некоторых тонкостей. Даже добавить нечего, можете прочитать про optimizill-у и будет всё ясно. Короче, кто-то у кого-то слямзил и или воспользовались одним и тем же плагином.
8. JPEGmini — поддержка форматов .jpg и .jpeg
Интересный сервис с поштучной загрузкой изображений на английском привлек моё внимание своим визуальным просмотрщиком результата. Он может сжать фото для сайта онлайн и вы можете сразу же глянуть разницу между оригиналом и готовым результатом. После сжатия сервис сразу выдаст результаты показав размер файла до и после. А в остальном такой же простачёк, но нужно заметить, что он предлагает еще и для платформы на Mac и Юникс. Но еще он может подключить сервер для облака Amazon Web Services (AWS) для сжатия изображений, который позволит сжимать изображения на ихнем сервере и использовать их с высокой загрузкой. Понятное дело за это удовольствие нужно платить. Работает сервис форматами .jpg и .jpeg.
9. Online Image Optimizer — поддержка форматов gif, jpg или png
Следующий сервис имеет не очень привлекательный интерфейс, я бы даже назвал его устаревшим, но зато это нивелируется за счет его расширенного функционала. Помимо того, что он делает сжатие фото онлайн, он может быстро сделать иконку сайта, анимированный GIF, есть создатель кнопок, шифрует адрес электронной почты(направленный против сборщиков адресов), может создать файл пароль для htaccess и даже есть простенькие игрушки и это еще не всё… Скорее я устану перечислять, что там есть, но возможности этого сервиса явно широки и выходят за рамки этой статьи. Вообщем, кому интересно, то заходим и изучаем этот немаленький сервис. В итоге это полностью бесплатный и ручной сервис, который может удивить и быть полезным не только в оптимизации картинок.
10. JPEG Optimizer
Этот же сервис выглядит простовато и умеет он всего лишь сжать фото онлайн jpg формата, менять размер, просматривать Exif данные картинки. Работает просто: загружаете фото, он его обрабатывает и тут же показывает результат оптимизации, а если вы еще поставили галочку обрезать его по определенному размеру, то он вам это тоже сделает. Причем покажет результат и всё, нет сравнения с оригиналом. К тому же оптимизирует он зачастую с потерями, что я сразу увидел при выводе результата. Оказался слабоватым сервисом и мне кажется недоработанном без выбора различных вариантов. Может сжимает он хорошо, но регулировать сжатие нужно будет самому, указав перед процедурой степень сжатия изображения вручную от 0 до 99, причем каждый раз смотреть на результат. Если есть такой богатый выбор среди других сервисов, то зачем нужен этот древний вариант.
11. Web Resizer
По названию и функционалу этого сервиса можно сказать, что он может только изменять размер и сжать фото онлайн — качество на высоте. По факту, выбрал картинку, он сжал и тут же он выдал тебе картинку до и после, но после чего можно еще изменить финальный размер хоть несколько раз, кроме того можно изменить и контраст и цветовую палитру, цветную рамку, сделать картинку черно-белой ну и развернуть кратно 90 градусам. А степень оптимизации вы тут сможете поменять в градации от 10 до 100, а так как мини веб редактор самое оно, наверно этот сервис будет удобен тем, кто перед публикацией фото захочет немного подредактировать ее, но разьве что чуток. Многим этот сервис может оказаться полезным, если под рукой нет даже Paint-а. Но здесь есть режим массовой обработки, где можно загрузить несколько картинок, указать параметры и готово. Мне вот только не понравилась скорость этого сервиса, уж очень медленная обработка, но зато он бесплатный и можно загружать одну картинку до 10Мб, а в остальном же по заявленному в пределах нормы.
12. Image Optimizer
Об этом сервисе нужно сказать, что есть возможность скачать и установить программу оптимизации изображений для сайта на свой комп и поддерживает пакетную оптимизацию изображений, просто нажав правой клавишей мыши на папку и выбрать ОПТИМИЗИРОВАТЬ по заранее заданным параметрам. Это так же многим будет удобно, иногда не взирая не небольшие потери качества. А сам сервис выглядит как обычный и простой оптимизатор и ничего лишнего. Еще может обрезать фото по заданным размерам. Сервис настолько прост, что даже не покажет вам результирующую картинку, просто загрузили и скачали с указанием размера до и после сжатия. Надо заметить, что если вы уже сжали картинку, то она выйдет без изменений и еще очень важно, что сервис старается не перебарщивать, т.е. не делает обработку с потерей качества, так сказать в щадящем режиме.
13. IMGonline
Этот украинский бесплатный сервис на русском языке может оказать так же полезным для новичков и для тех, кто в пути так сказать. Количество возможностей выходит за рамки просто оптимизации, причем описание достаточно подробное. Загрузил фото, нажал ОК и готово, вот только просмотр есть при нажатии отдельной кнопки, этакий скрытый режим. Помимо этого можно изменить размер, конвертировать в другие форматы, изменить EXIF данные картинки, применить невероятное количество эффектов, ещё можно вручную откорректировать фотки и к тому же есть инструменты для обработки и преобразования изображений. Вот такой получился богатый мультитул, это почти ручной фотошоп, а не какой-то там Paint, по сути можно грузить фото для обработки фотографий. Меня даже слегка порадовала ширина выбора для обработки изображений, дааа, тут хохлы конечно постарались и с первого взгляда простой интерфейс восполняется шикарным набором для редакции. Я даже не смогу перечислить всех его тонкостей, но кому будет интересно, тот может найти для себя вкусности и использовать их напостоянку. Сервис поддерживает формат JPEG, но в разделе конвертирования есть целая куча других форматов, в которые можно конвертнуть без проблем. Вообщем, стоящий ресурс, так что оцените сами.
14. Kraken
Англоязычный условно-бесплатный сервис Кракен может выполнять оптимизацию изображений для сайта wordpress с помощью плагина и через вэбинтерфейс. В нем нет предпросмотра картинки, также нет финального, просто показываются размеры картинки до и после. Он нас похоже не удивит изяществом, но зато удивляет скоростью обработки, по крайней мере через вэб-интерфейс это происходит достаточно быстро в полуавтоматическом режиме. Выбрал файлы для загрузки (даже десятками) и как только нажали ОК, то они сразу начнут «жариться», спустя пару секунд список готов. Но наверно чем больше список, тем больше приходится ждать, но всё равно быстро. Вот чего нет у других, так это загрузки с Гугл Драйва и Дропбокса, тут можно сказать что они выпендрились. Здесь можно легко сжать фото онлайн без потери качества бесплатно. Интерфейс не напряжный и вполне понятный, но и не простой, пару минут всё таки придется потратить на его освоение. Единственное, что удручает, так это скудность настроек, но они расширятся немного, если вы перейдете в платный PRO вариант.
15. PunyPNG
Punypng условно-бесплатный англоязычный вариант может выполнять оптимизацию изображения онлайн в форматах JPG, GIF и PNG. Но уж очень этот сервис денег хочет, а это сразу видно, сходу возникают трудности с загрузкой изображения, то формат не тот, то размер большой. Может на это и расчитано, но как-то это отталкивает. Сходу сразу скажу, что стиль у этого сервиса привлекательный, но функционал простоейший и расчитан на обывателя, но в бесплатном варианте попробовать и оценить получается с трудом, не то чтобы по малу поработать на халяву. Хоть и просят не так много в платной версии, но удивить им просто нечем, т.к. больших возможностей и пестротой выбора он не превосходит предыдущие экземпляры. Я считаю этот вариант темной лошадкой. Ну если только в платном варианте может устроить работа с API, ну так этим не удивить и некоторые расмотренные сервисы выше тоже имеют эту опцию.
ИТОГ
Среди такого богатого выбора быстро определиться никак не получиться, потому, что у каждого есть свои предпочтения, которые сугубо индивидуальные и поэтому необходимо ознакомиться с описанием и попробовать самому в заинтересовавшем вас сервисе оптимизаций изображения для сайта онлайн.
Для экономии времени порекомендую вам сначала определиться с какими форматами нужно вам работать, затем какие действия нужно делать с изображением (оптимизацию, обрезку, разворот и что вам там еще нужно), а уж потом подбираем по данным параметрам нужный сервис онлайн сжатия изображения.
Удачного использования онлайн сервиса оптимизации изображений!
Enjoyed this article?
Subscribe to our RSS feedand never miss a recipe!
myborder.ru
10 онлайн сервисов для оптимизации изображений
Янв242013
Для веб-разработчиков и дизайнеров принципиально важно оптимизировать свои изображения перед тем, как выгрузить их в онлайн. Ведь время загрузки страницы это очень важный фактор. Тяжелые изображения сильно замедляют загрузку сайта. Если Вы часто используете изображения в своих постах, то это еще более важно, и сильно ускорит загрузку Вашего блога.
Если вы не хотите устанавливать дополнительные программы, то можете оптимизировать свои изображения онлайн. В этой статье мы рассмотрим 10 онлайн сервисов для оптимизации изображений.
Онлайн сервисы для оптимизации изображений
PunyPNG
PunnyPNG это инструмент сжатия изображений для веб-дизайнеров и разработчиков. Он позволяет загружать до 10 изображений за один раз, и Вы можете скачать результат в виде одного zip-архива. PunnyPNG понимате форматы JPG, GIF и PNG.
PunyPNG
TinyPNG
В отличии от предыдущего сервиса, TinyPNG поддерживает drag’n’drop так что Вы можете просто перетаскивать изображения которые необходимо уменьшить в него. Основным минусом TinyPNG являет то, что он работет только с форматом PNG.
TinyPNG
SmushIt
Smush.it разработан Yahoo и оптимизирует изображения за счет удаления незначащих байтов из файла изображения. Он просто уменьшает вес картинки, но не влияет на ее качество.
SmushIt
Shrink Pictures
Shrink Pictures позволяет не только оптимизировать изображение но и изменить соотношение ее сторон и размеры, а так же применить специальные эффекты. Так же есть выбор качества изображения.
Shrink Pictures
JPEGMini
JPEGmini может уменьшить вес изображения до 5(!) раз, при этом оно будет выглядеть точно так же как и до оптимизации. Этот инструмент позволит Вам не только ускорить свой сайт но и съэкономить много свободного места.
JPEGMini
Image Optimizer
Image Optimizer умеет менять размер, сжимать и оптимизировать изображения. Его очень легко использовать. Просто выберите нужные изображения, выберите желаемое качество, размеры и получите результат.
Image Optimizer
Web Resizer
Web Resizer умеет не только оптимизировать изображения но и применять к ним другие опции. Вы можете изменить размер картинки, повернуть ее, задать качество и много всего другого.
Web Resizer
JPEG-Optimizer
JPEG-Optimzer простой сервис для сжатия и изменения размеров изображений. Этот инструмент позволит Вам легко сжать, изменить размер и повернуть изображения для Вашего сайта, форума или блога.
JPEG-Optimizer
DynamicDrive Image Optimizer
Image Optimzer может сжать Ваши изображения, что ускорит загрузку Вашего сайта, а также изменить формат файла после сжатия. Кроме того поддерживает не только загрузка файла с компьютера но и указание URL изображения.
DynamicDrive Image Optimizer
Kraken
Kraken это быстрый сервис с дружелюбным интерфейсом. Вы можете просто загрузить изображение или указать его адрес и сжать его. Так же можно, просто перетащить картинку в окно браузера.
Kraken
Понравилась статья? Поделись с друзьями!Похожие записи
Немного об авторе: Сергей Белянин
Основной автор этого блога. Еще совсем недавно студент, а сегодня уже Microsoft Certifed Professional, с неукротимым желанием сделать жизнь людей проще, автоматизировав скучную рутинную работу :)
belyan.in
Оптимизация картинок для сайта онлайн. Рекомендации и плагины
Добрый день, в этой статье я покажу как происходит оптимизация картинок (изображений) для сайта онлайн. Оптимизация изображений процесс быстрый и не сложный, сделать его сможет абсолютно любой владелец сайта. Картинки являются частью контента и так же заслуживают своего внимания и определенных действий с ними. Технология оптимизации является одним из ключевых действий для оптимизации сайта в целом.
к оглавлению ↑
Оптимизация изображений онлайн
Перед добавлением новых изображений на сайте, принципиально важно обратить внимание на размер и качество файла. Не у всех пользователей происходит быстрая загрузка из-за скорости интернета или выхода через телефон или планшет. Тяжелые изображения могут сильно замедлять скорость загрузки вашего сайта, из-за чего вы теряете своих клиентов.
С помощью сервиса от Гугл PageSpeedInsights можно узнать какие файлы не оптимизированы и тормозят загрузку сайта. Данный сервис покажет все изображения, которые превышают размер и с ними нужно что то делать. Переходим по ссылке, пишем адрес своего сайта и если у вас проблемы, сервис напишем вам «Нужно оптимизировать изображения».
Кроме данного сервиса, Гугл дает свои рекомендации. Следует удалять изображения, которые не используются. При возможности применять эффекты CSS3, чтоб избавиться от ненужных файлов. Применять векторные изображения и сжимать файлы.
Если у вас нет под рукой необходимых программ для сжатия картинок, всегда можно воспользоваться различными онлайн сервисами. На сегодня их существует большое количество и несколько из них всегда должны быть под рукой. На какие из них можно обратить свое внимание:
- PunyPNG.
- TinyPNG.
- Shrink Pictures.
- Compressor.io.
- SiteReportCard
- jpeg-optimizer.com.
Все они разные и «по своему» обрабатывают и сжимают изображения. Некоторые позволяют загружать за один раз до 10 фотографий, возможность скачки уже в архиве, поддержка форматов (JPG, PNG, GIF), уменьшения веса без потери качества, изменение размеров, добавление эффектов, применение посторонних опций, повороты и много другое.
В интернете можно найти и другие подобные онлайн ресурсы, попробуй поискать...может найдете что то лучше (напишите в комментариях). В любом случае такие сайты полезные и пользуются спросом. Выберите себе несколько подобных, которые вам больше всего понравились и сохраните в закладки на будущее.
к оглавлению ↑
Технология оптимизации для web
Какие действия нужно знать и соблюдать в процессе технологии оптимизации изображения. Если придерживаться данных правил, результат не заставит вас ждать. Все ваши картинки будут хорошо оптимизированы, выделяться из общей массы, иметь часть своей уникальности для поисковых систем, минимальный вес, хорошее качество и самое главное правильно заполненные ну.жные теги.
- Уникальность.
- Качество.
- Размер изображения.
- Выделяться среди толпы.
- Тег Alt и Title.
к оглавлению ↑
Уникальность изображения
Всем известно, что поисковые системы, в том числе Yandex и Google любят уникальные изображения. Если в вашем контенте все изображения не уникальные, это может хорошо повлиять на продвижение сайта. Никто никого не заставляет иметь полностью все изображения уникальными ( в идеале это конечно так ), но хотя бы часть из них должна выделяться из общей массы.
Поисковики хорошо кушают и любят такие картинки, что так же влияет на поисковую выдачу. Где взять такие картинки, если вы вообще полный ноль и не имеете опыта художника или дизайнера.
- Купить на бирже;
- Заказывать у фрилансеров;
- Сделать самому.
Проверить фото на уникальность можно несколькими способами. В первом способе открываем Яндекс, переходим в раздел Картинки и перетаскиваем туда свое фото с рабочего стола. Если файл будет не уникальным, в выдаче вы увидите точно такие же примеры, которые уже используют другие сайты.
Если ваше фото окажется уникальным, в выдаче вы вообще ничего не увидите или поисковик покажет вам несколько похожих, но не одинаковых изображений. Кроме этого, проверить на уникальность можно с помощью онлайн сервиса tineye.com
к оглавлению ↑
Купить на бирже
Если вы готовы тратиться на каждую статью, можете посетить биржи изображений, фотобанки, биржи изображений. ( стоковые фотографии и изображения ). На таких биржах можно найти и купить большое количество фотографий на любой вкус и цвет. Находим нужный файл, выбираем необходимое расширение, смотрим на цену и покупаем.
Способ дорогой, если покупать на такой бирже каждый раз для новой статьи изображения, вы потратите большое количество денег. Одна из таких бирж называется shutterstock. Ознакомьтесь, посмотрите на цены...если вас устраивает такой вариант, пользуйтесь на здоровье.
к оглавлению ↑
Заказывать у фрилансеров
Если первый способ вас не устраивает по стоимости, всегда можно обратиться за помощью к фрилансерам. Заходите на сайт по фрилансу и подаете новую заявку на выполнение работ. Сейчас напишу личный способ, которым я сам пользовался ранее, но сейчас уже не пользуюсь. Данный пример будет дешевле, чем предыдущий и он подойдет уже большему количеству желающих иметь уникальные картинки.
Никто от вас не просит супер качественные или очень красивые фотографии. Подаете заявку на создание обычных простых изображений. В них будет присутствовать текст с надписью, один из вариантов заливки заднего фона и 1-2 небольшие изображения.
Готовый пример можете посмотреть в этой статье на самой первой картинке. Любой дизайнер, даже самого мелкого уровня знает как это делается. По стоимости можно договориться без проблем, одна такая картинка может обойтись вам в 50 рублей.
к оглавлению ↑
Сделать самому
Третий вариант является самым дешевым, точнее даже бесплатным. Вы проделываете всю работу сами: находим через яндекс картинки любой пример готового фона, подбираем через тот же поиск подходящие изображения в формате PNG, пишем несколько строчек текста. После всех добавлений в фотошопе, сохраняем и проверяем на уникальность.
Такой пример может показаться сложным, но через некоторое время вы привыкните и будете делать такие картинки за несколько минут. Полностью подробный пример что и как делать я уже описывал в предыдущих статьях, кому интересно, можете поискать. Если остались вопросы, спрашивайте в комментариях.
к оглавлению ↑
Качество картинки
Всегда стоит обращать внимание на качество картинки и исходных изображений, которые вы используете. Все должно отображаться красиво, без никаких размытий, пикселей и черноты. Картинка должна блестеть, выделяться среди других и запоминаться. Если хотя бы через раз придерживаться этих правил, вы сами увидите результат.
Если вы работаете с фотошопом, в процессе сохранения обращайте внимание на формат, который используется. При выборе разных форматов, качество картинки может теряться.
к оглавлению ↑
Размер изображения
Размер изображения так же зависит от формата, который вы ставите при сохранении. Всегда старайтесь использовать JPG формат. Изображение должно быть не меньше 100-150 пикселей, иначе поисковики могут подумать, что это часть вашего дизайна. Если необходимо вставить очень крупное изображение, используйте миниатюры. При нажатии мышкой, картинка должна открываться отдельно на все свои габариты.
Кроме этого, на сколько я слышал, поисковые системы могут не правильно расценить такие крупные габариты миниатюр и принять ваше изображение как вред сайту. Обращайте внимание на ширину и высоту в пикселях. Размер изображения не должен быть большим, в результате все будет долго открываться.
к оглавлению ↑
Выделяться среди толпы
При создании уникальных изображений старайтесь делать картинки, которые будут относиться к тематике данной статьи. Не стоит в статью с цветами ставить кирпичи или автомобили. Такие изображения будут не только красиво смотреться, но еще и хорошо запоминаться читателю. Память еще никто не отменял. Так же можно добавить свой логотип или индивидуальную рамку.
Добавление собственного логотипа или рамки так же повлияет на уникальность картинки. Я лично не пользуюсь сейчас такими способами, это дело каждого личное. Если на вашем сайте большинство изображений будут уникальными, оптимизированными и красивыми, вы будете выделяться среди толпы других.
к оглавлению ↑
Тег Alt и Title
Тег Title — если написать для картинки заголовок, он будет показываться при наведении на него мышкой. Картинки ищут по заголовкам, поэтому данный тег тоже важный и необходим быть в каждой картинке. В качестве заголовка нужно указывать название, которое будет определять, что это за картинка. Количество символов желательно не больше 50-60 знаков.
Тег Alt — более важный тег, который просто обязан быть в каждом изображении. Данный тег дает понять, что используется в картинке. В нем обычно пишут ключевое слово для страницы. Alt имеет большое значение и влияет на внутреннюю оптимизацию. Для каждой картинки старайтесь использовать разные ключевые слова, чтоб сильно не переборщить.
к оглавлению ↑
Оптимизация изображений wordpress
Если вы используете Wordress, можно попробовать установить на сайт для оптимизации изображений один из нескольких плагинов. Плагины упрощают работу с такими сервисами. Они простые в установке и требуют дополнительных настроек. Для оптимизации уже существующих файлов, переходим в раздел Медиафайлы, выбираем нужные файлы и запускаем процесс оптимизации. Среди плагинов оптимизации можно выделить:
- Media File Renamer.
- PB Responsive Images.
- Hammy.
- WP Smush.it.
Я использовал последний вариант, плагин WP Smush.it. Устанавливаем его и активируем. После этого в разделе Медиафайлы появится новый пункт с названием плагина. Выбираем нужны для оптимизации картинки и нажимаем Smush It. Результат будет показан в том же окне. Проблем по работе с плагином возникнуть не должно.
При загрузке больших изображений, используйте параметры width и height, чтоб задать ширину и высоту для картинки. Изменить исходный размер можно прямо в панели медиафайлов wordpress. Там же можно повернуть картинку на все четыре стороны, обрезать или отразить по горизонтали или вертикали.
А каким способом вы оптимизируете изображения и создаете уникальные картинки для сайта? Поделитесь своим опытом.
Евгений Несмелов
nesmelov.ru
Первичная оптимизация сайта | Твой Заработок Online
Процесс продвижения и оптимизации любого web-сайта – это мероприятие, которое необходимо проводить на протяжении всего срока существования ресурса. Его эффективность напрямую зависит от того, насколько качественно будет проведена первичная оптимизация сайта.В состав первичной оптимизации web-сайта входят такие мероприятия, как оптимизация структуры и навигации ресурса, настройка его индексации, выполнение работ по первичной перелинковке сайта и так далее.
Оптимизация структуры. Еще до запуска интернет-ресурса в открытое использование его оптимизатору важно провести анализ его структуры и устранить все найденные недостатки. Необходимо проследить за тем, чтобы все запланированные разделы и рубрики проекта присутствовали в его структуре и находились в порядке их иерархии. Также необходимо провести анализ работоспособности каждого сервиса сайта, скорости загрузки всех его важных и второстепенных страниц.
Оптимизация программного кода. Программный код любого web-сайта должен соответствовать всем современным нормам и требованиям к его качеству. Оптимизатору очень важно исключить из программного кода все ошибки, которые могли быть допущены в нем во время верстки сайта, так как в будущем это может существенно повлиять на работоспособность всего проекта.
Оптимизация навигации. Навигация любого web-сайта — это важнейший компонент его структуры, который оказывает серьезное влияние как на удобство проекта для его посетителей, так и на качество его индексации поисковыми роботами. Первичная оптимизация навигации сайта должна включать в себя главное меню, в котором должны быть расположены ссылки на все существующие страницы и разделы ресурса, а также дополнительные меню, задачей которых должно быть повышение удобства пользования сайтом и улучшение перелинковки его страниц.
К тому же оптимизатор должен провести первичную перелинковку текстов сайта, так как это существенно ускорит первую индексацию его ресурса и даст некоторые преимущества в поисковой оптимизации.
Также важно проследить за тем, чтобы корневой каталог сайта обязательно содержал файл sitemap.xml, в котором должны присутствовать ссылки на абсолютно все разделы и страницы проекта.
Настройка параметров индексации. Параметры индексации сайта настраиваются в файле robots.txt, который также расположен в его корневом каталоге. С помощью внесения настроек в этой файл оптимизатор может запретить роботам поисковых систем индексировать некоторые страницы своего сайта. Например, следует обязательно закрыть от индексации страницы, которые содержат дублирующий контент.
О самостоятельной оптимизации сайта можно узнать здесь.
tvoy-zarabotok-online.ru
Онлайн-инструменты для уменьшения веса и оптимизации изображений - 5 Апреля 2013
Одним из способов уменьшения времени отклика страниц сайта является оптимизация изображений, в том числе и уменьшение веса без изменения размера. Безусловно, потери в качестве будут, однако они незначительные и практически незаметны для глаза при просмотре страниц сайта.
Например, фото до оптимизации (549 Кб), размер 1799×1159
Фото после оптимизации (181 Кб), размер 1799×1159
Фото после усиленной оптимизации (105 Кб), размер 1799×1159
Google PageSpeed Insights
https://developers.google.com/pagespeed/
После проверки страницы, помимо рекомендаций, сервис также предлагает скачать архив с оптимизированными изображениями проверяемой страницы. Магия неизвестна, но изображения действительно значительно теряют в весе без потери в качестве.
Останется только перезалить оптимизированные картинки на сайт.
Онлайн-инструменты оптимизации PNG, JPG, JPEG
Программа RIOT для Windows
Программа RIOT позволяет значительно уменьшить вес изображения, сохраняя при этом размеры. Программа имеет простой интерфейс, быстрая, простая в использовании, а также работает в пакетном режиме.
Программа RIOT БЕСПЛАТНАЯ, последняя версия (0.5.1) от 22.08.2013. (Windows 2000, XP, Vista, Windows 7).
Загрузить RIOT — http://luci.criosweb.ro/riot/download/
Программа ImageOptim для Mac
Программа обрабатывает PNG, JPEG и GIF. ImageOptim БЕСПЛАТНАЯ, последняя версия 1.4.0 (MacOS X 10.6-10.8)
Загрузить ImageOptim — http://imageoptim.com/
www.apsolyamov.ru
(Онлайн чек-лист) Самостоятельная оптимизация скорости сайта — как увеличить скорость загрузки сайта
Оптимизация скорости сайта всегда является приоритетной задачей, так как между сайтами идет большая конкуренция и необходимо постоянно улучшать свой ресурс. Об оптимизации скорости сайта заботятся как владельцы сайтов (блоггеры), так и крупные компании, которые занимаются SEO продвижением, так как понимают что это один из базовых параметров.
На данный момент существует огромное количество сервисов для анализа скорости загрузки сайта и выявления проблемных мест, но несмотря на это, большинство сайтов все еще не оптимизированы надлежащим способом.
В данной статье и чек-листе я постараюсь не привязываться к конкретной CMS, а писать таким образом, чтобы решения подошли для любого сайта.
Хочу обратить внимание: если вы проверяете свой сайт только в сервисе Google PageSpeed Insights, то в процессе изучения чек-листа поймете, что большое количество параметров там скрыто и не показывается, несмотря на то что все равно влияет на скорость загрузки сайта.
Этап 1. Определите "рамки" оптимизации скорости сайта
Под понятием "Рамки оптимизации скорости сайта" я понимаю такой объем CSS, JS, медиафайлов и других файлов, которые загружаются на вашем сайте.
Определив "рамки", мы будем знать конечную, к которой нужно идти. А поможет нам найти данные "рамки оптимизации скорости сайта" сервис, созданный Джонатаном Филдингом — www.performancebudget.io.
Посмотрите небольшое видео по работе с данным сайтом, где я наглядно показал что нужно выбрать, чтобы определить "рамки оптимизации скорости сайта":
Этап 2. Узнаем реальную скорость сайта
Как я уже писал выше, Google PageSpeed Insights это хороший инструмент для проверки оптимизации скорости сайта, но все же он "дает" лишь поверхностные советы. Вы можете сперва проверить с помощью этого инструмента, а затем переходить к более подробной статистике, которую дают следующие сервисы:
Будь внимательны когда делаете тестирование с помощью данных сервисов, потому что время загрузки может отличаться из-за того, что сервер вашего сайта и сервер на котором идет тест находятся далеко друг от друга.
Сервис WebPagetest позволяет выбрать сервер тестирования и браузер. Данный сервис показывает в виде диаграмм каких ресурсов (CSS, JS) больше всего в процентном соотношении на вашем сайте. Что больше всего радует, так это подробная статистика по запросам в виде графиков. Также есть информация о том, к каким файлам применяется GZIP сжатие и становится сразу понятно все ли верно указали в настройках .htaccess.
А вот сервис GTmetrix позволяет увидеть график загрузки файлов, так еще к этому все показывает подробные советы по оптимизации каждого нюанса на сайте. И здесь все разбивается на более детальные моменты оптимизации.
Зная реальную информацию о своем сайте, сейчас вы можете сравнить данную цифру с той, где были показаны рамки оптимизации скорости сайта.
И только сейчас вы можете воспользоваться чек-листом, который находится ниже, в полной мере. В данном чек-листе я рассматриваю только те способы оптимизации, которые не потребуют от вас дополнительных вложений в плане денег, а необходимо лишь желание и немного усидчивости, чтобы пройтись и оптимизировать каждый пункт.
(Чек-лист) Самостоятельная оптимизация скорости сайта
1. Оптимизация изображений
- Используйте изображения именно того разрешения, которое необходимо на странице.
Часто встречаются ситуации, когда используются изображения, у которых разрешение большое (например, 800x600px), а на странице используется лишь миниатюра (например, 300x225px). Особенно часто встречается данная ошибка при создании галерей. Используйте только то разрешение изображения, которое необходимо в конкретной ситуации.
- Объедините все иконки (если SVG, то в SVG-спрайт) в одно изображение (спрайт).
Это уменьшит количество запросов к серверу. Сейчас существуют онлайн решения: css.spritegen.com, iconizr. Так и решения для сборщиков (для Gulp — gulp-svg-sprites, для Grunt — grunt-svg-sprite, для Webpack — Webpack SVG sprite loader).
- Оптимизируйте изображения: PNG, JPG, SVG.
Здесь есть как онлайн решения: TinyPNG, Kraken.io. Так и автоматизированные решения для сборщиков: Gulp — gulp-imagemin, gulp-pngquant; Grunt — grunt-contrib-imagemin; Webpack — imagemin-webpack-plugin.
- Deferring images without lazy loading or jQuery — https://varvy.com/pagespeed/defer-images.html
2. Уменьшите количество запросов
- Используйте SVG-спрайты и PNG-спрайты.
Об этом я писал в блоке "Оптимизация изображений", который находится выше.
- Объедините все CSS файлы в один.
Как я говорил раннее — это уменьшит количество запросов к серверу. Плагины для сборщиков (для Gulp — gulp-concat-css, для Grunt — grunt-concat-css, для Webpack — css-concat-loader).
- Объедините все JS файлы в один по возможности.
Плагины для сборщиков (для Gulp — gulp-concat-js, для Grunt — grunt-contrib-concat, для Webpack — webpack-uglify-js-plugin).
- Максимально уменьшите количество запросов к базе данных.
Все, что можно загружать без запросов к базе данных, загружайте без ее использования — статично. Так как на запросы и ответ уходит время, то будет логичным, если мы максимально уменьшим данный показатель.
3. Оптимизируем CSS и JS
- Сжимаем все CSS файлы.
Онлайн решения: CSS Compressor, CSS Minifier. Плагины для сборщиков: Gulp — gulp-clean-css; Grunt — grunt-contrib-cssmin; Webpack — clean-css-loader.
- Сжимаем все JS файлы.
Сервисы онлайн: JavaScript Compression Tool, JS Minifier. Плагины для сборщиков: Gulp — gulp-uglify; Grunt — grunt-contrib-compress; Webpack — плагин, который указан в прошлом пункте также сжимает JS.
- Загружайте все CSS и JS файлы в самом конце. Размещайте их перед закрывающим тегом <body>.
Необходимо между тегами <style> и </style> вставить самые важные CSS свойства. То есть именно те, которые отвечают за вывод первого экрана на сайте. Потому что эту часть сайта пользователь видит в самом начале. А затем догрузить оставшуюся часть CSS из файла, а уже после JS.
- Удалите из адресов JS и CSS файлов все строки, которые указывают версию скрипта и т.д.
Эти параметры указываются в адресе через знак ?v=1.0.1 (вопрос).
Вывод
Надеюсь вы уже поняли, что это была лишь часть онлайн чек-листа по самостоятельно оптимизации сайта и его скорости загрузки. Я решил разобрать все детали в оптимизации скорости загрузки. Если будут появляться дополнения к статье, я обязательно буду ее дополнять, а также готовить следующую часть чек-листа.
Если вы знаете интересное решение, которое позволяет ускорить загрузку страницы, пожалуйста, пишите об этом в комментариях, будем вместе делиться полезными материалами и вместе сделаем интернет еще быстрее и комфортнее! 😉
Успехов!
С Уважением, Юрий Немец
(Онлайн чек-лист) Самостоятельная оптимизация скорости сайта — как увеличить скорость загрузки сайта 4.55/5 (90.91%) 22 голос(ов)
Понравилась статья - расскажи друзьям! :)
Вконтакте
Одноклассники
Google+
www.sitehere.ru
Онлайн-сервис для оптимизации изображений | Компьютер и Интернет помощник
Допустим, вы скачали из интернета какую-то понравившуюся вам картинку и хотите разместить ее в качестве фотографии своего профиля в одной из социальных сетей, но, к сожалению, размер этой картинки слишком велик, что не позволяет этого сделать. В таком случае вам следует оптимизировать ее и тем самым уменьшить объем занимаемой ею памяти. В интернете вы найдете множество онлайн-сервисов, позволяющих уменьшить вес картинки без потери качества, но в этом выпуске я расскажу только о том, которым пользуюсь сам и рекомендую всем.
Также, если вам будет интересно, то можете ознакомиться с моим материалом об еще одном онлайн-сервисе для оптимизации изображений, которому я посвятил свою недавнюю статью.
Оптимизация изображений онлайн
Сервис, о котором я сегодня расскажу, называется TinyPng, перейдя на главную страницу которого, вы тут же увидите форму для выбора картинки, чей вес нужно уменьшить.
Нажмите на эту форму и в открывшемся окне проводника windows 7, выберите нужную картинку.
После этого сервис начнет оптимизацию изображения и через несколько секунд выдаст ссылку на ее скачивание.
Оптимизаций нескольких изображений
В том случае если вам нужно оптимизировать не одно, а несколько изображений, нажмите на форму загрузки, в открывшемся окне проводника зажмите клавишу «Ctrl» и левой кнопкой мыши отметьте все необходимые картинки. Оптимизация нескольких картинок также не займет много времени, однако это время зависит от размера загруженных картинок и скорости вашего интернета, узнать которую можно в статье о проверке скорости интернета через Спидтест.
Когда оптимизация завершится, чтобы не мучиться с загрузкой всех изображений, после каждой нажимая «download», я рекомендую воспользоваться более быстрым способом и нажать кнопку «download all», после чего все оптимизированные картинки загрузятся на ваш компьютер, в виде запакованного zip архива, распаковать который, вы сможете ознакомившись со статьей о разархивации файлов Zip и Rar.
Также если желаете, то можете сохранить их в своем облачном хранилище в dropbox, для этого нажмите кнопку «save to dropbox», авторизуйтесь (если требуется) и в открывшемся окошке нажмите кнопку «сохранить».
После чего оптимизированные картинки будут сохранены на вашем облачном хранилище и вы в любой момент сможете скачать их оттуда. А если не знаете как пользоваться дропбоксом, то обязательно перейдите по ссылке и ознакомьтесь с моей статьей.
На этом, пожалуй, все. Рекомендую вам подписаться на мой канал в RSS или вступить в одну из групп в социальных сетях, форму для подписки вы найдете в правой части сайта. Всем удачного дня и хорошего настроения.
yrokicompa.ru
