X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Оптимизируем изображения на сайте
MissContent
MissContent
Topic Starter сообщение 13.11.2015, 11:23; Ответить: MissContent
Сообщение #1


Завсегдатай
*****

Группа: Active User
Сообщений: 883
Регистрация: 22.7.2013
Поблагодарили: 899 раз
Репутация:   93  


Уже давным-давно прошла эпоха dial-up интернета, когда одна единственная картинка загружалась несколько минут. Сейчас высокоскоростной интернет доступен каждому, даже на мобильных устройствах. Однако это не значит, что нужно забыть об оптимизации картинок под поисковые системы. Совсем наоборот, оптимизация сейчас важна как никогда. Ниже приведены 10 советов по оптимизации изображений.

1. Релевантность

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



Другие популярные фотостоки:

Freeimages: огромный фотосток с 2500000 зарегистрированных пользователей и около 400000 фотографий.
New Old Stock: старинные фотографии из государственных архивов учреждений, имеющие лицензию Flickr Commons.
Public Domain Archive: большая коллекция изображений со всего интернета
Unsplash: каждые 10 дней доступны 10 новых фотографий высокого разрешения.

2. Формат изображения

Чем меньше будет размер картинки в килобайтах, тем быстрее она будет загружаться на странице. Самыми популярными форматами изображений для web являются — .jpg, .png, .gif.

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

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

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


3. Сжатие изображения

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



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



Сжатое изображение слева.

Adobe Photoshop позволяет полностью проконтролировать этот процесс, задав при этом необходимые параметры.



4. Название файла

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

Пример: IMG_Seattle_MusicFestival_2015_01.

5. Атрибут изображения alt

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

Простейший HTML-код для изображения выглядит следующим образом:

<img src=”http://example.co.uk/uploads/big-steak.jpg”>

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

Вот пример расширенного атрибута для поисковых систем.

<img src=http://example.co.uk/uploads/big-steak.jpg alt=”Old man eating a big steak in the restaurant”>

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

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

Большая картинка в полном разрешении может открываться отдельной страницей по ссылке. На самой же странице достаточно разместить превью изображения. Для сжатия изображений можно использовать графический редактор Photoshop или один из множества бесплатных сервисов. Это Pixlr, PicMonkey, так же GIMP, который распространяется бесплатно, при этом обладает почти тем же функционалом, что и Photoshop.

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

7. Sitemap для изображений

Вы можете предоставить Google дополнительную информацию о графических материалах, размещенных на вашем сайте, с помощью специальных функций файла Sitemap. Это поможет Google найти контент, который иначе нельзя было бы обнаружить (например, если он загружается с помощью JavaScript), а также позволит вам указать изображения, которые необходимо сканировать и индексировать.

Для изображений можно создать отдельный файл Sitemap или обновить уже существующий.
Google дает следующий пример для URL: http://example.co.uk/sample.html:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>http://example.co.uk/sample.html</loc>
<image:image>
<image:loc>http://example.co.uk/image.jpg</image:loc>
</image:image>
<image:image>
<image:loc>http://example.co.uk/photo.jpg</image:loc>
</image:image>
</url>
</urlset>


Вы можете найти более подробную информацию здесь: https://support.google.com/webmasters/answer/178636?hl=ru

Если вы используете WordPress, то для вашего удобства есть бесплатные плагины: Google XML Sitemap for Images и Udinra All Image Sitemap. Они оба автоматически создают sitemap для изображений.

8. Хостинг

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



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

9. Социальные сети.

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

Например, чтобы побудить пользователей поделиться вашей картинкой на Pinterest нужно просто добавить кнопку "Pin It"



Есть еще отличный сервис Image Sharer от SumoMe. С ним ваши посетители смогут легко делиться вашими картинками. Он поддерживает Facebook, Twitter, Pinterest, and Yummly.



10. Google Webmaster Guidelines

В случае сомнений и любых затруднительных ситуаций обращайтесь к Руководству Гугл для вебмастеров. Там вы найдете всю необходимую информацию.

Оригинал статьи на английском языке: https://moz.com/ugc/10-tips-for-optimizing-...ages-for-search


--------------------
Реальный конверт с реальной Фарма ПП!
Skype: cristina.rx2, ICQ: 676017111, Jabber: cristina.rx@jabb3r.org


Поблагодарили: (1)
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lostprophet
lostprophet
сообщение 13.11.2015, 11:40; Ответить: lostprophet
Сообщение #2


