Как оптимизировать картинки для сайта: Оптимизация изображений для сайта без потери качества в фотошопе

Содержание

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

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

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

К оптимизации изображений можно отнести:

  • Уникальность;
  • Качество;
  • Размер и формат изображений;
  • Количество изображений;
  • Директория изображений;
  • Название и описание картинок;
  • Использование водяного знака;

Уникальность изображений

Уникальность изображений так же важна, как и уникальность текста. Конечно, поисковые ситемы не делятся своими алгоритмами проверки уникальности изображений, но даже поразмыслив немного логически, и проведя несколько анализов, можно сделать вывод, что у Яндекс и Google похожие алгоритмы проверки изображений, но есть и различия.

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

Название картинки. То есть изображения нужно называть своими именами, а не набором символов. Вот, к примеру, я нашел правильно оптимизированное изображение, где название соответствует содержимому. В названии я вижу – «ford_mustang».

Title изображения. Здесь правила те же, что и при оптимизации текста. Title тоже должен соответствовать. В примере на картинке он следующий – «фото Ford Mustang Shelby GT500».

Alt изображения. Это правильное соответствующее действительности описание изображение. На примере оно такое – «Форд Мустанг Шелби GT500 фото».

Это изображение хороший пример того как правильно оптимизировать картинки, и результат налицо, картинка на первых местах в поиске по ВЧ запросу.

Правильный код изображения должен выглядеть так:

<img title="титл картинки" src="ссылка на изображение" alt="описание изображения" />

Избегайте точное вхождение ключевых слов в title, alt картинок и текста! Переоптимизация создаст риск фильтра от поисковых систем.

Качество изображений

Изображения, используемые для сайтов, относятся к растровой графике (форматы png, jpeg, gif). Растровые изображения состоят из большого количества квадратов – пикселей. Качество изображений зависит от количество пикселей на 1 квадратный дюйм. Оптимальное разрешение – 72 ppi. Чем оно меньше, тем соответственно и хуже качество изображения.

При создании нового изображения в фотошопе, у вас появиться вот такая табличка, где и нужно указать разрешение.

Разрешение выше, чем 72 ppi делать нежелательно. От этого не улучшиться качество, а только сделает вес изображения больше, потому что большинство мониторов не предназначены для обрабатывания изображений выше чем 72 ppi.

Размер изображения

Многие вебмастера и блоггеры допускают распространенную ошибку. Загружают изображения на хостинг одного размера, а на странице отображения указывают другое. Это не просто лишняя нагрузка на хостинг из-за веса картинки, но и более длительная обработка изображения браузером.

Всегда загружайте изображение, уже подогнанное под размер. При изменении размера, меняйте и формат. Это значительно снизит вес картинок. В скором будущем я напишу как изменить вес изображения без потери качества.

Оптимизация формата изображения

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

Каждый формат обычно предназначен для определенных целей.

PNG – чаще используется для элементов дизайна сайта.
JPEG – применяется для объемных фотографий, в статьях на сайте.
GIF – применяется для аннимации.

Влияние количества изображений на оптимизацию

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

В какой директории размещать изображения, и как это влияет на загрузку

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

Стоит ли использовать водяной знак

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

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

Как проверить уникальность изображений

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

Просто переходим по ссылке – проверить уникальность картинки, загружаем изображение, и гугл выдаст результаты.

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

А вы оптимизируете изображения? Какие еще фишки используете?

 

лучшие плагины и софт для сжатия

Обнуление в панели

Первый шаг – обнулим параметры изображений в панели WordPress. Заходим в админку в раздел Настройки > Медиафайлы.

Обнуление величин в админке WP
  1. Открываем медиафайлы в панели WordPress
  2. Обнуляем средние и крупные интервалы
  3. Не забываем сохранять

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

Размеры ширины и высоты

Ширина и высота изображения влияет на вес. Не нужно выставлять большой размер, если объект все равно подстроится под контента. Посмотрим, как определить максимальную ширину картинки на WordPress. На области контента нажимаем правой кнопкой мыши, выбираем “Просмотреть код”.

Выделяем область контента

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

