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



 

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

Открыть тему
Тема закрыта
> Аудит картинок на сайте
MissContent
MissContent
Topic Starter сообщение 29.1.2016, 10:22; Ответить: MissContent
Сообщение #1


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

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


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

Интернет становится все более визуальным.

Мы все любим разглядывать картинки. И дизайнеры про это знают. Вряд ли вы найдете сайт, новая версия которого была бы менее выразительной, чем предыдущая. Сравните эти две версии сайта МакДональдс.





Интернет становится все более мобильным

В мая 1015 Гугл заявил, что запросы с мобильных превысили запросы с десктопных ПК в 10 странах, включая США и Японию. Несмотря на все нововведения, загрузка сайтов на мобильных устройствах занимает гораздо больше времени, чем на десктопах. Учитывая то, что неоптимизированные картинки — главные виновники медленной загрузки сайта, было бы неплохо позаботиться о своих мобильных посетителях и привести в порядок изображения на своем сайте.

Скорость загрузки страницы имеет критическое значение

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

Качественные фотографии дорого стоят


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

Оптимизация изображения = оптимизация ключевых слов

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

Находим картинки на сайте

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

Убедитесь, что установлен режим «Spider». Затем введите URL вашего сайта и начните сканирование.



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



Обратите внимание: Screaming Frog предоставляет отчет как по изображениям, расположенным на вашем домене, так и по расположенным на внешних доменах. Использование картинок с других ресурсов происходит следующим образом:
    Вы копируете эмбед коды и вставляете в свой HTML
    Ваш сайт использует сеть доставки контента (CDN) для размещения картинок

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

Ограничение.

Screaming Frog сканирует картинки только в HTML, в то время как фоновые изображения, такие как логотипы, баннеры, мокни меню созданы посредством CSS.

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

Диагностируем проблемы

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

Графические форматы делятся на векторные и растровые.

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

Векторным изображением в компьютерной графике принято называть совокупность более сложных и разнообразных геометрических объектов. Как правило это простейшие геометрические фигуры (круги, эллипсы, прямоугольники, многоугольники, отрезки прямых и дуги кривых линий). Векторная графика применяется зачастую в полиграфии: буклеты, листовки, визитки и пр. т.е. продукты, в которых есть текст, логотип, узоры-орнаменты, — все, что не требует точной передачи всех 18 оттенков персикового цвета, и может быть описано с помощью кривых.
Вы можете узнать формат изображений с помощью того же Screaming Frog. Кликните на колонку «Content»



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

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

Уменьшаем число байтов на пиксель

Обратимся опять к Screaming Frog. По умолчанию, максимальный размер файла с найденными на сайте изображениями «более 100 Кб». Если ваши изображения входят в этот лимит, то все хорошо. Но оптимальный вариант, если вес картинки не превышает 75 кб.

В Screaming Frog есть функция сортировки изображений по весу. Перейдите: Configuration // Spider // Preferences:



Теперь у вас есть список изображений, которые нужно уменьшить. Вот с помощью каких сервисов это можно сделать:

PunyPNG - платный
JPEGmini - платный
Compress JPEG - бесплатный
Compress PNG - бесплатный

Оптимизируем общее число пикселей

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

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



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

Обрезка картинок

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

Необрезанное изображением


Обрезанное


Оригинал статьи на английском языке: https://moz.com/ugc/how-to-perform-an-image...imization-audit


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


Поблагодарили: (1)
4
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
4ester7
4ester7
сообщение 30.1.2016, 18:39; Ответить: 4ester7
Сообщение #2


SEO-ломастер
******


Группа: Active User
Сообщений: 1670
Регистрация: 21.5.2009
Из: Кременчуг
Поблагодарили: 488 раз
Репутация:   108  


Кто не знал, оптимизированные картинки, js, css можно скачать внизу страницы анализа страницы на сервисе PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights/?hl=ru), кликнув по ссылке "Скачать оптимизированные изображения, ресурсы JavaScript и CSS для этой страницы". Замените ваши изображения, js, css на оптимизированные через FTP, сразу ускоряется.

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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Почему разнообразие на сайте вредит проекту?
24 Kiloan_Frost 1509 Сегодня, 0:48
автор: Kiloan_Frost
Открытая тема (нет новых ответов) Узнай все, о своем и чужом сайте
Выгрузка: Ahrefs+Semrush+Majestic+Spywords
7 matrixzp 1300 21.5.2018, 2:03
автор: matrixzp
Горячая тема (нет новых ответов) Аудит сайтов
Предлагаю комплексный СЕО аудит
55 genjnat 17066 20.5.2018, 19:35
автор: genjnat
Горячая тема (нет новых ответов) Ню фото на сайте фотографа
Раздел или отдельный сайт
29 Valerypantera 1507 20.5.2018, 17:02
автор: genjnat
Открытая тема (нет новых ответов) Видео баннер на сайте и его влияние
0 Seoworke 294 17.5.2018, 10:56
автор: Seoworke


 



RSS Текстовая версия Сейчас: 24.5.2018, 8:07
Дизайн