Skip to content
Snippets Groups Projects
Verified Commit 270ed93a authored by Janne Mareike Koschinski's avatar Janne Mareike Koschinski
Browse files

Improved responsive image selection

parent 21166f23
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
_mixins.pug
+ 2
− 2
View file @ 270ed93a
......@@ -6,12 +6,12 @@ mixin responsive_image(alt, thumb, fallback, urls, sizes, aspect_ratio, webp_url
if webp_urls
source(type="image/webp", sizes=sizes, srcset=webp_urls, alt=alt)
source(sizes=sizes, srcset=urls, alt=alt)
img(src=fallback, sizes=sizes, srcset=urls, alt=alt)
img(src=fallback, alt=alt)
picture.load-responsive
if webp_urls
source(type="image/webp", sizes=sizes, data-srcset=webp_urls, alt=alt)
source(sizes=sizes, data-srcset=urls, alt=alt)
img(data-src=fallback, sizes=sizes, data-srcset=urls, alt=alt)
img(data-src=fallback, alt=alt)
mixin theme_card(id, name)
a.card(href=`/assets/images/${id}.png`)
......
assets/js/script.js
+ 1
− 1
View file @ 270ed93a
......@@ -39,7 +39,7 @@ window.addEventListener("load", () => {
}
// Get all of the images that are marked up to lazy load
const images = document.querySelectorAll('picture.load-responsive');
const images = document.querySelectorAll('.load-responsive');
const config = {
// If the image gets within 50px in the Y axis, start the download.
rootMargin: '400px 0px',
......
index.html
+ 5
− 5
View file @ 270ed93a
This diff is collapsed.
index.pug
+ 11
− 5
View file @ 270ed93a
......@@ -23,11 +23,17 @@ block content
#image_container(aria-hidden="true")
noscript
picture.phone
source(sizes="(max-height: 800px) calc(50vw + 101px), (max-width: 800px) calc(50vw + 101px), calc(33vw + 1px)" srcset="/assets/images/phone@220.webp 220w, /assets/images/phone@300.webp 300w, /assets/images/phone@400.webp 400w, /assets/images/phone@520.webp 520w, /assets/images/phone@640.webp 640w, /assets/images/phone@800.webp 800w, /assets/images/phone@1000.webp 1000w, /assets/images/phone@1220.webp 1220w")
img(alt="Screenshot of Quasseldroid on a phone" src="/assets/images/phone@400.png" sizes="(max-height: 800px) calc(50vw + 101px), (max-width: 800px) calc(50vw + 101px), calc(33vw + 1px)" srcset="/assets/images/phone@220.png 220w, /assets/images/phone@300.png 300w, /assets/images/phone@400.png 400w, /assets/images/phone@520.png 520w, /assets/images/phone@640.png 640w, /assets/images/phone@800.png 800w, /assets/images/phone@1000.png 1000w, /assets/images/phone@1220.png 1220w")
source(type="image/webp" media="(max-width: 800px) or (max-height: 800px)" sizes="calc(50vw + 101px)" srcset="/assets/images/phone@220.webp 220w, /assets/images/phone@300.webp 300w, /assets/images/phone@400.webp 400w, /assets/images/phone@520.webp 520w, /assets/images/phone@640.webp 640w, /assets/images/phone@800.webp 800w, /assets/images/phone@1000.webp 1000w, /assets/images/phone@1220.webp 1220w")
source(type="image/webp" sizes="calc(33vw + 1px)" srcset="/assets/images/phone@220.webp 220w, /assets/images/phone@300.webp 300w, /assets/images/phone@400.webp 400w, /assets/images/phone@520.webp 520w, /assets/images/phone@640.webp 640w, /assets/images/phone@800.webp 800w, /assets/images/phone@1000.webp 1000w, /assets/images/phone@1220.webp 1220w")
source(media="(max-width: 800px) or (max-width: 800px)" sizes="calc(50vw + 101px)" srcset="/assets/images/phone@220.png 220w, /assets/images/phone@300.png 300w, /assets/images/phone@400.png 400w, /assets/images/phone@520.png 520w, /assets/images/phone@640.png 640w, /assets/images/phone@800.png 800w, /assets/images/phone@1000.png 1000w, /assets/images/phone@1220.png 1220w")
source(sizes="calc(33vw + 1px)" srcset="/assets/images/phone@220.png 220w, /assets/images/phone@300.png 300w, /assets/images/phone@400.png 400w, /assets/images/phone@520.png 520w, /assets/images/phone@640.png 640w, /assets/images/phone@800.png 800w, /assets/images/phone@1000.png 1000w, /assets/images/phone@1220.png 1220w")
img(alt="Screenshot of Quasseldroid on a phone" src="/assets/images/phone@400.png")
picture.phone
source(sizes="(max-height: 800px) calc(50vw + 101px), (max-width: 800px) calc(50vw + 101px), calc(33vw + 1px)" srcset="/assets/images/phone@220.webp 220w, /assets/images/phone@300.webp 300w, /assets/images/phone@400.webp 400w, /assets/images/phone@520.webp 520w, /assets/images/phone@640.webp 640w, /assets/images/phone@800.webp 800w, /assets/images/phone@1000.webp 1000w, /assets/images/phone@1220.webp 1220w")
img(alt="Screenshot of Quasseldroid on a phone" src="/assets/images/phone@400.png" sizes="(max-height: 800px) calc(50vw + 101px), (max-width: 800px) calc(50vw + 101px), calc(33vw + 1px)" srcset="/assets/images/phone@220.png 220w, /assets/images/phone@300.png 300w, /assets/images/phone@400.png 400w, /assets/images/phone@520.png 520w, /assets/images/phone@640.png 640w, /assets/images/phone@800.png 800w, /assets/images/phone@1000.png 1000w, /assets/images/phone@1220.png 1220w")
source(type="image/webp" media="(max-width: 800px) or (max-height: 800px)" sizes="calc(50vw + 101px)" srcset="/assets/images/phone@220.webp 220w, /assets/images/phone@300.webp 300w, /assets/images/phone@400.webp 400w, /assets/images/phone@520.webp 520w, /assets/images/phone@640.webp 640w, /assets/images/phone@800.webp 800w, /assets/images/phone@1000.webp 1000w, /assets/images/phone@1220.webp 1220w")
source(type="image/webp" sizes="calc(33vw + 1px)" srcset="/assets/images/phone@220.webp 220w, /assets/images/phone@300.webp 300w, /assets/images/phone@400.webp 400w, /assets/images/phone@520.webp 520w, /assets/images/phone@640.webp 640w, /assets/images/phone@800.webp 800w, /assets/images/phone@1000.webp 1000w, /assets/images/phone@1220.webp 1220w")
source(media="(max-width: 800px) or (max-height: 800px)" sizes="calc(50vw + 101px)" srcset="/assets/images/phone@220.png 220w, /assets/images/phone@300.png 300w, /assets/images/phone@400.png 400w, /assets/images/phone@520.png 520w, /assets/images/phone@640.png 640w, /assets/images/phone@800.png 800w, /assets/images/phone@1000.png 1000w, /assets/images/phone@1220.png 1220w")
source(sizes="calc(33vw + 1px)" srcset="/assets/images/phone@220.png 220w, /assets/images/phone@300.png 300w, /assets/images/phone@400.png 400w, /assets/images/phone@520.png 520w, /assets/images/phone@640.png 640w, /assets/images/phone@800.png 800w, /assets/images/phone@1000.png 1000w, /assets/images/phone@1220.png 1220w")
img(alt="Screenshot of Quasseldroid on a phone" src="/assets/images/phone@400.png")
noscript
picture.tablet
source(sizes="calc(33vw + 1px)" srcset="/assets/images/tablet@545.webp 545w, /assets/images/tablet@640.webp 640w, /assets/images/tablet@720.webp 720w, /assets/images/tablet@800.webp 800w, /assets/images/tablet@880.webp 880w, /assets/images/tablet@960.webp 960w, /assets/images/tablet@1090.webp 1090w, /assets/images/tablet@1635.webp 1635w, /assets/images/tablet@2180.webp 2180w")
......@@ -70,7 +76,7 @@ block content
.ui.one.doubling.cards
.card
.image(aria-hidden="true" role="img")
+responsive_image("Screenshot of Quasseldroid notifications", "/assets/images/notifications@thumb.jpg", "/assets/images/notifications@590.png", "/assets/images/notifications@363.png 363w, /assets/images/notifications@474.png 474w, /assets/images/notifications@590.png 590w", "(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px", "51.57407407407407%", "/assets/images/notifications@590.webp", "/assets/images/notifications@363.webp 363w, /assets/images/notifications@474.webp 474w, /assets/images/notifications@590.webp 590w")
+responsive_image("Screenshot of Quasseldroid notifications", "/assets/images/notifications@thumb.jpg", "/assets/images/notifications@590.png", "/assets/images/notifications@363.png 363w, /assets/images/notifications@474.png 474w, /assets/images/notifications@590.png 590w", "(max-width: 767px) calc(100vw + 1px), (max-width: 991px) 364px, (max-width: 1199px) 475px, 591px", "51.57407407407407%", "/assets/images/notifications@590.png", "/assets/images/notifications@363.png 363w, /assets/images/notifications@474.png 474w, /assets/images/notifications@590.png 590w")
.ui.divider
.row#make_it_yours
.seven.wide.column.left.aligned
......
privacy-policy/index.html
+ 1
− 1
View file @ 270ed93a
......@@ -54,7 +54,7 @@ window.addEventListener("load", () => {
}
// Get all of the images that are marked up to lazy load
const images = document.querySelectorAll('picture.load-responsive');
const images = document.querySelectorAll('.load-responsive');
const config = {
// If the image gets within 50px in the Y axis, start the download.
rootMargin: '400px 0px',
......
releases/index.html
+ 1
− 1
View file @ 270ed93a
......@@ -46,7 +46,7 @@ window.addEventListener("load", () => {
}
// Get all of the images that are marked up to lazy load
const images = document.querySelectorAll('picture.load-responsive');
const images = document.querySelectorAll('.load-responsive');
const config = {
// If the image gets within 50px in the Y axis, start the download.
rootMargin: '400px 0px',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment