подписка
Подписаться

С каким расширением файлов лучше размещать картинки на сайте?

Подписка на RSS
qualified
25/01/2013
Уважаемые специалисты, знатоки и профессионалы подскажите по теме, jpg или png? В теории считается, что картинки с расширением .png более качественные. Может ли этот момент учитываться при индексации сайта поисковиками? Но с другой стороны картинки с расширением .png имеют больший размер, поэтому если на сайте будут тысячи таких картинок, не скажется ли это на производительности сайта, скорости загрузки страниц и так далее?
Скопировать ссылку на сообщение
Ответить
aml
25/01/2013
Нюансов очень и очень много у каждого из форматов.

PNG бывает разный - 8, 24 и 32 (бит). Изначально PNG разрабатывался для замены GIF, но с прогрессом этот формат вырос в нечто большее и комплексное, однако основные отличия, обусловленные разницей в кодировании графики, остались. От них и следует отталкиваться при выборе.

PNG — превосходный формат для хранения изображений с комплексным цветом, но без плавных цветовых переходов (градиентов). Поддерживает прозрачность. Идеальные сферы применения: интерфейс программ / сайтов, схематичные изображения, диаграммы, графики, обтравленные изображения с преобладанием одного цвета.

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

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

Если задача стоит в оптимизации скорости работы сайта в разрезе объема загружаемых данных, то лучше обратить внимание на его верстку, объединить графические элементы интерфейса в единый векторный файл, настроить кэширование на стороне веб-сервера (JS/CSS/TXT). Скорее всего, эти действия будут иметь гораздо больший КПД, т. к. разработчики и веб-мастера редко имеют достаточную квалификацию/мотивацию для создания шаблонов "по правилам".
Вот пара сервисов, которые "на автомате" продемонстрируют ошибки в ваших шаблонах и дадут рекомендации по их устранению: https://developers.google.com/speed/pagespeed/insights (верстка, веб-сервер) ; http://validator.w3.org (верстка)

И да, все эти ошибки имеют определенное влияние на ранжирование и поведенческие факторы, поэтому эта работа важна, но зачастую не получает должного внимания из-за нехватки времени.
Скопировать ссылку на сообщение
Ответить
Дмитрий Осипов
25/01/2013
qualified:

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

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

Цитата:

не скажется ли это на производительности сайта, скорости загрузки страниц и так далее

Обязательно скажется. Часть рекомендаций касательно выбора форматов под задачи интерфейса и хранения фотографий вам дали в предыдущем посте.
Другие популярные мероприятия:
1. Загрузка уменьшенных оптимизированных под клиента копий изображения и подгрузка копий этого изображения большего размера только по желанию и действию пользователя
2. Асинхронная загрузка графики. Позволит загружать основной содержательный контент практически моментально, в то время как графика загружается параллельно либо после загрузки основного контента. Применяется для загрузки рекламы, элементов интерфейса. Возможно применение к элементам основного контента сайта (прим. фотографий товаров) при условии оптимизации использования этого метода под поисковые системы (например, посредством клоакинга: поисковые роботы грузят фотографии товаров, пользователи же загружают их асинхронно).
Скопировать ссылку на сообщение
Ответить
qualified
25/01/2013
Спасибо за ответы!

Дмитрий Осипов:

Если речь идет том, о чем вы упомянули, - когда картинки не в формате png, а в формате jpg (и наоборот), то - нет, не может.

Просто читал несколько раз на тематических ресурсах, что ведутся работы над тем чтобы поисковики понимали содержимое картинки. Пока правда до полного решения этого вопроса ещё далеко. Поэтому предположил, что поисковики могут обращать внимание на размер картинки и её расширение.
Скопировать ссылку на сообщение
Ответить
Sergeysport
25/01/2013
Думаю, если речь идет о том как бы картинки лучше проиндексировались, то лучше бы они были уникальными.
Как с текстом.
Есть сервисы, например Тинай, которые проверяют картинку на уникальность.
Еще лучше поиск картинок у Гугла. Там тоже можно ввести УРЛ своей картинки и посмотреть сколько он найдет в Интернете похожих.
Если картинку берете из Интернета сделать уникальной непросто.
Наложить вотермарк - эффекта мало.
В фотошопе изменить яркость, контрастность - то же не очень.
А например, повернуть на 5 градусов эфекта больше.
Можно самому убедится - изменять в фотошопе и смотреть в поиске Гугл Картинки.
Чем меньше он найдет, тем вроде как выше уникальность
Он ищет не по названию картинки, назвать можете как хотите, он все равно найдет совпадения по схожему изображению
Только что взял картику монитора philips 196v3lab
сохранил себе на рабочий стол. Чтоб Гугл не искал по названию, назвал 555.
Далее поиск по картинкам в поисковой строке выбрать значок фотоапарата -> выбрать УРЛ на своем компьютре -> Найти.
Сразу 4300 результатов по philips 196v3la.
Скопировать ссылку на сообщение
Ответить
Дмитрий Осипов
25/01/2013
qualified:

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

Такие разработки ведутся. На данный момент сервисы, включая поисковые системы (во многих появились отдельные роботы и/или отраслевые поиски), могут распознавать уникальность картинки, но не могут безошибочно узнать что на ней изображено.
Речь идет об эффективном поиске и построение индексов исключительно опираясь на содержание изображения. Роботы без труда определят преобладающий в изображении цвет. Поисковик изображений Google пытается удалять из своей выдачи картинки порнографического содержания как раз по алгоритмам преобладания телесного цвета и силуэтам (тема для отдельного обсуждения).
Оптимизация изображения строится на корректности тегов или ближайшего к изображению текста, а также имени файла изображения. На основе этих данных, как и на адресе URL страницы, в случае если он схож с изображением (прим. lazerjet1231.jpg, site.com/catalog/HP/LazerJet1231pu.html) и строят индексы поисковики по изображениям (есть конечно очень много других факторов, включая ссылки на изображения и страницу, но это отход от темы). Размер изображения и его расширение никак не влияет на индексируемость страницы, при условиях указанных в моем предыдущем ответе оговорок. Если вам по каким-то причинам не дают покоя обстоятельства фиксированного размера и расширения файла - ничто вам не мешает сделать рядом с изображением ссылки вида: "lazerjet1231_big.jpg", "lazerjet1231_animated.gif", по которым фотография будет доступна в другом размере и формате. Они обязательно будут проиндексированы вместе со страницей (а возможно и без/вместо неё, но это уже другая тема
:)
Скопировать ссылку на сообщение
Ответить
qualified
26/01/2013
Спасибо за исчерпывающие ответы.
Скопировать ссылку на сообщение
Ответить
aml
26/01/2013
Еще одно дополнение по теме SEO по картинкам: обязательно заполняйте параметры тега img title / alt. Title — это "заголовок" или "название для изображения". Его поисковые роботы читают в первую очередь и ставят в приоритет (если параметр указан) перед названием самого файла. Alt - это альтернативный текст, который виден при наведении и удержании курсора на изображении, а также при невозможности загрузить изображение.
Пример: <img src="../skorovarka.jpg" title="Мультиварка Redmond RC-9315" alt="Фронтальный вид мультиварки Redmond RC-9315" />

Если изображений много и процесс их наименования получится автоматизировать - это даст заметный прирост трафика.
Ответить
Разделы форума
Открытие бизнеса
Привлечение клиентов
Удержание клиентов
Ведение бизнеса
Работа с маркетплейсами
Тенденции развития
Специальные форумы