Блок вывода текста
  • Находим блок, отвечающий за вывод контента на сайте
  • Синим выделился объект сайта
  • Инструмент подсчитает пиксели и выдаст на экран, в нашем случае 840px. Он будет максимальным, делать больше нет смысла.

Лучший бесплатный плагин Tiny png

Отличным автоматизированным решением является бесплатный плагин оптимизации изображений Tiny png. Находим и устанавливаем через админку стандартным поиском .

Модуль Tiny

После установки переходим Настройки > Compress JPEG & PNG images, если нет аккаунта на данном сервисе, то регистрируем, вводим имя и почту.

Регистрация на сервисе

На почту придет письмо активации, нажимаем на синюю кнопку.

Активация аккаунта

Копируем API ключ из панели сервиса.

API ключ

Вставляем ключ, если автоматическая подстановка не произошла, в соседнее окно в плагине

Успешное обновление подписки tinypng

Ранее обнулили все размеры кроме оригинального и миниатюры.

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

Настройка плагина

Выбрав 2 галочки, мы скажем плагину – при генерации и оптимизации работаем с двумя видами медиафайлов. Обратите внимание, что в месяц дается 500 сжатий, но мы выбрали два параметра, значит в месяц обработке поддаются 250 элементов. С моими потребностями такого количества хватает, в противном случае оформляется платный тариф.

Спускаемся ниже и находим раздел Original image, отмечаем галочкой, чтобы включить инструмент и выставляем максимальную ширину 840px.

Сохранение настроек

Зайдите в медифайлы в админке, там появится новый раздел Bulk optimization, тут можно с помощью массовой оптимизации обновить хоть 100 изображений за раз.

Массовое сжатие изображений

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

Через библиотеку

Есть множество дополнений без ограничений, Tiny Png применяет современные технологии в оптимизации изображений не только на WordPress. Сжать картинки можно и на самом онлайн сервисе tiny png.

Существует еще один плагин сжатия изображений wordpress, который понравился тем что нет ограничений по запросам в месяц, но результат работы не дотягивает. Называется Smush и похожий на него EWWW Image Optimizer, отличие в том что ограничения накладываются на функционал, а не на количество.

Настройка без потери качества и размера в фотошоп

Перейдем к методу с помощью программы. Если статья обучающая и нужны снимки экрана, то в таком случае качество можно сделать поменьше ,что даст меньший вес. Если же ваши изображения являются неотъемлемой частью сайта, то на качестве экономить не стоит. Разберу пример оптимизации в программе Fotoshop.

Для начала настроим ширину и высоту по максимальному значению, которое узнали ранее с помощью браузера.

Ширина в фотошопе
  1. Нажимаем вкладку Изображение
  2. Выбираем пункт размер
  3. В появившемся окне предел превышен и составляет 945px, меняем на 840

Теперь сжимаем качество, загружаем изображение в программу и нажимаем Файл > Сохранить для Web.

Инструмент сохранить для WEB

Смотрим на настройки качества и уменьшаем, пока не начнутся искажения.

Уровень качества

Вес исходного файла 160 Кб, смотрим цифру после сжатия 40 Кб (в нижнем левом углу), в четыре раза сократили размер без потери качества.

Новое значение размера

Важно понимать что не у всех пользователей интернета есть все кодеки изображений, не стоит преобразовывать файлы в более современные форматы, а использовать стандартные jpeg или png.

Прописываем alt и подпись в WordPress

Еще одним параметром оптимизации является SEO. Тут есть только два пункта атрибут ALT и подпись. В современных реалиях больше ценится околокартиночный текст. Для того чтобы оптимизировать картинку в WordPress нажимаем знак карандаша.

Панель плагина по сжатию картинок

В следующем окне заполняем поле ALT и подпись.

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

Проставляем alt и подпись

Если предпочитаете больше видео, чем текст, то смотрите мой видеоролик.

Мы разобрали все аспекты оптимизации картинок для CMS WordPress, от момента определения размеров до поиска. Надеюсь статья стала полезной. Успехов!

Пожалуйста, оцените материал: Мне нравится7Не нравится1

