diff --git a/package.json b/package.json
index 28d06a4..6646981 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@team-fuho/wt",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "powered by `wagtail`. awesome!",
   "type": "module",
   "main": "dist/index.js",
diff --git a/src/client.gql b/src/client.gql
index 2cade9f..2c8a47a 100644
--- a/src/client.gql
+++ b/src/client.gql
@@ -1,14 +1,24 @@
+fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+
 fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
   seoTitle
   thumb {
-    id
-    rendition(width: 1920, height: 1080, format: "webp") {
-      id
-      url
-    }
+    ...DefaultImageView
   }
 }
 
@@ -25,9 +35,7 @@ fragment BlogPageInnerView on BlogPage {
       link
       alignment
       image {
-        url
-        width
-        height
+        ...DefaultImageView
       }
     }
     ... on QuoteBlock {
@@ -45,8 +53,7 @@ fragment GalleryOuterView on Picture {
   id
   cap
   image {
-    id
-    url
+    ...DefaultImageView
   }
   imageDate
 }
diff --git a/src/graphql/gql.ts b/src/graphql/gql.ts
index bdff187..1c75c04 100644
--- a/src/graphql/gql.ts
+++ b/src/graphql/gql.ts
@@ -15,13 +15,13 @@ import * as types from './graphql';
  * Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
  */
 const documents = {
-    "fragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    id\n    rendition(width: 1920, height: 1080, format: \"webp\") {\n      id\n      url\n    }\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        url\n        width\n        height\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    id\n    url\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"gallery.Picture\", offset: $offset, limit: $limit) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"blog.BlogPage\", offset: $offset, limit: $limit) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}": types.BlogPageOuterViewFragmentDoc,
+    "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"gallery.Picture\", offset: $offset, limit: $limit) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"blog.BlogPage\", offset: $offset, limit: $limit) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}": types.DefaultImageViewFragmentDoc,
 };
 
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "fragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    id\n    rendition(width: 1920, height: 1080, format: \"webp\") {\n      id\n      url\n    }\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        url\n        width\n        height\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    id\n    url\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"gallery.Picture\", offset: $offset, limit: $limit) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"blog.BlogPage\", offset: $offset, limit: $limit) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}"): typeof import('./graphql').BlogPageOuterViewFragmentDoc;
+export function graphql(source: "fragment DefaultImageView on TFImage {\n  id\n  url\n  rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) {\n    id\n    url\n    width\n    height\n  }\n  srcSet(sizes: [768, 1080], format: \"webp\")\n  width\n  height\n}\n\nfragment BlogPageOuterView on BlogPage {\n  id\n  slug\n  title\n  seoTitle\n  thumb {\n    ...DefaultImageView\n  }\n}\n\nfragment BlogPageInnerView on BlogPage {\n  body {\n    ... on StreamFieldInterface {\n      blockType\n    }\n    ... on RichTextBlock {\n      value\n    }\n    ... on ImageBlock {\n      caption\n      link\n      alignment\n      image {\n        ...DefaultImageView\n      }\n    }\n    ... on QuoteBlock {\n      quote\n      attribution\n    }\n    ... on HeadingBlock {\n      text\n      importance\n    }\n  }\n}\n\nfragment GalleryOuterView on Picture {\n  id\n  cap\n  image {\n    ...DefaultImageView\n  }\n  imageDate\n}\n\nquery GalleryListView {\n  pages(contentType: \"gallery.Picture\") {\n    ...GalleryOuterView\n  }\n}\n\nquery GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"gallery.Picture\", offset: $offset, limit: $limit) {\n    ...GalleryOuterView\n  }\n}\n\nquery BlogListView {\n  pages(contentType: \"blog.BlogPage\") {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {\n  pages(contentType: \"blog.BlogPage\", offset: $offset, limit: $limit) {\n    ...BlogPageOuterView\n  }\n}\n\nquery BlogPreviewView($token: String) {\n  page(id: 0, token: $token) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}\n\nquery BlogLiveView($slug: String) {\n  page(slug: $slug) {\n    ...BlogPageOuterView\n    ...BlogPageInnerView\n  }\n}"): typeof import('./graphql').DefaultImageViewFragmentDoc;
 
 
 export function graphql(source: string) {
diff --git a/src/graphql/graphql.ts b/src/graphql/graphql.ts
index f48197d..f8d1eea 100644
--- a/src/graphql/graphql.ts
+++ b/src/graphql/graphql.ts
@@ -1186,16 +1186,18 @@ export type UrlBlock = StreamFieldInterface & {
   value: Scalars['String']['output'];
 };
 
-export type BlogPageOuterViewFragment = { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string } | null } | null };
+export type DefaultImageViewFragment = { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null };
 
-export type BlogPageInnerViewFragment = { __typename?: 'BlogPage', body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', url: string, width: number, height: number } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null };
+export type BlogPageOuterViewFragment = { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null };
 
-export type GalleryOuterViewFragment = { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string } | null };
+export type BlogPageInnerViewFragment = { __typename?: 'BlogPage', body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null };
+
+export type GalleryOuterViewFragment = { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null };
 
 export type GalleryListViewQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GalleryListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage' } | { __typename?: 'Page' } | { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string } | null } | { __typename?: 'TFFuncGroup' }> };
+export type GalleryListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage' } | { __typename?: 'Page' } | { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'TFFuncGroup' }> };
 
 export type GalleryPaginatedListViewQueryVariables = Exact<{
   offset?: InputMaybe<Scalars['PositiveInt']['input']>;
@@ -1203,12 +1205,12 @@ export type GalleryPaginatedListViewQueryVariables = Exact<{
 }>;
 
 
-export type GalleryPaginatedListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage' } | { __typename?: 'Page' } | { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string } | null } | { __typename?: 'TFFuncGroup' }> };
+export type GalleryPaginatedListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage' } | { __typename?: 'Page' } | { __typename?: 'Picture', id?: string | null, cap?: string | null, imageDate?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'TFFuncGroup' }> };
 
 export type BlogListViewQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type BlogListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string } | null } | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' }> };
