jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

posts: use low quality thumbnails when Save-Data header is set.

Browse Source 
When the Save-Data HTTP header is present, disable high quality (2x
pixel density) thumbnails. This is normally set when "Data Saver mode"
is enabled on Android, or "Lite mode" is enabled in Chrome.

This setting can also be set using the `save_data` URL param or HTTP
cookie. This is mainly for testing.

The <body> tag has a `current-user-save-data` data attribute that
indicates whether save data mode is on.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Save-Data
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/save-data/#the_save-data_request_header
https://source.android.com/devices/tech/connect/data-saver
This commit is contained in:
evazion
2021-12-09 19:52:02 -06:00
parent 7dbde7bc14
commit 52013eac1f
5 changed files with 28 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
app/components/post_preview_component/post_preview_component.html.erb
View File

@@ -14,13 +14,15 @@
<% end %>
<picture>
<% case size %>
<% when "150" %>
<%# no-op %>
<% when "180" %>
<%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
<% else # 225 to 360 %>
<%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %>
<% unless save_data %>
<% case size %>
<% when "150" %>
<%# no-op %>
<% when "180" %>
<%= tag.source type: "image/jpeg", srcset: "#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x" %>
<% else # 225 to 360 %>
<%= tag.source type: "image/webp", srcset: "#{media_asset.variant("360x360").file_url} 1x, #{media_asset.variant("720x720").file_url} 2x" %>
<% end %>
<% end %>
<%= tag.img src: variant.file_url, width: variant.width, height: variant.height, class: "post-preview-image", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%>