Как узнать размер изображения на сайте в пикселях

Обновлено: 21.11.2024

@horatio, если css недостаточно четко указывает точный размер, например, в классе адаптивных изображений Bootstrap, вам понадобятся инструменты для определения размера..

4 ответа 4

Вы имеете в виду ту, что вверху, где большими зелеными буквами написано "deadmau5"? Это изображение размером 960 × 175 пикселей, но фактический элемент, который использует изображение в качестве фона, имеет ширину всего 926 пикселей, поэтому 34 пикселя с правой стороны изображения обрезаются.

Как я его нашел? Я использовал Firebug, просто щелкнул баннер правой кнопкой мыши и выбрал Проверить элемент во всплывающем меню. Это показало мне элемент HTML (который просто

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

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

Если, конечно, есть что-то (прозрачное), закрывающее элемент, который на самом деле содержит изображение, например. дочерний элемент, и в этом случае обычно работает проверка элемента с помощью Firebug или инструментов разработчика Chrome.

Еще один способ — открыть Инструменты разработчика в Chrome (или эквивалент в FF/IE) перед посещением страницы, и он покажет вам файлы, загруженные на вкладке "Сеть".

Затем просто нажмите на файл баннера, и он покажет вам его свойства, включая размеры.

Вы можете использовать инструмент разработчика Chrome, чтобы узнать текущий размер и исходный размер изображения. Откройте страницу, нажмите F12 (Инструменты разработчика) и осмотрите элемент, используя значок увеличительного стекла в верхнем левом углу представления инструмента Dev. Как только вы узнаете, какой элемент вам нужен, просто прокрутите вниз правую панель в представлении инструментов. Вы получите наглядный график измерения, его полей, отступов и границ (короче говоря, DOM-модель элемента)

Вот пример использования моего веб-сайта —

Обратите внимание на кнопку "Проверить элемент" и представление "Измерение" в красных кругах.

И да, если вы просто наведете курсор на изображение или тег, вы также получите размер (включая поля и границы).

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

Для многих людей сохранение изображений для Интернета всегда было загадкой. Тяжелые изображения (исходные размеры изображения при ширине 5000 пикселей, неоптимизированные изображения) не только ухудшат впечатление пользователей от вашего сайта, но и окажут негативное влияние на вашу SEO-стратегию (скорость загрузки, показатель отказов, ранжирование и т. д.).

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

Почему важны размеры изображений и производительность веб-сайта?

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

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

• Скорость

Согласно исследованиям Google, если загрузка веб-страницы занимает более 5 секунд, вероятность того, что посетитель с мобильного устройства покинет страницу, возрастает на 90 %. Вы можете ускорить работу страниц своего веб-сайта, уменьшив размер изображений.

• Пользовательский интерфейс

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

• SEO-рейтинг

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

• Продажи

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

Какие размеры изображений наиболее подходят для веб-сайтов?

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

Вот несколько общих рекомендаций по размеру изображений на веб-сайте, которым необходимо следовать!

Изображение взято с сайта Strikingly

1. Изображения для фона

Фотографии на заднем плане от Strikingly подходят для экранов самых разных размеров, от мониторов до планшетов и телефонов. Чтобы ваш фон выглядел превосходно на всех экранах, мы рекомендуем размер 1600 пикселей в ширину и 900 пикселей в высоту. С осторожностью добавляйте фотографии людей, брендов и другую информацию без фона!

2. Настройки фона

Чтобы изменить размер/выравнивание фона, у вас есть несколько вариантов.

Растянуть/скрыть по умолчанию. Этот параметр растягивает изображение на весь экран как по высоте, так и по ширине. Поскольку изображение будет работать в качестве фона на экране любого размера, обычно это лучшее решение. Однако если на вашем изображении есть контент по бокам (особенно слева и справа), он может быть не виден на мобильных телефонах.

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

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

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

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

Изображение взято с сайта Strikingly

• Фоновые изображения

Идеальный размер фонового изображения – 1600 x 900 пикселей.

• Изображения во всю ширину

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

• Изображения половинной ширины

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

• Изображения шириной ⅓

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

• Изображения шириной ¼

Для изображений шириной 1/4 наилучшего качества они должны быть не менее 360 пикселей в ширину.

• Маленькие значки и логотипы

Они должны быть не менее 100 пикселей в ширину.

• Галерея изображений

Для изображений галереи подходит любой размер! Изображения в галерее откроются в лайтбоксе в верхней части вашего сайта.

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

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

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

Изображение взято с сайта Strikingly

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

Изображение взято с сайта Strikingly

В этом случае для столбца выше требуется изображение шириной не менее 525 пикселей.

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

Рассмотрите следующие сценарии:

А. Полноразмерный размер веб-изображения для слайд-шоу

В соответствии с рекомендациями по размеру изображения на веб-сайте для полноразмерных слайд-шоу (которые автоматически расширяются до полного размера браузера) рекомендуется ширина 2560 пикселей. Это обычная ширина разрешения для мониторов с диагональю 27 и 30 дюймов.

Изображения могут быть любой высоты, необходимой для достижения выбранного вами соотношения сторон. Например, полностраничные слайд-шоу, которые часто встречаются на веб-сайтах свадебной фотографии, сохраняют исходное соотношение сторон фотографий. Другие веб-сайты используют слайд-шоу, которое занимает всю ширину страницы, но меньше по высоте (что приводит к соотношению сторон примерно 3:1).

Ниже приведен пример «панорамных» слайд-шоу с веб-сайтов с фотографиями:

Изображение взято с сайта Strikingly usre веб-сайта

Изображения должны иметь ширину 2560 (округлить до 2500 пикселей) пикселей и любую высоту, которую вы выберете для изображений, которые охватывают всю ширину браузера (в зависимости от того, хотите ли вы сохранить исходное соотношение сторон ваших изображений или выбрать более панорамный вид). вырезать).

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