+export type BlogListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' }> };
 
 export type BlogPaginatedListViewQueryVariables = Exact<{
   offset?: InputMaybe<Scalars['PositiveInt']['input']>;
@@ -1216,21 +1218,21 @@ export type BlogPaginatedListViewQueryVariables = Exact<{
 }>;
 
 
-export type BlogPaginatedListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string } | null } | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' }> };
+export type BlogPaginatedListViewQuery = { __typename?: 'Query', pages: Array<{ __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' }> };
 
 export type BlogPreviewViewQueryVariables = Exact<{
   token?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type BlogPreviewViewQuery = { __typename?: 'Query', page?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', url: string, width: number, height: number } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' } | null };
+export type BlogPreviewViewQuery = { __typename?: 'Query', page?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' } | null };
 
 export type BlogLiveViewQueryVariables = Exact<{
   slug?: InputMaybe<Scalars['String']['input']>;
 }>;
 
 
-export type BlogLiveViewQuery = { __typename?: 'Query', page?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', url: string, width: number, height: number } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' } | null };
+export type BlogLiveViewQuery = { __typename?: 'Query', page?: { __typename?: 'BlogPage', id?: string | null, slug: string, title: string, seoTitle: string, thumb?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null, body?: Array<{ __typename?: 'BlockQuoteBlock', blockType: string } | { __typename?: 'BooleanBlock', blockType: string } | { __typename?: 'CharBlock', blockType: string } | { __typename?: 'ChoiceBlock', blockType: string } | { __typename?: 'DateBlock', blockType: string } | { __typename?: 'DateTimeBlock', blockType: string } | { __typename?: 'DecimalBlock', blockType: string } | { __typename?: 'DocumentChooserBlock', blockType: string } | { __typename?: 'EmailBlock', blockType: string } | { __typename?: 'EmbedBlock', blockType: string } | { __typename?: 'FloatBlock', blockType: string } | { __typename?: 'HeadingBlock', blockType: string, text?: string | null, importance?: string | null } | { __typename?: 'ImageBlock', blockType: string, caption?: string | null, link?: string | null, alignment?: string | null, image?: { __typename?: 'TFImage', id?: string | null, url: string, srcSet?: string | null, width: number, height: number, rendition?: { __typename?: 'TFRendition', id?: string | null, url: string, width: number, height: number } | null } | null } | { __typename?: 'ImageChooserBlock', blockType: string } | { __typename?: 'IntegerBlock', blockType: string } | { __typename?: 'ListBlock', blockType: string } | { __typename?: 'PageChooserBlock', blockType: string } | { __typename?: 'QuoteBlock', blockType: string, quote?: string | null, attribution?: string | null } | { __typename?: 'RawHTMLBlock', blockType: string } | { __typename?: 'RegexBlock', blockType: string } | { __typename?: 'RichTextBlock', blockType: string, value: string } | { __typename?: 'SnippetChooserBlock', blockType: string } | { __typename?: 'StaticBlock', blockType: string } | { __typename?: 'StreamBlock', blockType: string } | { __typename?: 'StreamFieldBlock', blockType: string } | { __typename?: 'StructBlock', blockType: string } | { __typename?: 'TFStreamBlocks', blockType: string } | { __typename?: 'TextBlock', blockType: string } | { __typename?: 'TimeBlock', blockType: string } | { __typename?: 'URLBlock', blockType: string } | null> | null } | { __typename?: 'Page' } | { __typename?: 'Picture' } | { __typename?: 'TFFuncGroup' } | null };
 
 export class TypedDocumentString<TResult, TVariables>
   extends String
@@ -1246,6 +1248,21 @@ export class TypedDocumentString<TResult, TVariables>
     return this.value;
   }
 }
+export const DefaultImageViewFragmentDoc = new TypedDocumentString(`
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+    `, {"fragmentName":"DefaultImageView"}) as unknown as TypedDocumentString<DefaultImageViewFragment, unknown>;
 export const BlogPageOuterViewFragmentDoc = new TypedDocumentString(`
     fragment BlogPageOuterView on BlogPage {
   id
@@ -1253,14 +1270,22 @@ export const BlogPageOuterViewFragmentDoc = new TypedDocumentString(`
   title
   seoTitle
   thumb {
-    id
-    rendition(width: 1920, height: 1080, format: "webp") {
-      id
-      url
-    }
+    ...DefaultImageView
   }
 }
-    `, {"fragmentName":"BlogPageOuterView"}) as unknown as TypedDocumentString<BlogPageOuterViewFragment, unknown>;
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}`, {"fragmentName":"BlogPageOuterView"}) as unknown as TypedDocumentString<BlogPageOuterViewFragment, unknown>;
 export const BlogPageInnerViewFragmentDoc = new TypedDocumentString(`
     fragment BlogPageInnerView on BlogPage {
   body {
@@ -1275,9 +1300,7 @@ export const BlogPageInnerViewFragmentDoc = new TypedDocumentString(`
       link
       alignment
       image {
-        url
-        width
-        height
+        ...DefaultImageView
       }
     }
     ... on QuoteBlock {
@@ -1290,86 +1313,151 @@ export const BlogPageInnerViewFragmentDoc = new TypedDocumentString(`
     }
   }
 }
-    `, {"fragmentName":"BlogPageInnerView"}) as unknown as TypedDocumentString<BlogPageInnerViewFragment, unknown>;
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}`, {"fragmentName":"BlogPageInnerView"}) as unknown as TypedDocumentString<BlogPageInnerViewFragment, unknown>;
 export const GalleryOuterViewFragmentDoc = new TypedDocumentString(`
     fragment GalleryOuterView on Picture {
   id
   cap
   image {
-    id
-    url
+    ...DefaultImageView
   }
   imageDate
 }
