tried to lazy load home images, but a better solution is to have to home version one html the lightest possible for first laod, and one rich for vuejs display

web/themes/custom/materiotheme/materiotheme.theme

@@ -186,6 +186,14 @@ function materiotheme_theme_suggestions_field_alter(&$suggestions, &$vars){
   }
 }
 
+/**
+ * Implements hook_theme_suggestions_HOOK_alter().
+ */
+function materiotheme_theme_suggestions_image_alter(array &$suggestions, array $variables){
+  // $image = $variables['attributes']['class'][0];
+  $suggestions[] = 'image__'.$variables['style_name'];
+}
+
 /**
  * Prepares variables for product templates.
  *
@@ -224,3 +232,13 @@ function materiotheme_preprocess_printable(array &$variables) {
   $variables['site_name'] = $site_config->get('name');
   $variables['slogan'] = $site_config->get('slogan');
 }
+
+// TODO: instead of lazy load home images, make a html light home (without images),
+// replaced then by rich home vuejs
+
+// function materiotheme_preprocess_image(array &$variables) {
+//   if ($variables['style_name'] === 'card_small_home') {
+//     $variables['attributes']['data-src'] = $variables['attributes']['src'];
+//     $variables['attributes']['src'] = '/themes/custom/materiotheme/assets/img/blank.gif';
+//   }
+// }

web/themes/custom/materiotheme/templates/field/image--card-small-home.html.twig

@@ -0,0 +1,20 @@
+{#
+/**
+ * @file
+ * Theme override of an image.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
+ *
+ * @see template_preprocess_image()
+ */
+#}
+{%
+set classes = [
+  style_name ? 'image-style-' ~ style_name|clean_class,
+]
+%}
+{# {% set attributes['data-src'] = attributes['src'] %}
+{% set attributes['src'] = '#' %} #}
+<img{{ attributes.addClass(classes) }} />

web/themes/custom/materiotheme/templates/field/image-formatter.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override to display a formatted image field.
+ *
+ * Available variables:
+ * - image: A collection of image data.
+ * - image_style: An optional image style.
+ * - url: An optional URL the image can be linked to.
+ *
+ * @see template_preprocess_image_formatter()
+ */
+#}
+{% if url %}
+  {{ link(image, url) }}
+{% else %}
+  {{ image }}
+{% endif %}

web/themes/custom/materiotheme/templates/field/image-style.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override for an image using a specific image style.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the image, including the following:
+ *   - src: Full URL or relative path to the image file.
+ *   - class: One or more classes to be applied to the image.
+ *   - width: The width of the image (if known).
+ *   - height: The height of the image (if known).
+ *   - title: The title of the image.
+ *   - alt: The alternative text for the image.
+ *
+ * @see template_preprocess_image_style()
+ */
+#}
+{{ image }}

web/themes/custom/materiotheme/templates/field/image.html.twig

@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override of an image.
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the img tag.
+ * - style_name: (optional) The name of the image style applied.
+ *
+ * @see template_preprocess_image()
+ */
+#}
+{%
+set classes = [
+  style_name ? 'image-style-' ~ style_name|clean_class,
+]
+%}
+<img{{ attributes.addClass(classes) }} />