1. 1-е качество: используйте свои возможности
2. 2. Используйте правильный формат: JPG или PNG
3. 3. Размер и разрешение: находит правильный баланс
4. Как вы получаете размеры ваших фотографий?
5. Шпаргалка: размер файла, размер изображения и разрешение
6. Что если ваше изображение слишком велико для вашего сайта?
7. 4. Альтернативный текст: SEO SEO
8. В итоге: оптимизация изображения для дизайна и SEO

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

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

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

Существует несколько аспектов поисковой оптимизации ваших изображений, которые положительно оцениваются поисковыми системами:

1. Оптическая привлекательность
2. Они могут быть загружены быстро
3. Их особенно легко найти

Хотя в сети есть много статей, которые обычно ограничиваются одним из этих аспектов. На этот раз мы примем другой подход и рассмотрим все три. Звучит утопично? Подожди;) Бьюсь об заклад, вы будете поражены ...

Что нам всем помогает с картиной SEO: для всех этапов существуют простые инструменты, за которые не нужно платить цент - сложные программы, такие как Photoshop, не нужны.

Я сам в основном использую (также здесь, в статье) бесплатная версия Pixlr - отличное решение для всех основных этапов редактирования изображений. Если вы предпочитаете использовать другие инструменты, см. Статью " Редактирование изображений без Photoshop «Несколько хороших альтернатив.

Создать сайт сейчас

1-е качество: используйте свои возможности

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

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

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

Совет : в Jimdo Dolphin у вас есть бесплатный доступ к большой библиотеке изображений с подходящими фотографиями для вашего проекта.

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

Вы хотите использовать графику для своего сайта? Затем вы также найдете в сети ряд бесплатных инструментов, с помощью которых вы можете создавать инфографику и добавлять текст к фотографиям, например. Нам нравятся провайдеры Canva и пикточарт. Если вам нужен логотип, мы можем, например, 99designs или дизайн может рекомендуется.

2. Используйте правильный формат: JPG или PNG

Наиболее распространенные форматы изображений, с которыми вы столкнетесь во время поиска изображений, - это JPG (или JPEG) и PNG. Оба в основном эквивалентны. Следующие советы помогут вам выбрать один из форматов:

• Фотографии должны быть сохранены в формате JPG и загружены. Вы можете отображать до 16 миллионов цветов при относительно небольшом размере файла. Если вы хотите вставить текст в фотографию, вы также можете использовать JPG, если фотография является основной частью изображения.
• Графика спасает ее лучше, чем PNG. Это относится к большинству рисунков, инфографики, рисунков с большим количеством текста и логотипов. PNG имеют более высокое качество, чем JPG, но обычно они больше. PNG хорошо работают с монохромными областями и очень резкие, поэтому у вас есть четкие линии без потери качества даже при увеличении. Также возможно отображать прозрачные фоны, которые часто необходимы, например, для логотипов. Если возможно, загрузите файлы в формате PNG-24, а не в формате PNG-8 - они имеют гораздо лучшее качество и могут отображать больше цветов.

Фотографии обычно должны быть сохранены в формате JPG.

Графика и логотипы сохраняют ее лучше, чем PNG.

Большинство программ предлагают вам выбирать между JPG или PNG при загрузке, когда вы идете в «Сохранить как», «Экспорт» или «Сохранить для Web».

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

Создайте свой собственный сайт

3. Размер и разрешение: находит правильный баланс

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

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

Это расстраивает посетителей и может ухудшить ваш рейтинг в Google & Co. , Особенно для мобильные пользователи Большие картинки и длительное время загрузки довольно раздражают.

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

Итак, как найти оптимальный баланс размера и качества? На самом деле, это о трех аспектах:

• Размер файла : он описывает объем данных, хранящихся в файле - поэтому он определяет, сколько байтов занимает файл на вашем компьютере. Размер файла является фактором, который может замедлить ваш сайт. Изображение с 15 МБ (мегабайтами) огромно, одно с 125 КБ (килобайтами) уже намного лучше. Если размер файла очень большой, это может быть связано с размером изображения или разрешением.
• Размер изображения . Возможно, вы спонтанно относитесь к этому термину в отношении классических размеров фотографий, таких как 9 × 13 см или 10 × 15 см. Однако для цифровых изображений размер изображения описывает количество пикселей. Чем больше пикселей, тем больше картинка. Например, типичное изображение на сайте имеет размеры 795 × 300 пикселей.
• Разрешение : этот термин относится к миру печати, в основном речь идет о качестве изображения, измеряемом в точках на дюйм (точек на дюйм, то есть пикселей на дюйм). Для профессиональных отпечатков обычно требуются фотографии с разрешением 300 точек на дюйм, но большинство компьютерных экранов отображают только 72 или 92 точек на дюйм, поэтому все, что выходит за рамки этого, делает изображение слишком большим. Если вы выберете в программе параметр «Сохранить для Интернета», вы сохраните изображение в низком разрешении для Интернета.

Больше о картинках и размерах картинок вы можете найти в нашем Центр поддержки ,

Как вы получаете размеры ваших фотографий?