6 сервисов для быстрой оптимизации изображений перед публикацией

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

Bulk Resize Photos

Этот сайт позволяет загрузить сразу много изображений и в один клик изменить их размеры. Для удобства пользователей имеется несколько шаблонов, позволяющих сделать картинки одинаковой ширины или длины. Существует также возможность изменения формата файла (JPG, PNG) и уровня компрессии.

Bulk Resize Photos →

BIRME

Аббревиатура BIRME расшифровывается как Batch Image Resizing Made Easy. Это действительно очень простой и чрезвычайно быстрый онлайновый ресайзер картинок. Он позволяет изменять размеры изображений с сохранением пропорций и без, сжимать файлы с заданным уровнем компрессии и добавлять к картинкам простую рамку.

BIRME →

Resize Pic Online

Очень удобный онлайновый сервис, имеющий к тому же русскоязычный интерфейс. Все настройки производятся здесь с помощью нескольких ползунков, меняющих ширину итоговых изображений, их формат и степень сжатия. Обратите внимание, что за один раз разрешается загрузить до 10 файлов. Скачать результат можно в виде одного ZIP-архива со всеми обработанными картинками.

Resize Pic Online →

PicGhost

С помощью этого сервиса вы сможете не только изменить размер изображений, но и нанести на них свой водяной знак. Может пригодиться, если вы опасаетесь несанкционированного использования выложенных вами в Cеть фотографий. Кроме загрузки файлов с жёсткого диска (до 40 штук одновременно), PicGhost может обработать фотографии, хранящиеся в Facebook или Flickr.

PicGhost →

TinyPNG

TinyPNG предназначен только для одной операции — оптимизации изображений, но справляется с ней, вероятно, лучше всех в интернете. Несмотря на название, он может обрабатывать не только PNG-файлы, но и JPG. От вас требуется только загрузить файлы, а далее сервис самостоятельно вычислит оптимальный уровень компрессии и выполнит сжатие. Обработанные изображения можно загрузить в виде одного архива или сохранить прямо в облачное хранилище Dropbox.

TinyPNG →

Optimizilla

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

Optimizilla →

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

Как подобрать и оптимизировать изображения для сайта

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

Если вы сомневаетесь в важности правильного подбора картинок для сайта, тогда вот 5 пунктов, почему они нам необходимы:

1. картинки участвуют в продвижении сайта;
2. при грамотно подобранных картинках (даже при беглом взгляде) пользователь интуитивно понимает, чему посвящён ресурс и что предлагает компания;
3. картинки наглядно показывают все характеристики товара;
4. нередко используют изображения и при навигации на сайте;
5. вызывают доверие у потенциальных клиентов (реальные фотографии офиса, сотрудников, складов, процессов работы).

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

Где на сайте нужны картинки?

– На главной

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


Пример 2. Сразу понятно, что деятельность компании связана с фруктами.
Еще один важный момент, который обязательно стоит отметить – текст и шрифт. Он не должен перегружать первый экран и сливаться с фоном.

– О компании

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


Также хорошее решение показать своих специалистов и указать под фото контакты отделов. Пользователь будет знать, куда ему звонить по возникнувшему вопросу.


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

– Каталог товаров

Порой «вкусные» картинки продают лучше, чем весь контент страницы. Но, к сожалению, не все владельцы интернет-магазинов это понимают. Одна из самых распространенных ошибок – использование только одной иллюстрации к товару, как здесь:


Потенциальный покупатель вряд ли остановит свой выбор на этой люстре, так как не понятно, как она выглядит с других сторон и в интерьере. Поэтому постарайтесь сфотографировать товар со всех ракурсов. Например, как тут:

– Портфолио

Когда презентуете свои выполненные проекты, не забывайте подписывать стоимость и описание самих работ. Если есть возможность, то рекомендуем создать фильтр по проектам, это облегчит поиск.
Пример 1. Визуально понятно, в каком стиле компания выполняет работы.


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

– Статьи в блоге

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

Помните, что картинка должна вызывать эмоции.
Хорошим решением могут быть также иллюстрации вместо фотографий.


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


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

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