Топовый постер
*******

Группа: Super Moderator
Сообщений: 2567
Регистрация: 18.11.2008
Из: Ростов-на-Дону
Поблагодарили: 3172 раза
Репутация:   292  


Дополню. Для десктопа или когда нужно пережать 100500 файлов есть отличная софтина FileOptimizer
Удобно и относительно быстро.


--------------------


Поблагодарили: (2)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Вентилятор
Вентилятор
сообщение 13.11.2015, 12:49; Ответить: Вентилятор
Сообщение #3


покупаю хорошие проекты
******

Группа: Active User
Сообщений: 1802
Регистрация: 8.8.2010
Поблагодарили: 601 раз
Репутация:   106  


смысл в веб-сервисах и десктопных прогах, если есть серверные утилиты optipng и jpegoptim. всё на месте оптимизируется как надо, и не нужно ничего перезаливать.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Cervena
Cervena
сообщение 15.11.2015, 15:14; Ответить: Cervena
Сообщение #4


Новичок
*

Группа: User
Сообщений: 20
Регистрация: 8.2.2015
Поблагодарили: 0 раз
Репутация:   0  


Цитата
Дополню. Для десктопа или когда нужно пережать 100500 файлов есть отличная софтина FileOptimizer
Удобно и относительно быстро.

Согласен, сам этой софтиной пользуюсь, хорошая вещь.


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Overlord99
Overlord99
сообщение 24.11.2015, 18:55; Ответить: Overlord99
Сообщение #5


Новичок
*

Группа: User
Сообщений: 19
Регистрация: 18.11.2015
Поблагодарили: 2 раза
Репутация:   0  


Вентилятор, как натравить optipng на каталог с большим количеством подкаталогов с фотками в формате png, тобы оптимизировать сразу все фотки?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
OS_ZP_UA
OS_ZP_UA
сообщение 24.11.2015, 21:59; Ответить: OS_ZP_UA
Сообщение #6


Бывалый
****

Группа: User
Сообщений: 352
Регистрация: 22.9.2011
Из: Украина, Запорожье
Поблагодарили: 113 раз
Репутация:   11  


Вы забыли упомянуть про заполнение EXIF для изображений.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Вентилятор
Вентилятор
сообщение 24.11.2015, 22:19; Ответить: Вентилятор
Сообщение #7


покупаю хорошие проекты
******

Группа: Active User
Сообщений: 1802
Регистрация: 8.8.2010
Поблагодарили: 601 раз
Репутация:   106  


Цитата(Overlord99 @ 24.11.2015, 17:55) *
Вентилятор, как натравить optipng на каталог с большим количеством подкаталогов с фотками в формате png, тобы оптимизировать сразу все фотки?

я делаю так:

Код
find -type f -regex ".*\.\(png\|PNG\)" -exec optipng '{}' \; > png.log


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
pomseo
pomseo
сообщение 25.11.2015, 0:04; Ответить: pomseo
Сообщение #8


Новичок
*

Группа: User
Сообщений: 18
Регистрация: 7.7.2015
Поблагодарили: 0 раз
Репутация:   -1  


Дополню 4 пункт: чтобы по максимуму использовать название изображения, можно добавить в него главное ключевое слово, тем более если оно характеризует изображение
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SimplePay: Прием платежей на сайте для юридических и физических лиц
4 kuprum 515 Вчера, 14:07
автор: kuprum
Горячая тема (нет новых ответов) Рекомендую: размещение статьи на сайте, ТИЦ 325, PR 6, траст XT 8
44 rumblade 10677 14.12.2017, 15:45
автор: rumblade
Открытая тема (нет новых ответов) 17 вещей на вашем сайте, которые ненавидят
Один из постулатов маркетинга — не раздражать людей
25 PostBrigada 3619 12.12.2017, 21:44
автор: alexandrrr
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПрибыль с видео на сайте и в соц сетях
Как получить доп доход с нативного контента
14 maxim_krasovskiy 2832 12.12.2017, 12:05
автор: maxim_krasovskiy
Открытая тема (нет новых ответов) ALFAcoins.com - Приём криптовалюты на вашем сайте
17 ALFAcoins 3698 11.12.2017, 23:07
автор: ALFAcoins


 



RSS Текстовая версия Сейчас: 16.12.2017, 15:30
Дизайн