Лучшие размеры изображений и как сохранять изображения для Интернета (2019)

1. Каковы изображения лучшего размера для Интернета и Flothemes?
2. Использование изображения и тип
3. Слайды
4. Полноэкранное слайд-шоу
5. Регулярное слайд-шоу
6. Галерея
7. Блог
8. Избранные изображения
9. Рекомендуемые размеры изображений - Обзор
10. Как сохранить изображения для Интернета?
11. 1. Выбор правильных размеров изображения
12. а. Использование информации о размере изображения
13. б. Использование инструмента инспектора
14. Хром
15. Fire Fox
16. Сафари
17. 2. Оптимизация и сохранение изображений для Интернета
18. Оптимизация изображений в Lightroom
19. 1. Выделите и экспортируйте
20. 2. Файл и экспорт
21. 3. Использование сочетания клавиш
22. Lightroom Экспорт Диалог
23. 1. Наименование файлов
24. 2. В настройках файла
25. 3. Размер изображения
26. 4. Заточка выходных данных
27. Настройки качества изображения
28. Бонус Шаг
29. 3. Изображение SEO
30. Поиск неоптимизированных изображений

Каковы изображения лучшего размера для Интернета и Flothemes?

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

Использование изображения и тип

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

Слайды

Существуют различные типы слайд-шоу, полноэкранный , простые слайд-шоу , полная ширина фиксированная высота , а также скользкие слайд-шоу , Однако мы поместим их в 2 класса, полный экран и обычный.

Полноэкранное слайд-шоу

2880 х 1500 пикселей

Поскольку экран браузера имеет соотношение ~ 2: 1, вам нужно выбирать изображения в другом соотношении, которое вы обычно снимаете. Вы можете выбрать 5-10 изображений, а затем обрезать их до размеров, указанных выше, чтобы получить максимальную отдачу от ваших изображений с минимальным кадрированием.

Регулярное слайд-шоу

Ширина Авто x 1500px

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

Галерея

Ширина Авто x 1500px

Как и слайд-шоу, вы можете сохранить все изображения до 1500 пикселей в высоту.

Блог

1500px x Высота Авто

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

Избранные изображения

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

Изображение героя - 2880 x 1500 пикселей

Изображения героев - это полноэкранные изображения, примеры можно найти в Порту , а также Como ,

Пейзаж - 1200 х 900 пикселей

Портрет - 900 х 1200 пикселей

Рекомендуемые размеры изображений - Обзор

Слайд-шоу в полноэкранном режиме - 2880 x 1500 пикселей

Обычные слайд-шоу - высота 1500 пикселей, ширина авто.

Галереи - высота 1500px , ширина авто .

Сообщения блога - ширина 1500px , высота авто . (При использовании широкого блога используйте ширину 2000 пикселей)

Избранные изображения

• Изображения героев (полный экран) - 2880 x 1500 пикселей.
• Портрет - 900 х 1200
• Пейзаж - 1200 х 900

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

Как сохранить изображения для Интернета?

Сохранение изображений для Интернета всегда было загадкой для многих. Загрузка неоптимизированных изображений не только создаст проблемы с пользовательским интерфейсом на вашем сайте, но также повлияет на вашу стратегию SEO (скорость загрузки, показатель отказов, рейтинг и т. Д.). В этом окончательном руководстве по сохранению изображений для Интернета мы стремимся показать вам, как просматривать различные разделы на вашем сайте, чтобы определить правильные размеры ваших изображений перед их загрузкой в ​​Интернет. Мы также объясним, как правильно экспортировать / сохранять изображения, чтобы они были оптимизированы по скорости.

Наконец, мы дадим несколько советов по Image SEO, как правильно озаглавить ваши изображения при их сохранении и почему использование тегов ALT улучшит ваше SEO. Для уже загруженных изображений на ваш сайт мы покажем вам, как найти изображения слишком большого размера и замедлить работу сайта. Давай начнем!

1. Выбор правильных размеров изображения

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

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

а. Использование информации о размере изображения

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

Посмотрите изображения на своем сайте, сделайте заметки, а затем, обладая этими знаниями, вы сможете адаптировать свои фотографии в точности так, чтобы они соответствовали пространству, как это предусмотрено в дизайне темы. Просто помните, что для экранов сетчатки требуется, чтобы ваши изображения были в два раза больше предполагаемого пространства. Так что если у вас есть пространство изображения 750x500px, для сетчатки оно должно быть 1500x1000px при загрузке в WordPress (или любую другую платформу).

Например: когда мы проверяем изображение с этим расширением, оно отображается с разрешением 780x520 пикселей, но его фактический размер составляет 1560x1040 пикселей. Это потому, что мы используем экран сетчатки при проверке изображения. В этом случае вы можете использовать размеры размеров, чтобы выбрать размер изображения.

На устройстве, не являющемся сетчаткой, отображаемые размеры и размеры остаются неизменными. В этом случае удвойте числа и загрузите изображения в этом размере.

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

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

С Chrome и Safari вы также можете использовать инструмент инспектора разработчиков, чтобы найти размеры изображений на сайте. Принцип будет таким же, как и раньше, осмотрите различные элементы на сайте и запишите размеры. Удвойте размеры изображений для устройств с сетчаткой и затем загрузите их в WordPress, как только они будут оптимизированы для Интернета и правильно названы для SEO.

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

Хром

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

Fire Fox

Firefox, как и Chrome, имеет встроенный инструмент инспектора, который позволяет проверять изображения для вашего сайта.

Сафари

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

Теперь вы можете перейти к различным разделам на вашем сайте и подготовить размеры изображения.

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

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

