Ensure images resolution on hi-density screens

LeBenLeBen · Apr 1, 2024 · 7a8524b · 7a8524b
1 parent 52b9121
commit 7a8524b
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 17 deletions.
diff --git a/packages/frontend/src/components/RecipeCard.vue b/packages/frontend/src/components/RecipeCard.vue
@@ -5,8 +5,8 @@
  >
  <RecipeImage
  :image="recipe.image"
- width="288"
- height="192"
+ :width="288"
+ :height="192"
  class="w-full sm:w-auto flex-shrink-0 bg-alt-200 bg-opacity-75"
  />
 

diff --git a/packages/frontend/src/components/RecipeImage.vue b/packages/frontend/src/components/RecipeImage.vue
@@ -22,8 +22,8 @@ import recipePlaceholder from '../assets/images/recipe-placeholder.svg';
 
 const props = defineProps<{
  image?: Image | null;
- width: number | string;
- height: number | string;
+ width: number;
+ height: number;
 }>();
 
 const picture = computed(() => {

diff --git a/packages/frontend/src/components/RecipeListItem.vue b/packages/frontend/src/components/RecipeListItem.vue
@@ -5,8 +5,8 @@
  >
  <RecipeImage
  :image="recipe.image"
- width="200"
- height="150"
+ :width="200"
+ :height="150"
  class="flex flex-shrink-0 w-1/3 sm:w-auto bg-alt-200 bg-opacity-75"
  />
 

diff --git a/packages/frontend/src/components/forms/ImageUploader.vue b/packages/frontend/src/components/forms/ImageUploader.vue
@@ -2,8 +2,8 @@
  <div class="flex space-x-6">
  <RecipeImage
  :image="image"
- width="200"
- height="134"
+ :width="200"
+ :height="134"
  class="rounded-lg bg-alt-200 bg-opacity-50"
  />
 

diff --git a/packages/frontend/src/helpers/images.ts b/packages/frontend/src/helpers/images.ts
@@ -2,7 +2,14 @@ import { Image } from '@/services/types';
 
 import { objectToUrlParams } from './url';
 
-type ImageTransformOptions = Record<string, string | number>;
+type ImageTransformOptions = {
+ fit?: 'cover' | 'conatin' | 'inside' | 'outside';
+ width?: number;
+ height?: number;
+ quality?: number;
+ withoutEnlargement?: boolean;
+ format?: 'auto' | 'jpg' | 'png' | 'webp' | 'tiff';
+};
 
 /**
  * Return an image URL based on its hashed named and file extension
@@ -23,14 +30,30 @@ export function imageUrl(image: Image | null = null) {
 /**
  * Add cropping params to the given image URL
  */
-export function crop(imageUrl: string, options: ImageTransformOptions) {
+export function crop(
+ imageUrl: string,
+ options: ImageTransformOptions,
+ dpr = 1
+) {
  options = Object.assign(
  {
  fit: 'cover',
  },
  options
  );
 
+ if (dpr > 1) {
+ // Lower the quality for hi-density pictures
+ options.quality ??= 60;
+
+ if (options.width) {
+ options.width *= dpr;
+ }
+ if (options.height) {
+ options.height *= dpr;
+ }
+ }
+
  return `${imageUrl}${objectToUrlParams(options)}`;
 }
 
@@ -40,14 +63,17 @@ export function hdpiSources(imageUrl: string, options: ImageTransformOptions) {
  srcset: `${crop(imageUrl, {
  ...options,
  format: 'webp',
- })}, ${crop(imageUrl, { ...options, format: 'webp', dpr: 2 })} 2x`,
+ })}, ${crop(imageUrl, { ...options, format: 'webp' }, 2)} 2x`,
  type: 'image/webp',
  },
  {
- srcset: `${crop(imageUrl, options)}, ${crop(imageUrl, {
- ...options,
- dpr: 2,
- })} 2x`,
+ srcset: `${crop(imageUrl, options)}, ${crop(
+ imageUrl,
+ {
+ ...options,
+ },
+ 2
+ )} 2x`,
  type: 'image/jpg',
  },
  ];

diff --git a/packages/frontend/src/views/Recipe.vue b/packages/frontend/src/views/Recipe.vue
@@ -42,8 +42,8 @@
  <div class="relative -mx-4 sm:-mx-6 lg:-ml-8 mb-6 md:mb-10">
  <RecipeImage
  :image="recipe.image"
- width="792"
- height="528"
+ :width="792"
+ :height="528"
  class="md:rounded-xl bg-alt-200"
  />