Размер файла и размер изображения можно найти прямо на вашем компьютере. Если вы используете компьютер, щелкните правой кнопкой мыши файл изображения, выберите «Свойства», а затем «Сводка». На Mac вы щелкаете правой кнопкой мыши или удерживаете клавишу Ctrl на файле изображения и выбираете информацию.

Чтобы узнать разрешение, вам нужна профессиональная программа для редактирования изображений, такая как Photoshop. Но большинство других программ автоматически сохранят ваши изображения с низким, дружественным к сети т / д. Например, бесплатная версия Pixlr автоматически сохраняет ваши изображения с разрешением 72 т / д, а в Canva вы можете сохранить для Интернета получение PNG-файла с разрешением 92 т / д.

Шпаргалка: размер файла, размер изображения и разрешение

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

• Большие изображения или фоны не должны иметь больше 1 МБ.
• Для большинства других изображений достаточно даже 300 КБ или меньше.
• Если вы используете обои с полной поверхностью, мы рекомендуем вам ширину картинки 2000 пикселей.
• Если доступно, всегда используйте опцию «Сохранить для Интернета».
• Вы можете увеличить крупную картинку, но маленькую картинку трудно увеличить. Коллеги в Центр поддержки Pixlr Проще говоря: «Если у вас есть изображение размером 100x100 пикселей, и вы хотите превратить его в потрясающий баннер YouTube размером 2560x1440 пикселей, вы получите пиксельное и размытое изображение ... Это как если бы вы были Вы пытаетесь наполнить бассейн десятью литрами воды. "

Создать домашнюю страницу

Что если ваше изображение слишком велико для вашего сайта?

Если у вас хорошая цифровая камера, вы можете делать снимки размером в несколько мегабайт, гораздо больше, чем нужно для вашего веб-сайта. Также фотографии часто бывают довольно большими. Если ваша фотография имеет более 1 МБ, есть несколько возможностей:

• Измените размер картинки. Если ваша фотография имеет ширину 5000 пикселей, вы можете легко увеличить ее до 2000 или 1200 пикселей или даже меньше, в зависимости от того, как вы планируете использовать ее на своем веб-сайте. Таким образом, вы можете значительно уменьшить размер файла. При изменении размера убедитесь, что пропорции остаются неизменными, чтобы не искажать изображение.
• Уменьшите разрешение. Как уже упоминалось, такие программы, как Pixlr и Canva, автоматически уменьшают разрешение изображения до удобного для сети размера (72 т / д или 92 т / д). В Photoshop вы можете сделать это с помощью опции Сохранить для Интернета. Многие другие программы для редактирования изображений также предлагают возможность выбрать «Сохранить как» и настроить уровень качества там.
• Используйте бесплатное программное обеспечение. С помощью инструментов TinyPNG и TinyJPG вы можете быстро и легко сжимать ваше изображение без видимой потери качества.

Pixlr позволяет легко изменять размер изображения. Оригинальный Stock Photo имел 6302 × 4789 пикселей и 16,2 МБ, поэтому он был слишком большим для моего сайта. С Pixlr я уменьшил его до 1000 × 760 пикселей и уменьшил размер файла до веб-размера всего 132 КБ.

4. Альтернативный текст: SEO SEO

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

Атрибут Alt - это информация, которую Google & Co. понимает, что видно на картинке. Соответственно, вы должны описать в альтернативном тексте коротким значащим предложением (возможно, включая ключевые слова), что отображает изображение.

Если альтернативный текст не введен, Google автоматически берет имя файла и оценивает его как описание для изображения. Тем не менее, фотографии чаще называют Foto1.jpg или Screenshot_2017_06_02.

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

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

Примечание: заполнение альтернативных текстов и субтитров хорошо для SEO, но, пожалуйста, не запускайте " Ключевое слово Фарш ». Просто опишите свою фотографию подходящими словами. Если вы используете нерелевантные ключевые слова или используете их слишком часто, вы, вероятно, будете наказаны «богами поисковой системы»;)

Не забудьте заполнить субтитры и альтернативный текст при загрузке.

В итоге: оптимизация изображения для дизайна и SEO

Хорошо, давайте посмотрим на пять пунктов на примере моего вымышленного веб-сайта кафе. Я нашел фотографию кофейной чашки на Unsplash. Когда я скачал его, имя было fN6hZMWqRHuFET5YoApH_StBalmainCoffee.jpg. Он был размером 2509 × 1673 пикселей и имел размер 586 КБ - не полностью преувеличено, но все же намного больше, чем необходимо, чтобы отобразить его как маленькую фотографию на моем веб-сайте. Чтобы оптимизировать это изображение, я бы сделал следующее:

1. Я использую такую ​​программу, как Pixlr, чтобы обрезать изображение и уменьшить его размер. В моем примере я выбираю 1000 × 760 пикселей. Если он должен быть квадратным, 1000x1000 пикселей будут работать так же хорошо.
2. Я проверяю размер файла. После того, как я вырезал его и скачал с Pixlr, размер файла составляет всего 117 КБ - идеально!
3. Я загружаю это как элемент фотографии
4. Я заполняю альтернативный текст. Для безопасности я также добавляю субтитры.

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

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

У тебя есть вкус? Тогда ознакомьтесь с нашим пошаговым руководством " Как мне создать сайт «- в этом мы собрали еще больше полезных советов по дизайну.

Похожие

Комментарии