— подходить под формат ресурса. Например, если сайт посвящен интерьеру, не нужно на главной странице размещать фото пляжа.
— иметь высокое качество. Мутные и не четкие изображения автоматически портят впечатления о компании.
— быть уникальным. То есть необходимо делать контент под свой сайт. Это поможет избежать ситуаций, когда одна и та же картинка размещена на нескольких сайтах. Исключением только могут быть фотографии для статей.
— иметь вес от 70 до 110 килобайт. Если изображение тяжелое, это скажется на времени загрузки страницы.

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

Оптимизация картинок

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

Пример 1. Непонятно, что из себя представляют изображения.
— Book254886.jpg
— I59695.png

Пример 2. По надписи картинки понятно, что она из себя представляет.
— sumka-black-Hilfiger.jpg
— Book-smm-2018.png

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

Вот неудачный пример теста, вписанного в атрибут alt:
— alt=»отзывы, акции, скидки на туфли всех брендов «

А вот правильное заполнение:
— alt=»черная сумка Prada»

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

Оptimizilla 
Compressor

После того как опубликуете на странице изображения, обязательно проверьте, доступны ли они для индексации в robots.txt.

Вместо вывода

Хотите получить дополнительные баллы доверия от клиентов и поисковиков, тогда вот оно — то самое время проверить свой ресурс на качество изображений и их оптимизацию. Если вы заметили, что у вас есть в этом направлении какие-то недочеты, то в качестве помощника мы даем вам список из 80 бесплатных ресурсов, которые помогут дизайнеру в работе. Список можно скачать по ссылке.

Как загружать картинки на сайт. Оптимизация изображений

Всем привет! Сегодня на SEO-Mayak.com мы снова будем говорить о картинках для сайта, но в этот раз речь пойдет не о том, где брать изображения для сайта, а о том как загружать картинки на сайт и как оптимизировать изображения.

Тема уже заезженная, но как я убедился:  далеко не все, а особенно начинающие веб-мастера, заботятся о снижении нагрузки на сервер.

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

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

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

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

Как же можно подготовить картинку, ведь она уже и так готовая? Всё верно, только вес картинки не должен превышать 40Kb или быть близким к этой цифре, а размеры (пропорции) изображения надо оптимизировать под ширину страницы сайта заранее.

Как сжать изображение без потери качества

Для наглядного эксперимента воспользуюсь онлайн сервисом для сжатия изображений punypng.com.

Я специально подготовил картинку размером 450х333 пикселя и весом 57,3 kb:

Прохожу несложную процедуру регистрации  и загружаю эту картинку:

Какое-то время сервис обрабатывал изображения, но результат превзошел все мои ожидания:

Картинка потеряла в весе аж 43% и стала весить не 57.3 kb, а всего  32.8kb. Просто здорово! Но тут же в голову приходит мысль — «Наверное теперь качество картинки будет отвратительное, надо срочно проверить».  Жму на кнопочку — «DOWNLOAD» и скачиваю обработанную картинку на свой компьютер.

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

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

PunyPng — это просто «spa слон» какой-то или «фитнес центр», при частом посещении которого, Ваш сайт будет иметь «самую стройную фигуру» 🙂

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

Уверен, что многие веб-мастера призадумаются -«Блин, это что теперь мне надо каждую фотку из всех моих 200 статей прогнать через этот сервис, а потом залить обратно на сервер через редактор Wopdress?»

Могу немного Вас упокоить. Сделать можно все гораздо проще, если Вы конечно умеете пользоваться FTP клиентом Filezilla.

Все фотографии с вашего блога хранятся в папке — «wp-content/uploads», где они разделены по годам и месяцам. Так вот с помощью FTP клиента, скачиваем папочки с изображениями и по 15 штук закидываем их на сервис PunyPng, сжимаем и потом таким же образом помещаем их обратно на сервер. Самое главное при этой операции случайно не изменить формат или название картинки, чтобы WordPress не запутался.

Оптимизация изображений путем сжатия — обязательная процедура перед их загрузкой на сайт.

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

Как правильно загружать картинки на сайт

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

