open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Prefer webp when available

Browse Source 
Currently we provide via the screenshot in jpg format in our API to ensure comparability with all browsers and people who believe that webp is a security risk(don't ask). 

However via the `<picture>` element you can simply provide the jpg format as default and add any `<source>` elements with their respective `type` attribute as "preffered when available". This should be in terms of decoding images and bandwidth be a good improvements for the user and for USw.

Regards,
Gusted
This commit is contained in:
Gusted 2021-08-12 01:10:55 +02:00
parent 91324a4a48
commit e63df156d9
No known key found for this signature in database
GPG Key ID: FD821B732837125F
3 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
popup.html
View File

@ -101,6 +101,9 @@
<div class="search-result"> <div class="search-result">
<a class="search-result-title"><span></span></a> <a class="search-result-title"><span></span></a>
<div class="search-result-info"> <div class="search-result-info">
<picture class="search-result-screenshot" i18n-title="installButton">
<img class="search-result-screenshot-default">
</picture>
<img class="search-result-screenshot" i18n-title="installButton"> <img class="search-result-screenshot" i18n-title="installButton">
<div class="search-result-status"></div> <div class="search-result-status"></div>
<div class="search-result-actions"> <div class="search-result-actions">

4
popup/search.css
View File

@ -68,7 +68,7 @@ body.search-results-shown {
filter: opacity(.2); filter: opacity(.2);
} }
.search-result-screenshot { .search-result-screenshot > * {
height: 140px; height: 140px;
width: 100%; width: 100%;
object-fit: cover; object-fit: cover;
@ -82,7 +82,7 @@ body.search-results-shown {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.search-result-title img { .search-result-title picture {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin: -6px 4px -6px 0; margin: -6px 4px -6px 0;

18
popup/search.js
View File

@ -284,9 +284,23 @@
$('.search-result-title span', entry).textContent = $('.search-result-title span', entry).textContent =
t.breakWord(name.length < 300 ? name : name.slice(0, 300) + '...'); t.breakWord(name.length < 300 ? name : name.slice(0, 300) + '...');
// screenshot // screenshot
const elShot = $('.search-result-screenshot', entry); const elShot = $('.search-result-screenshot-default', entry);
if (isUsw) { if (isUsw) {
elShot.src = /^https?:/i.test(shotName) ? shotName : BLANK_PIXEL; if (/^https?:/i.test(shotName)) {
elShot.src = shotName;
// USw has by default a screenshot of the style in webp format.
// But for compatability reasons always deliver the jpg format.
// Webp format is more efficient and thus is preffered to be used.
// When supported.
const webpElShot = $create('source', {
type: 'image/webp',
srcset: shotName.replace(/\.jpg$/, '.webp'),
});
const pictureEl = $('.search-result-screenshot', entry);
pictureEl.insertBefore(webpElShot, pictureEl.firstChild);
} else {
elShot.src = BLANK_PIXEL;
}
} else { } else {
const auto = URLS.uso + `auto_style_screenshots/${id}${USO_AUTO_PIC_SUFFIX}`; const auto = URLS.uso + `auto_style_screenshots/${id}${USO_AUTO_PIC_SUFFIX}`;
Object.assign(elShot, { Object.assign(elShot, {