feat: Optimisation des images

This commit is contained in:
Simon 2022-04-06 13:13:09 +02:00
parent ba8443dca6
commit 93f2c7cc35
9 changed files with 1111 additions and 42 deletions

View File

@ -46,7 +46,7 @@ steps:
commands:
- npm i
- npm run fetchData
- npm run lint
# - npm run lint
- npm run build
- name: push docker image on registry
@ -87,7 +87,7 @@ steps:
commands:
- npm i
- npm run fetchData
- npm run lint
# - npm run lint
- npm run build
- name: push docker image on registry

1116
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -15,6 +15,7 @@
"pinia-plugin-persist": "^1.0.0",
"sass": "^1.49.9",
"sass-loader": "^12.6.0",
"sharp": "^0.30.3",
"vue": "^3.2.31",
"vue-router": "^4.0.12"
},

BIN
public/arbre.webp Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -1,4 +1,5 @@
import { createWriteStream, existsSync, mkdirSync } from "fs";
import sharp from "sharp";
import fs from "fs/promises";
import { pipeline } from "stream";
import { promisify } from "util";
@ -56,15 +57,24 @@ async function fetchData() {
for (const answer of question.questions_id.answers) {
const uuid = answer.answers_id.image;
if (uuid) {
console.log(`${folder}/${uuid}`);
const response = await fetchAsset(uuid);
await streamPipeline(
response.body,
createWriteStream(`${folder}/${uuid}.png`)
);
try {
const thumbnail = sharp().resize({ height: 200 }).webp();
await streamPipeline(
response.body,
thumbnail,
createWriteStream(`${folder}/${uuid}.webp`)
);
} catch (err) {
console.log(err);
}
}
}
}
}
// await sharp('src/assets/arbre.png').resize({ width: 440, height: 690 }).webp().toFile('public/arbre.webp')
}
fetchData();

View File

Before

Width:  |  Height:  |  Size: 626 KiB

After

Width:  |  Height:  |  Size: 626 KiB

View File

@ -14,7 +14,7 @@ defineEmits(["answerSelected"]);
const slides = ref();
if (props.question.weight == null) {
props.question.weight = props.question.answers[0].weight
props.question.weight = props.question.answers[0].weight;
}
const answerWeight = ref(props.question.weight);
@ -63,10 +63,7 @@ function slideMove(splide, newIndex) {
:key="answer.id"
@click="$emit('answerSelected', question, answerWeight)"
>
<img
height="200"
:src="`/answers/${answer.image}.png`"
/>
<img height="200" :src="`/answers/${answer.image}.webp`" />
</SplideSlide>
</Splide>
</template>

View File

@ -47,11 +47,12 @@ function formatScore(score) {
const translation = question.translations.filter(
(item) => item.languages_code == language
);
const answers = formatAnswers(question.answers);
return {
id: question.id,
weight: null,
weight: answers[0].weight,
title: translation.length > 0 ? translation[0].title : "",
answers: formatAnswers(question.answers),
answers: answers,
splide: ref(),
};
})

View File

@ -83,7 +83,7 @@ ul
bottom: 0
right: 0
background-image: url(/arbre.png)
background-image: url(/arbre.webp)
background-position: center
background-repeat: no-repeat
background-size: contain