В среднем ширина страницы блогов составляет 600 пикселей, конечно у кого-то может быть больше или меньше. Дело в том, что если загрузить  картинку с пропорциями  width (ширина)  — 800 пикселей, а height (высота) — 500 пикселей, то конечно такое изображение не поместится на страницу, и чтобы вставить это изображение, придется менять размер непосредственно в редакторе WordPress.

Что же в этом страшного? При открытии статьи, картинка должна изменить свой размер, чтобы отобразится на странице, при этом теряются драгоценные миллисекунды. Считается, что если открытие страницы занимает более 4 секунд, то пользователь покидает сайт.

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

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

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

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

Для того, чтобы избавиться от, совершенно не нужного, среднего размера картинок заходим в Админ-панель -> Параметры -> Медиафайлы и рядом со строчкой — «Средний размер» ставим нули:

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

Идем дальше.

Как загружать картинки на сайт со сторонних хранилищ

Хотел рассмотреть еще одну возможность загрузки картинок. Это особенно актуально для фотоблогов, т.е сайтов, использующих большое количество фотографий. Дело в том, что существует возможность использовать ресурсы сторонних хранилищ, например таких, как Яндекс фотки и уже оттуда подгружать изображения , тем самым существенно облегчая сам сайт. Чтобы работать с сервисами Яндекс Вы должны быть зарегистрированы — «Регистрация сайта в поисковых системах Яндекс, Google, Bing, Mail.ru и других»

Для того, чтобы загрузить картинку нам надо попасть на Яндекс фотки и кликнуть по кнопке — «Загрузить фотки»:

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

После того, как Вы выбрали изображение, внизу страницы нажимаем кнопку — «Загрузить»  и картинка загрузится на Яндекс  фотки. Далее выделяем нужное изображение:

Если кликнуть по ссылке — «В другом размере», то можно выбрать исходный или предложенные Яндексом размеры. Далее, кликаем по надписи — «Код для вставки на сайт или в блог», копируем верхний код, от тега <a>, до закрывающего тега </a>,  выделенный квадратом и вставляем в редактор WordPress в HTML режиме. Вот та самая фотография, только подгруженная не с самого блога, а с Яндекс фоток:

Обращаю Ваше внимание, что скопированный код изображения с Яндекс фоток является открытой ссылкой и ее необходимо закрыть тегом nofollow, а еще лучше скрыть ссылку с помощью AJAX.

Похожая история со вставкой видео с YouTube. Представляю подробных скриншот:

Это видео с  YouTube вставлено посредством скопированного кода, что делает совершенно бесполезным использование плагина Video Embedder, от которого я благополучно избавился.

 Надеюсь статья получилось интересной и не менее полезной. Удачи!

С уважением, Виталий Кириллов

Оптимизация изображений (картинок и фотографий) сайта

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

В статье я постараюсь объяснить вам процесс и способы оптимизации изображений которые вы публикуете в статьях, а также используемых в дизайне вашей темы фоновых изображений и иконок.

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

Как оптимизировать изображения

Для начала рассмотрим процесс оптимизации изображений и фотографий перед их публикацией в статье. В зависимости от размера и качества вес каждой неоптимизированной картинки или фотографии может достигать астрономической величины 100Kb или даже 200Kb, что можно сравнить с текстовым документом состоящим примерно из 35 тыс. слов или 200.000 символов. Ну как впечатляет? По сути это целая книга или диссертация из 110 стандартных формата A4 страниц.

Оптимизация картинок и фотографий для публикации на сайте

Для того, чтобы публикуемые вами изображения имели хорошее качество но небольшой вес их следует сохранять в соответствующем и наиболее оптимальном для каждого их типа формате. Самые распространенные форматы изображений: JPGGIF и PNG (8 или 24).

JPG — самый оптимальный формат для фотографий и многоцветных изображений с большим количеством оттенков и полутонов. Изображения в этом формате имеют расширение .jpg и имеют самое лучшее качество при относительно небольшом весе файлов.

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

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