Теперь, когда вы знаете, какие измерения вам нужны для всех элементов на вашем сайте, мы объясним, как оптимизировать все ваши изображения по размеру, с точки зрения размера данных. Размер файла ваших изображений также очень важен для Интернета. Загрузка раздутых и объемных изображений на ваш сайт будет загружать ресурсы вашего сервера, замедлять работу вашего сайта и фактически создавать негативные впечатления для пользователя.

2. Оптимизация и сохранение изображений для Интернета

При оптимизации и сохранении изображений для Интернета необходимо учитывать ряд факторов. Вы должны рассмотреть, какой тип файла использовать, JPG, PNG или GIF в зависимости от цели. Вы захотите правильно пометить свои изображения для целей SEO и сохранить их в правильном цветовом формате (sRGB для Интернета).

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

Для имен файлов, пожалуйста, убедитесь, что они подходят для каждого конкретного изображения или сообщения в блоге. Используйте только буквы, цифры, подчеркивания и дефисы. Попробуйте использовать только английские буквы. Символы других языков, знаки вопроса, пробелы, знаки процента могут загружаться неправильно или вызывать неожиданное поведение в ваших галереях или сообщениях в блоге.

Например, если вы только что провели свадьбу в стиле бохо в The Biltmore Santa Barbara, пометьте изображения, boho-wedding-biltmore-santa-barbara_0001.jpg, это будет гораздо более дружественным для SEO и может обеспечить лучший рейтинг для вашего сайта.

Оптимизация изображений в Lightroom

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

В Lightroom вы можете попасть в диалоговое окно экспорта тремя способами:

1. Выделите и экспортируйте

Вы можете просто выделить / выбрать любую фотографию из вашей библиотеки Lightroom и щелкнуть правой кнопкой мыши по фотографии. Во всплывающем меню выберите пункт «Экспорт».

2. Файл и экспорт

Второй способ - перейти в File -> Export.

3. Использование сочетания клавиш

Третий и самый быстрый способ - использовать сочетание клавиш:

shift + команда + E (⇧ + ⌘ + E)

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

Lightroom Экспорт Диалог

Теперь, когда вы знаете, как экспортировать изображения для Интернета, мы рассмотрим 4 раздела и различные параметры, которые можно выбрать в диалоговом окне экспорта Lightroom, чтобы вы могли экспортировать оптимизированные изображения для Интернета.

1. Наименование файлов

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

2. В настройках файла

Убедитесь, что ваш формат изображения установлен на JPEG. Это наиболее удобный вариант. Ваше качество должно быть не менее 65. Обычно мы устанавливаем его на 75. Ваше цветовое пространство должно быть sRGB. Это цветовое пространство, используемое в сети, поэтому оно будет отображаться наилучшим образом. НЕ устанавливайте флажок «Ограничить размер файла до:». Установка этого флажка значительно снизит качество файла.

Подводя итог, при сохранении изображений используйте следующие настройки:

• 75% качество
• Формат .jpeg (.png для логотипов и значков)
• цвета sRGB

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

Установите флажок «Изменить размер по размеру» и выберите «Ширина и высота». В поле W: H: укажите W (ширина в пикселях) для необходимого значения (1500 пикселей для сообщений в блоге и 2880 для слайд-шоу). Оставив значение в H (высота) пустым, оно будет установлено на автоматический размер.

Для галерей вы можете оставить W пустым и установить H (высота) в 1500px, это должно быть оптимально для большинства тем.

Указанные выше размеры уже оптимизированы для устройств Retina.

4. Заточка выходных данных

Установите флажок «Повышение резкости» и выберите значение «Высокий».

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

Настройки качества изображения

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

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

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

На верхнем краю шкалы качества наблюдаются убывающие результаты. Разницу в воспринимаемом качестве между настройкой качества 75% и 100% трудно заметить, но она значительно увеличивает размер файла.

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

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

Бонус Шаг

Есть один последний шаг, который может помочь радикально удалить лишние данные из изображений и уменьшить размер файла, используя такие инструменты, как JPEG Mini или же TinyPNG ,

Если у вас есть JPEG Mini Pro, вы можете добавить Расширение Lightroom , оптимизируя изображения по мере их экспорта, просто!

Если нет, просто запустите ваши недавно экспортированные изображения через JpegMini или TinyPNG.

Это будет последний шаг в создании быстрых веб-оптимизированных изображений для поддержания скорости вашего сайта, и изображения выглядят великолепно!

3. Изображение SEO

Теперь, когда у вас есть размеры, оптимизированные и загруженные на ваш сайт изображения, теперь вы захотите добавить теги ALT! Это последний шаг в создании оптимизированных изображений для целей SEO. Тег ALT - это то, что поисковые машины используют для чтения изображений. Без них ваши изображения практически не существуют в Интернете.

К счастью, с WordPress вы можете зайти в свою медиатеку после загрузки и пометить каждое изображение. Один отличный плагин, который позволит вам сделать это быстро, WP Meta SEO , после добавления вы можете перейти в WP Meta SEO> Информация об изображении и добавить ALT-теги к любым изображениям, где их нет, после завершения плагин может быть деактивирован:

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

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

Начните с определения размеров изображения, затем сохраните их правильно для Интернета, добавьте правильные заголовки и оптимизируйте их размер. Наконец, добавьте теги alt для улучшения SEO с помощью WordPress (Должно быть возможным добавить теги ALT во все системы управления контентом, обратитесь к документации, чтобы узнать, как это сделать, или обратитесь в службу поддержки).

Поиск неоптимизированных изображений

Если вы уже загрузили изображения на свой сайт и хотите узнать, как найти те, которые замедляют вашу страницу, посмотрите следующее видео. Такие инструменты, как GTMetrix или Pingdom или использование консоли браузера, легко позволят вам найти изображения, которые слишком велики для Интернета.

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

Flothemes

Расширение прав и возможностей вас