Настройте требуемый размер изображения для небольших слайд-шоу, которые занимают не всю ширину страницы, а только ее часть (возможно, 2000 пикселей, 1 800 пикселей и т. д.)

Изображение взято с сайта Strikingly usre веб-сайта

Б. Размеры изображений в галереях (и миниатюры, которые увеличиваются в режиме лайтбокса)

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

Сетка миниатюр фотографий, которая при нажатии открывается в виде полноэкранного слайд-шоу (обычно с полупрозрачным наложением внизу), называется "лайтбоксом":

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

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

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

Вертикальные/портретные изображения с максимальной высотой 1200 пикселей (например, 800 x 1200 пикселей для вертикального изображения 2 : 3 или 900 x 1 200 пикселей для вертикального изображения 3 : 4) могут быть еще меньше.

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

С. Рекомендуемые размеры изображений для сообщений блога и других статических изображений в макетах страниц

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

Возьмите следующий пример отдельной записи в блоге:

Изображение взято с сайта Strikingly usre веб-сайта

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

Изображение взято с сайта Strikingly usre веб-сайта

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

Чтобы получить ту же информацию, вы можете использовать подключаемый модуль браузера, например View Image Info (properties).

С этой информацией (например, 825 пикселей) теперь можно удвоить размер для дисплеев Retina (то есть 1650 пикселей в ширину).

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

Меньшие фотографии, используемые в качестве эскизов (которые не нужно увеличивать), подлежат такому же процессу принятия решений.

Заключение

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

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

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

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

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

Дополнительную информацию о том, как загружать и встраивать изображения, см. в руководстве «Изображения в Drupal».

Скорость важна!

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

Режим изображения: используйте формат RGB.

Формат файла изображения

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

GIF: лучше всего подходит для штриховых и мультяшных рисунков.

PNG: также приемлемый формат, но в большинстве случаев не требуется.

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

Правила сохранения изображений:

Убедитесь, что вы сохранили копию исходного изображения, чтобы при необходимости вернуться и отредактировать его позже. Это может быть другой формат, такой как .raw, .tiff, .jpg или .psd, или это может быть просто исходный размер .jpg (например, с вашей цифровой камеры). Особенно важно сохранить оригинал, если к изображению или графическому файлу добавлены слои.
Файлы .jpg часто больше по размеру и загружаются дольше. Однако большинство инструментов для редактирования изображений позволяют выбрать сжатие файла для .jpg. Например, вы можете выбрать «Максимум», «Очень высокий», «Высокий», «Средний» и «Низкий». Попробуйте сохранить большие изображения с несколькими настройками сжатия, а затем протестируйте их на качество рендеринга и время загрузки. Баланс между качеством, сжатием и временем загрузки может быть критичным в зависимости от конкретного изображения и веб-документа, в котором оно отображается.
Окончательные веб-изображения должны быть сохранены в том же размере с разрешением 72 пикселя на дюйм.
Тег ALT обязателен для каждого изображения.

Размеры файлов:

Выберите оптимальный размер в зависимости от того, как вы используете изображение:

Для баннеров или основных изображений допустим размер файла до 60 КБ.
Что касается высококачественных фотографий, старайтесь, чтобы их размер не превышал 100 КБ.

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

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

Если мы решим использовать изображение с маленьким исходным размером в элементе Feature Large Flexible Content, оно может отображаться очень пикселизированным, поскольку Drupal пытается уместить маленькое изображение в большом элемент отображения.

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

Категории изображений:

Изображения WYSIWYG: 800 x 600 пикс.
Квадраты и вертикальная ориентация:миниатюры; Выстрелы в голову, использованные для сотрудника приемной комиссии; справочники персонала; Новости – Портрет; подключение к социальным сетям; и т. д.. 400 пикселей в ширину (минимальный размер – 350 x 464 пикселей).
Горизонтальная ориентация:самые гибкие элементы контента; Новости – Широкий; герой; и т. д. 1900×1022 (соотношение сторон 2:1)

Предварительный просмотр изображения

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

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

Это помещает всплывающее окно во всплывающее окно, в котором отображаются все стили изображения для всего сайта с использованием только что выбранной точки фокусировки. Мы щелкнули Фокусную точку, чтобы оказаться на велосипедисте посреди пути.

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

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

Прием Прием в UMB осуществляется отдельными школами.

Исследовательские офисы, контракты, следователи, исследовательский профиль UMB

Услуги для студентов, преподавателей и сотрудников, иностранных и на территории кампуса

Уведомления об университетской жизни, жилье, рестораны, календарь, библиотеки и развлечения

Дайте UMB Поддерживайте превосходство и удовлетворяйте образовательные потребности UMB сегодня и завтра.

Поддержите усилия UMB по борьбе с пандемией COVID-19

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

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

Есть работа для нас?

620 W. Lexington Street
Пятый этаж
Балтимор, MD 21201

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

Спецификации веб-изображений, «Шпаргалка»

Все изображения должны иметь разрешение не менее 72 dpi.
Также ознакомьтесь с нашими рекомендациями по доступности изображений в Интернете.

Содержание

Umaryland.edu

Слайд-шоу главной страницы UMB

1500 x 450 пикс.

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

Нижняя часть изображения (от 1/4 до 1/3) будет закрыта заголовком и аннотацией.

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

Стандартное слайд-шоу

740 x 400 пикселей (если на странице есть левый столбец)
1022 x 400 пикселей (если на странице нет левого столбца)

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

Элемент списка эскизов

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

100 x 100 пикс. подходит.

Мозаичная галерея

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

Видеогалерея

Миниатюры должны быть размером 75 x 75 пикселей.

Галерея изображений

Эскиз должен быть размером 165 x 165 пикселей.

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

Общее содержание

Чтобы изображение занимало всю ширину основного столбца контента, оно должно быть:
шириной 820 пикселей (если на странице есть левый столбец)
шириной 1102 пикселя (если на странице нет левого столбца )