Поэтому этот формат оптимально использовать для фоновых картинок с градиентом, красивых иконок с прозрачными участками. Единственным минусом этого формата является отсутствие поддержки в ранних версиях браузера Internet Explorer (IE 5,5-6), который обходится применением css-хаков.

Но это еще не все. Мы можем уменьшить вес изображений еще больше, но для этого нам понадобится графический редактор изображений. Лично я при работе с изображениями использую Photoshop (куда уж без него) и PaintNet (бесплатная программа для работы с изображениями) и именно на их примере я обьясню как оптимизируются изображения для сайта.

В Фотошопе: открываем изображение, на вкладке ФАЙЛ (File) жмем на пункт СОХРАНИТЬ ДЛЯ WEB (Save for Web) и во всплывающем окне выставляем нужный формат и качество изображения.

На скриншоте хорошо видна разница между неоптимизированной фотографией (вес: 269K) и оптимизированной (я понизил качество до 70% а вес фотографии уменьшился до 35,18K, это почти в 8 раз).

В Paint.Net: открываем изображение, на вкладке ФАЙЛ выбираем пункт СОХРАНИТЬ КАК…, во всплывающем окне вводим желаемое название файла, жмем на кнопку СОХРАНИТЬ и во всплывшем окне выставляем нужное качество изображения в процентах.

Как видите я выбрал для использованной в примере фотографии те-же самые 70%, но полученный результат, превзошел даже полученный Фотошопе (чего я и сам не ожидал). Напомню, исходный вес изображения у нас был 269K, фотошоп при качестве 70% сжал его до 35K, a Paint.Net до 22,5K.

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

Итак, мы уже выбрали оптимальный формат, уменьшили вес и теперь можно приступать к публикации изображений на сайте, но публикуя их, не забудьте о поисковой оптимизации: заполните атрибуты ALT и TITLE тега IMG текстом соответствующим тому, что на нем изображено. Конечно в случае отсутствия в этих атрибутах текста, поисковые системы будут судить о изображении по тексту расположенному вблизи, но заполнив их вы облегчите поисковикам эту задачу.

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

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

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

  • Использование спрайтов — все используемые изображения и картинки собираются в один файл (спрайт, как правило это png) и выводятся в нужном месте при помощи позиционирования в CSS (свойством: background-position).
  • Кодирование изображений в base64 — реальные изображения весят намного больше, чем их закодированная в формате base64 текстовая версия. Я обычно использую онлайн сервис, при помощи которого можно не только кодировать но и раскодировать любое изображение

Оба вышеуказанных метода позволяют существенно увеличить скорость загрузки сайта, за счет уменьшения количества элементов необходимых для загрузки каждой страницы, в связи с чем уменьшается количество HTTP запросов к серверу, а кроме того кодированные в base64 и собранные в спрайт изображения выводимые посредством CSS стилей кешируются браузерами, а значит при вторичном посещении вашего сайта пользователем он загрузится еще быстрее.

Сравнение 5 лучших плагинов сжатия изображений WordPress (2018)

Вы ищете лучший плагин сжатия изображений WordPress для своего веб-сайта? Плагины сжатия изображений позволяют легко оптимизировать изображения в WordPress для повышения скорости и производительности. В этой статье мы сравнили лучшие плагины сжатия изображений для WordPress.

Когда вам нужен плагин для сжатия изображений WordPress?

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

Однако вы, наверное, слышали поговорку: «Картинка стоит тысячи слов». Изображения делают ваш контент более интересным и интерактивным.

Чтобы повысить скорость работы вашего сайта WordPress, вам необходимо оптимизировать изображения для Интернета. Лучший способ сделать это - использовать Photoshop или другое программное обеспечение для редактирования изображений, прежде чем загружать изображение в WordPress. Это дает вам гораздо больше контроля над качеством изображений на вашем веб-сайте.

Однако не всем пользователям комфортно работать с программой редактирования изображений.Для некоторых оптимизация каждого загружаемого изображения - это большая работа.

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

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

1.reSmush.it

reSmush.it - ​​лучший плагин для сжатия изображений WordPress. Он позволяет автоматически оптимизировать изображения при загрузке, а также предлагает опцию массовой оптимизации для старых изображений.