-    `, {"fragmentName":"GalleryOuterView"}) as unknown as TypedDocumentString<GalleryOuterViewFragment, unknown>;
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}`, {"fragmentName":"GalleryOuterView"}) as unknown as TypedDocumentString<GalleryOuterViewFragment, unknown>;
 export const GalleryListViewDocument = new TypedDocumentString(`
     query GalleryListView {
   pages(contentType: "gallery.Picture") {
     ...GalleryOuterView
   }
 }
-    fragment GalleryOuterView on Picture {
+    fragment DefaultImageView on TFImage {
   id
-  cap
-  image {
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
     id
     url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+fragment GalleryOuterView on Picture {
+  id
+  cap
+  image {
+    ...DefaultImageView
   }
   imageDate
-}`, {"hash":"c47c0526bf92dae774cdea31ff548f80be4f7f7b"}) as unknown as TypedDocumentString<GalleryListViewQuery, GalleryListViewQueryVariables>;
+}`, {"hash":"bc73a1301295701b7bb12544d5a516c075d827bc"}) as unknown as TypedDocumentString<GalleryListViewQuery, GalleryListViewQueryVariables>;
 export const GalleryPaginatedListViewDocument = new TypedDocumentString(`
     query GalleryPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {
   pages(contentType: "gallery.Picture", offset: $offset, limit: $limit) {
     ...GalleryOuterView
   }
 }
-    fragment GalleryOuterView on Picture {
+    fragment DefaultImageView on TFImage {
   id
-  cap
-  image {
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
     id
     url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+fragment GalleryOuterView on Picture {
+  id
+  cap
+  image {
+    ...DefaultImageView
   }
   imageDate
-}`, {"hash":"aa93b202ea2580daee19c6bdf62afa899be2cd85"}) as unknown as TypedDocumentString<GalleryPaginatedListViewQuery, GalleryPaginatedListViewQueryVariables>;
+}`, {"hash":"e2352450c578778cd6463ff762ae20b7665a654a"}) as unknown as TypedDocumentString<GalleryPaginatedListViewQuery, GalleryPaginatedListViewQueryVariables>;
 export const BlogListViewDocument = new TypedDocumentString(`
     query BlogListView {
   pages(contentType: "blog.BlogPage") {
     ...BlogPageOuterView
   }
 }
-    fragment BlogPageOuterView on BlogPage {
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
   seoTitle
   thumb {
-    id
-    rendition(width: 1920, height: 1080, format: "webp") {
-      id
-      url
-    }
+    ...DefaultImageView
   }
-}`, {"hash":"542a0b97d3072d924a49889551d0e7279d4e9ccb"}) as unknown as TypedDocumentString<BlogListViewQuery, BlogListViewQueryVariables>;
+}`, {"hash":"e1c027ed6403289772d00fc4ab20cbb715d56dd8"}) as unknown as TypedDocumentString<BlogListViewQuery, BlogListViewQueryVariables>;
 export const BlogPaginatedListViewDocument = new TypedDocumentString(`
     query BlogPaginatedListView($offset: PositiveInt, $limit: PositiveInt) {
   pages(contentType: "blog.BlogPage", offset: $offset, limit: $limit) {
     ...BlogPageOuterView
   }
 }
-    fragment BlogPageOuterView on BlogPage {
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
   seoTitle
   thumb {
-    id
-    rendition(width: 1920, height: 1080, format: "webp") {
-      id
-      url
-    }
+    ...DefaultImageView
   }
-}`, {"hash":"499f5f8ac6c368a74d9b55a73fafe511fd4e94aa"}) as unknown as TypedDocumentString<BlogPaginatedListViewQuery, BlogPaginatedListViewQueryVariables>;
+}`, {"hash":"c6a0990827dbca5252022baf9f074ed2d40c8167"}) as unknown as TypedDocumentString<BlogPaginatedListViewQuery, BlogPaginatedListViewQueryVariables>;
 export const BlogPreviewViewDocument = new TypedDocumentString(`
     query BlogPreviewView($token: String) {
   page(id: 0, token: $token) {
@@ -1377,17 +1465,26 @@ export const BlogPreviewViewDocument = new TypedDocumentString(`
     ...BlogPageInnerView
   }
 }
