ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-06-12 21:27:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: image optimization with imagetools

Browse Source 
haha imagetools go brrr
This commit is contained in:
Ax333l
2022-11-14 16:11:55 +01:00
parent 357440d552
commit 43dc9250f6
7 changed files with 886 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/lib/components/atoms/HeroImage.svelte
View File

@ -1,16 +1,18 @@
<script>
import Picture from './Picture.svelte';
import manager_screenshot from '$images/manager_two.png?w=1233;822;411&format=avif;webp;png&picture';
</script>
<div class="hero-img">
<img src="/manager_two.png" alt="Screenshot of ReVanced Manager" />
<Picture data={manager_screenshot} alt="Screenshot of ReVanced Manager" />
</div>
<style>
img {
height: 100%;
border-radius: 2rem;
.hero-img :global(img) {
height: 100%;
border-radius: 2rem;
}
}
.hero-img {
overflow: hidden;
height: 70vh;

12
src/lib/components/atoms/Picture.svelte Normal file
View File

@ -0,0 +1,12 @@
<script>
// See: https://github.com/JonasKruckenberg/imagetools/blob/main/docs/directives.md#picture
export let data;
export let alt;
</script>
<picture>
{#each Object.entries(data.sources) as [format, images]}
<source srcset={images.map(img => `${img.src} ${img.w}w`).join(", ")} type="image/{format}">
{/each}
<img {alt} src={data.fallback.src} />
</picture>