Он использует reSmush API для оптимизации изображений и позволяет вам выбирать уровень оптимизации для ваших загрузок. Обратной стороной является то, что у него нет разных уровней сжатия. Он также ограничивает оптимизацию загрузками размером менее 5 МБ. Вы можете исключить отдельные изображения из сжатия, если вам нужно добавить изображение в полном размере.

2. EWWW Image Optimizer

EWWW Image Optimizer - отличный вариант для плагина сжатия изображений WordPress. Он прост в использовании и может автоматически оптимизировать загружаемые изображения на лету. Он также может массово сжимать и оптимизировать ранее загруженные изображения.

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

3. Сжатие изображений JPEG и PNG

Compress JPEG & PNG создается командой TinyPNG, и вам нужно будет создать учетную запись, чтобы использовать плагин. С бесплатной учетной записью вы можете оптимизировать не более 100 изображений каждый месяц. Он может автоматически сжимать изображения при загрузке, а также вы можете массово оптимизировать старые изображения.

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

4. Оптимизатор изображения ShortPixel

ShortPixel Image Optimizer - еще один полезный плагин для сжатия изображений WordPress. Для этого вам необходимо получить ключ API, указав свой адрес электронной почты. Базовая бесплатная учетная запись позволяет сжимать до 100 изображений в месяц, и вам нужно будет перейти на платные планы, чтобы увеличить этот лимит.

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

5. WP Smush

WP Smush - еще один популярный плагин для сжатия изображений WordPress. Он автоматически сжимает изображения при загрузке, а также может использоваться для сжатия и оптимизации ваших старых файлов изображений.Вы также можете установить максимальное разрешение изображения, и ваши изображения будут уменьшаться до более разумных размеров при сжатии.

Бесплатная версия плагина не требует создания учетной записи для использования их ключа API. Функция массовой оптимизации позволяет оптимизировать до 50 изображений за раз, и вы можете перезапустить оптимизатор массовых изображений, чтобы сжать больше изображений.

Бесплатная версия плагина работает не очень хорошо. Смотрите наш обзор WP Smush с плюсами и минусами.

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

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

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

Тестирование сжатия изображений JPEG

Для наших тестов мы использовали следующее изображение в формате JPEG, размер файла 118 КБ .

Мы не трогали ни одну из настроек плагина и тестировали сжатие с заводскими настройками. Вот результаты наших тестов:

Плагин Сжатый размер Сохранено (%) Метод
reSmush. it 76 КБ 30,59% Без потерь
EWWW Image Optimizer 112 КБ 5% Без потерь
Сжать изображения JPEG и PNG 114,7 КБ 2,8% С потерями
Оптимизатор изображения ShortPixel 69,2 КБ 41,94% С потерями
WP Smush 112 KB 5% Без потерь

Тестирование сжатия изображений PNG

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

Мы использовали следующее изображение PNG для теста, и его размер составляет 102 КБ .

Вот результаты наших тестов:

Плагин Сжатый размер Сохранено (%) Метод
reSmush.it 36 КБ 63,8% Без потерь
EWWW Image Optimizer 97,5 КБ 1,9% Без потерь
Сжать изображения JPEG и PNG 34. 3 64% С потерей
Оптимизатор изображения ShortPixel 37 КБ 63,5% С потерями
WP Smush 99 КБ 2,9% Без потерь
Какой лучший плагин сжатия изображений для WordPress?

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

Если вы готовы платить за сжатие изображений, вы можете попробовать ShortPixel, который очень хорошо показал себя в наших тестах.

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

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

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Как оптимизировать изображения для веб-сайтов и блогов

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

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

1. Размеры файлов

В эпоху, когда продолжительность концентрации внимания уже не такая, как раньше, а отвлечение - это практически второе название Интернета, время загрузки должно быть самым важным, о чем вы должны думать при создании чего-либо для Интернета. Большая часть того, что влияет на время загрузки страницы, коренится в проблемах с изображениями, особенно в размере изображений.