-    fragment BlogPageOuterView on BlogPage {
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
   seoTitle
   thumb {
-    id
-    rendition(width: 1920, height: 1080, format: "webp") {
-      id
-      url
-    }
+    ...DefaultImageView
   }
 }
 fragment BlogPageInnerView on BlogPage {
@@ -1403,9 +1500,7 @@ fragment BlogPageInnerView on BlogPage {
       link
       alignment
       image {
-        url
-        width
-        height
+        ...DefaultImageView
       }
     }
     ... on QuoteBlock {
@@ -1417,7 +1512,7 @@ fragment BlogPageInnerView on BlogPage {
       importance
     }
   }
-}`, {"hash":"9dc549720cd10fd2eee3272249df17a65cbd398f"}) as unknown as TypedDocumentString<BlogPreviewViewQuery, BlogPreviewViewQueryVariables>;
+}`, {"hash":"3b58296f25c4263c58bc4877c22469d789da26d6"}) as unknown as TypedDocumentString<BlogPreviewViewQuery, BlogPreviewViewQueryVariables>;
 export const BlogLiveViewDocument = new TypedDocumentString(`
     query BlogLiveView($slug: String) {
   page(slug: $slug) {
@@ -1425,17 +1520,26 @@ export const BlogLiveViewDocument = new TypedDocumentString(`
     ...BlogPageInnerView
   }
 }
