NextJS не добавляет свойства ширины и высоты в теги изображений

Я улучшаю свое приложение, сделанное в Nextjs, и я начал с SEO-оптимизации, PageSpeed рекомендует добавлять явные свойства ширины и высоты в теги изображений. Когда я использую компонент Image из "next/Image", он возвращает мне следующее:

<span style = "box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;">
    <img alt = "my-img" sizes = "100vw" srcset = "/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=640&amp;q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=750&amp;q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=828&amp;q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=1080&amp;q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=1200&amp;q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=1920&amp;q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=2048&amp;q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=3840&amp;q=75 3840w" src = "/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fmy-img.26135ca6.webp&amp;w=3840&amp;q=75" decoding = "async" data-nimg = "fill" style = "position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;" />
</span>

В NextJS это будет примерно так:

<Image
  alt = "my-img"
  loading = "eager"
  layout = "fill"
  objectFit = "contain"
  src = {myImg}
/>

Ну, я не добавляю свойства ширины и высоты в компонент изображения, потому что мне нужно адаптивное изображение. Однако, если я добавлю свойства ширины и высоты, они не отразятся в теге «img». Есть ли способ отобразить эти свойства, чтобы немного улучшить SEO?

next.js seo nextjs-image

21.03.2022 18:49

Стоит ли изучать PHP в 2023-2024 годах?

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

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

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Игнорируй это.

привет, сэр, я действительно думаю, что PageSpeed является строгим, я хотел бы задать вам вопрос, существует ли еще одна страница для тестирования производительности веб-сайтов?

— 23.03.2022 03:22

23.03.2022 00:46