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: commands:
- npm i - npm i
- npm run fetchData - npm run fetchData
- npm run lint # - npm run lint
- npm run build - npm run build
- name: push docker image on registry - name: push docker image on registry
@ -87,7 +87,7 @@ steps:
commands: commands:
- npm i - npm i
- npm run fetchData - npm run fetchData
- npm run lint # - npm run lint
- npm run build - npm run build
- name: push docker image on registry - 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", "pinia-plugin-persist": "^1.0.0",
"sass": "^1.49.9", "sass": "^1.49.9",
"sass-loader": "^12.6.0", "sass-loader": "^12.6.0",
"sharp": "^0.30.3",
"vue": "^3.2.31", "vue": "^3.2.31",
"vue-router": "^4.0.12" "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 { createWriteStream, existsSync, mkdirSync } from "fs";
import sharp from "sharp";
import fs from "fs/promises"; import fs from "fs/promises";
import { pipeline } from "stream"; import { pipeline } from "stream";
import { promisify } from "util"; import { promisify } from "util";
@ -56,15 +57,24 @@ async function fetchData() {
for (const answer of question.questions_id.answers) { for (const answer of question.questions_id.answers) {
const uuid = answer.answers_id.image; const uuid = answer.answers_id.image;
if (uuid) { if (uuid) {
console.log(`${folder}/${uuid}`);
const response = await fetchAsset(uuid); const response = await fetchAsset(uuid);
await streamPipeline( try {
response.body, const thumbnail = sharp().resize({ height: 200 }).webp();
createWriteStream(`${folder}/${uuid}.png`) 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(); 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(); const slides = ref();
if (props.question.weight == null) { 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); const answerWeight = ref(props.question.weight);
@ -63,10 +63,7 @@ function slideMove(splide, newIndex) {
:key="answer.id" :key="answer.id"
@click="$emit('answerSelected', question, answerWeight)" @click="$emit('answerSelected', question, answerWeight)"
> >
<img <img height="200" :src="`/answers/${answer.image}.webp`" />
height="200"
:src="`/answers/${answer.image}.png`"
/>
</SplideSlide> </SplideSlide>
</Splide> </Splide>
</template> </template>

View File

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

View File

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