DEV: Skip srcset for onebox thumbnails (#22621)

* DEV: Skip srcset for onebox thumbnails

In an effort to preserve bandwidth especially for mobile devices this
change will prevent upscaled srcset attributes from being added to
onebox thumbnail images.

Besides checking the html for onebox classes, our database structure for
uploads does not distinguish between regular images and onebox thumbnail
images, but all upload images in discourse do have a thumbnail. By
default this thumbnail is what is used for the non-upscaled image for
onebox images, so we should only use that thumbnail. Because the
rendered onebox image size is likely smaller than the upload thumbnail
size there really shouldn't be a need to upscale.
This commit is contained in:
Blake Erickson
2023-07-19 12:21:34 -06:00
committed by GitHub
parent d1760727cf
commit 90f395a118
2 changed files with 23 additions and 14 deletions

View File

@ -228,6 +228,7 @@ class CookedPostProcessor
def optimize_image!(img, upload, cropped: false) def optimize_image!(img, upload, cropped: false)
w, h = img["width"].to_i, img["height"].to_i w, h = img["width"].to_i, img["height"].to_i
onebox = img.ancestors(".onebox, .onebox-body").first
# note: optimize_urls cooks the src further after this # note: optimize_urls cooks the src further after this
thumbnail = upload.thumbnail(w, h) thumbnail = upload.thumbnail(w, h)
@ -236,21 +237,27 @@ class CookedPostProcessor
srcset = +"" srcset = +""
each_responsive_ratio do |ratio| # Skip srcset for onebox images. Because onebox thumbnails by default
resized_w = (w * ratio).to_i # are fairly small the width/height of the smallest thumbnail is likely larger
resized_h = (h * ratio).to_i # than what the onebox thumbnail size will be displayed at, so we shouldn't
# need to upscale for retina devices
if !onebox
each_responsive_ratio do |ratio|
resized_w = (w * ratio).to_i
resized_h = (h * ratio).to_i
if !cropped && upload.width && resized_w > upload.width if !cropped && upload.width && resized_w > upload.width
cooked_url = UrlHelper.cook_url(upload.url, secure: @post.with_secure_uploads?) cooked_url = UrlHelper.cook_url(upload.url, secure: @post.with_secure_uploads?)
srcset << ", #{cooked_url} #{ratio.to_s.sub(/\.0\z/, "")}x" srcset << ", #{cooked_url} #{ratio.to_s.sub(/\.0\z/, "")}x"
elsif t = upload.thumbnail(resized_w, resized_h) elsif t = upload.thumbnail(resized_w, resized_h)
cooked_url = UrlHelper.cook_url(t.url, secure: @post.with_secure_uploads?) cooked_url = UrlHelper.cook_url(t.url, secure: @post.with_secure_uploads?)
srcset << ", #{cooked_url} #{ratio.to_s.sub(/\.0\z/, "")}x" srcset << ", #{cooked_url} #{ratio.to_s.sub(/\.0\z/, "")}x"
end
img[
"srcset"
] = "#{UrlHelper.cook_url(img["src"], secure: @post.with_secure_uploads?)}#{srcset}" if srcset.present?
end end
img[
"srcset"
] = "#{UrlHelper.cook_url(img["src"], secure: @post.with_secure_uploads?)}#{srcset}" if srcset.present?
end end
else else
img["src"] = upload.url img["src"] = upload.url

View File

@ -1042,7 +1042,9 @@ RSpec.describe CookedPostProcessor do
doc = Nokogiri::HTML5.fragment(cpp.html) doc = Nokogiri::HTML5.fragment(cpp.html)
expect(doc.css(".lightbox-wrapper").size).to eq(0) expect(doc.css(".lightbox-wrapper").size).to eq(0)
expect(doc.css("img").first["srcset"]).to_not eq(nil) expect(doc.css("img").first["srcset"]).to eq(nil)
expect(doc.css("img").first["src"]).to include("optimized")
expect(doc.css("img").first["src"]).to include("512x384")
end end
end end