Как установить srcSetBreakpoints на изображениях Gatby Contentful

Question

В настоящее время я работаю над увеличением скорости страницы. Одним из отзывов от Google был правильный размер изображений. Я использую ContentFul в качестве поставщика изображений. Я ищу способ управлять точками srcSetBreakpoints. Я добавил maxWidth и Quality, но Goggle все еще показывает мне изображения правильного размера. Итак, я думаю управлять точками останова. Есть ли способ добавить в запрос contentFul?

  fluid(maxWidth: 1000, quality: 100){
    ...GatsbyContentfulFluid_withWebp_noBase64
  }

Answer 1

Я заметил, что когда maxWidth параметр используется в запросе, Contentful не возвращает все возможные размеры изображений в srcset. Попробуйте удалить его и запустить запрос:

      fluid(quality: 100){
  ...GatsbyContentfulFluid_withWebp_noBase64
}

Затем вы должны определить, какой размер изображения использовать для какого состояния носителя с помощью sizes param, например:

      fluid(sizes: "(max-width: 800px) 200px, (max-width: 1200px) 400px, 1200px") 
  ...GatsbyContentfulFluid_withWebp_noBase64
}

Пожалуйста, см. Документацию img и по руководствоадаптивным изображениям для получения дополнительной информации.