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

posts: add 720x720 thumbnail size.

Browse Source 
This is used to provide higher resolution thumbnails for high pixel
density displays, such as phones or laptops. If your screen has a 2x
pixel density ratio, then 360x360 thumbnails will be rendered at 720x720
resolution.

We use WebP here because it's about 15% smaller than the equivalent
JPEG, and because if a device has a high enough pixel density to use
this, then it probably supports WebP.

720x720 thumbnails average about 36kb in size, compared to 20.35kb for
360x360 thumbnails and 7.55kb for 180x180 thumbnails.
This commit is contained in:
evazion
2021-12-05 08:23:49 -06:00
parent 92906f7d39
commit 9cb70fa632
4 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
app/components/post_preview_component.rb
View File

@@ -65,18 +65,6 @@ class PostPreviewComponent < ApplicationComponent
end
end
def preview_srcset
if size == "180"
"#{media_asset.variant("180x180").file_url} 1x, #{media_asset.variant("360x360").file_url} 2x"
else
nil
end
end
def preview_url
variant.file_url
end
def tooltip
"#{post.tag_string} rating:#{post.rating} score:#{post.score}"
end

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

@@ -13,7 +13,18 @@
</div>
<% end %>
<%= tag.img srcset: preview_srcset, src: preview_url, width: variant.width, height: variant.height, class: "post-preview-image", title: tooltip, alt: "post ##{post.id}", crossorigin: "anonymous" -%>
<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" %>
<% 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" -%>
</picture>
<% end -%>
<% if pool -%>
<p class="desc">