-    fragment BlogPageOuterView on BlogPage {
+    fragment DefaultImageView on TFImage {
+  id
+  url
+  rendition(width: 1200, height: 630, format: "jpeg", jpegquality: 85) {
+    id
+    url
+    width
+    height
+  }
+  srcSet(sizes: [768, 1080], format: "webp")
+  width
+  height
+}
+fragment BlogPageOuterView on BlogPage {
   id
   slug
   title
   seoTitle
   thumb {
-    id
-    rendition(width: 1920, height: 1080, format: "webp") {
-      id
-      url
-    }
+    ...DefaultImageView
   }
 }
 fragment BlogPageInnerView on BlogPage {
@@ -1451,9 +1555,7 @@ fragment BlogPageInnerView on BlogPage {
       link
       alignment
       image {
-        url
-        width
-        height
+        ...DefaultImageView
       }
     }
     ... on QuoteBlock {
@@ -1465,4 +1567,4 @@ fragment BlogPageInnerView on BlogPage {
       importance
     }
   }
-}`, {"hash":"1c272b06c6dd4f8e8b730c8c78025bcade2a016e"}) as unknown as TypedDocumentString<BlogLiveViewQuery, BlogLiveViewQueryVariables>;
\ No newline at end of file
+}`, {"hash":"1ef7624b0c89de8f5c7007e299ef6b4e9f1ebb13"}) as unknown as TypedDocumentString<BlogLiveViewQuery, BlogLiveViewQueryVariables>;
\ No newline at end of file
diff --git a/src/graphql/persisted-documents.json b/src/graphql/persisted-documents.json
index 1590159..9311bf1 100644
--- a/src/graphql/persisted-documents.json
+++ b/src/graphql/persisted-documents.json
@@ -1,8 +1,8 @@
 {
-  "c47c0526bf92dae774cdea31ff548f80be4f7f7b": "fragment GalleryOuterView on Picture { cap id image { id url } imageDate } query GalleryListView { pages(contentType: \"gallery.Picture\") { ...GalleryOuterView } }",
-  "aa93b202ea2580daee19c6bdf62afa899be2cd85": "fragment GalleryOuterView on Picture { cap id image { id url } imageDate } query GalleryPaginatedListView($limit: PositiveInt, $offset: PositiveInt) { pages(contentType: \"gallery.Picture\", offset: $offset, limit: $limit) { ...GalleryOuterView } }",
-  "542a0b97d3072d924a49889551d0e7279d4e9ccb": "fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { id rendition(width: 1920, height: 1080, format: \"webp\") { id url } } title } query BlogListView { pages(contentType: \"blog.BlogPage\") { ...BlogPageOuterView } }",
-  "499f5f8ac6c368a74d9b55a73fafe511fd4e94aa": "fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { id rendition(width: 1920, height: 1080, format: \"webp\") { id url } } title } query BlogPaginatedListView($limit: PositiveInt, $offset: PositiveInt) { pages(contentType: \"blog.BlogPage\", offset: $offset, limit: $limit) { ...BlogPageOuterView } }",
-  "9dc549720cd10fd2eee3272249df17a65cbd398f": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { height url width } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { id rendition(width: 1920, height: 1080, format: \"webp\") { id url } } title } query BlogPreviewView($token: String) { page(id: 0, token: $token) { ...BlogPageInnerView ...BlogPageOuterView } }",
-  "1c272b06c6dd4f8e8b730c8c78025bcade2a016e": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { height url width } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { id rendition(width: 1920, height: 1080, format: \"webp\") { id url } } title } query BlogLiveView($slug: String) { page(slug: $slug) { ...BlogPageInnerView ...BlogPageOuterView } }"
+  "bc73a1301295701b7bb12544d5a516c075d827bc": "fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment GalleryOuterView on Picture { cap id image { ...DefaultImageView } imageDate } query GalleryListView { pages(contentType: \"gallery.Picture\") { ...GalleryOuterView } }",
+  "e2352450c578778cd6463ff762ae20b7665a654a": "fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } fragment GalleryOuterView on Picture { cap id image { ...DefaultImageView } imageDate } query GalleryPaginatedListView($limit: PositiveInt, $offset: PositiveInt) { pages(contentType: \"gallery.Picture\", offset: $offset, limit: $limit) { ...GalleryOuterView } }",
+  "e1c027ed6403289772d00fc4ab20cbb715d56dd8": "fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogListView { pages(contentType: \"blog.BlogPage\") { ...BlogPageOuterView } }",
+  "c6a0990827dbca5252022baf9f074ed2d40c8167": "fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogPaginatedListView($limit: PositiveInt, $offset: PositiveInt) { pages(contentType: \"blog.BlogPage\", offset: $offset, limit: $limit) { ...BlogPageOuterView } }",
+  "3b58296f25c4263c58bc4877c22469d789da26d6": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { ...DefaultImageView } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogPreviewView($token: String) { page(id: 0, token: $token) { ...BlogPageInnerView ...BlogPageOuterView } }",
+  "1ef7624b0c89de8f5c7007e299ef6b4e9f1ebb13": "fragment BlogPageInnerView on BlogPage { body { ... on HeadingBlock { importance text } ... on ImageBlock { alignment caption image { ...DefaultImageView } link } ... on QuoteBlock { attribution quote } ... on RichTextBlock { value } ... on StreamFieldInterface { blockType } } } fragment BlogPageOuterView on BlogPage { id seoTitle slug thumb { ...DefaultImageView } title } fragment DefaultImageView on TFImage { height id rendition(width: 1200, height: 630, format: \"jpeg\", jpegquality: 85) { height id url width } srcSet(sizes: [768, 1080], format: \"webp\") url width } query BlogLiveView($slug: String) { page(slug: $slug) { ...BlogPageInnerView ...BlogPageOuterView } }"
 }
\ No newline at end of file