Простой способ избежать слишком больших изображений - убедиться, что при редактировании фотографий вы выбрали «Сохранить для Интернета». Вы можете сделать это с помощью быстрого сочетания клавиш - command + option + shift + s - в Photoshop, которое откроет новое окно с несколькими различными параметрами веб-оптимизации. Вы можете отформатировать файл (о чем мы поговорим ниже), настроить качество изображения (в верхнем правом углу диалогового окна) и установить размер файла (в правом нижнем углу).

Розовые фламинго на закате от Анны Омельченко

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

Close Up Shih Tzu Dog by chaoss

Знание параметров вашей веб-страницы является ключевым моментом, так что вы всегда можете настроить изображение до нужного размера. Например, если на вашем сайте есть столбцы шириной 800 пикселей, вам нужно настроить изображения так, чтобы они также были шириной 800 пикселей. Высота изображения не имеет большого значения, если вы не собираетесь использовать изображения определенной формы.Также важно следить за количеством килобайт в изображении, которое вы можете просмотреть в левом углу окна «Сохранить для Интернета». Хорошее практическое правило состоит в том, что небольшое количество килобайт означает более быструю загрузку. Но вам все равно необходимо внести соответствующие изменения, и вам не придется жертвовать качеством фотографий ради времени загрузки. Менее 300К обычно безопасно.

2. Форматирование файлов изображений

Изображения бывают всех форм и размеров, и важно убедиться, что они имеют соответствующую маркировку, соответствующую их конечному месту назначения.Существует три стандартных типа файлов изображений, с которыми вы, скорее всего, будете работать: JPEG, PNG и GIF. Каждый тип файла обладает уникальными качествами, которые делают его подходящим для конкретных сценариев: JPEG наиболее подходит для сжатия цифровых фотографий, а GIF обычно используется для видеоклипов с низким разрешением, анимированных изображений и логотипов с ограниченной цветовой палитрой. PNG широко используются в Интернете, поскольку они поддерживают изображения на основе палитры, оттенки серого и изображения RGB.

Котенок дома в солнечный день Максим Ширков

Чтобы (сверх) упростить: используйте JPEG для фотографий, PNG для векторов и GIF для движущихся изображений.Вы можете выбрать оптимальный формат для ваших изображений при сохранении в любой программе для редактирования фотографий. Обратите внимание, что определенные типы файлов могут лучше работать с платформой, на которой вы работаете, поэтому имейте это в виду при форматировании изображения.

3. Не делайте миниатюрные изображения разрешенными

Черника крупным планом от bozulek Человеческий глаз, Макро Анемона Свежий мед в сотах от StudioSmart Черно-белые зебры от Шанталь де Брюйн

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

4. Именование изображений

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

Посреди Тосканы от JaroPienza

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

Используйте ту же школу при именовании своих изображений, выборе подробных терминов и разделении каждого ключевого слова дефисом, чтобы изображение зеленых холмов могло читаться как «зеленые холмы-италия.jpg ».

Хотите найти изображения для оптимизации для Интернета? В нашем отчете «Тенденции творчества за 2015 год» представлено более десятка тщательно отобранных коллекций, в том числе несколько, посвященных тому, что популярно в социальных сетях и Интернете. Посмотреть »

Верхнее изображение: Летающие мыльные пузыри с отраженными домами от bonzodog

Создаете мощный мультимедийный веб-сайт? Узнайте еще больше о сжатии изображений.

Как оптимизировать изображения для Интернета? БЕСПЛАТНО (92%, но без потерь!)

Как оптимизировать изображения для вашего веб-сайта или WordPress или загрузить где-нибудь в Интернете? Вы ищете лучшие бесплатные способы оптимизации изображений без потери качества для загрузки вашего сайта? Тогда вы в нужном месте !.Я думаю, у вас никогда не было лучшего программного обеспечения или метода для оптимизации изображений без потерь. В этом посте мы опубликовали 4 лучших бесплатных метода. Вы можете уменьшить размер изображения до 92% ..! (Он удаляет повторяющиеся пиксели, генерирует данные и изменяет формат. Таким образом, качество не пострадает.)
Если вы нашли эту статью полезной для вас, то поставьте 5 звезд.