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



 

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

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


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

Группа: Active User
Сообщений: 883
Регистрация: 22.7.2013
Поблагодарили: 899 раз
Репутация:   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
Сообщений: 1636
Регистрация: 21.5.2009
Из: Кременчуг
Поблагодарили: 472 раза
Репутация:   105  


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


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


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) SimplePay: Прием платежей на сайте для юридических и физических лиц
4 kuprum 529 15.12.2017, 14:07
автор: kuprum
Горячая тема (нет новых ответов) Рекомендую: размещение статьи на сайте, ТИЦ 325, PR 6, траст XT 8
44 rumblade 10692 14.12.2017, 15:45
автор: rumblade
Горячая тема (нет новых ответов) SEO услуги: аудит, СЯ, оптимизация, микроразметка, продвижение
работа на портфолио за небольшой donate
94 Nell 60895 13.12.2017, 19:37
автор: Nell
Открытая тема (нет новых ответов) 17 вещей на вашем сайте, которые ненавидят
Один из постулатов маркетинга — не раздражать людей
25 PostBrigada 3629 12.12.2017, 21:44
автор: alexandrrr
Открытая тема (нет новых ответов) Закажу аудит юзабилити интернет магазина
1 wagan 343 12.12.2017, 18:32
автор: Caterpillar


 



RSS Текстовая версия Сейчас: 17.12.2017, 10:27
Дизайн