Chrome generates large PDF files when using images with object-fit: cover
Reported by
cameronl...@gmail.com,
Oct 22
|
||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 Steps to reproduce the problem: 1. Create an html page with an img with src = jpg file 2. Set the img width, height and object fit 3. Press ctrl+p to print 4. Select "Save as PDF" Expected: PDF size ~120-200 KB Actual: PDF with ~900 KB https://codepen.io/camesol/pen/rqrPzv What is the expected behavior? The output PDF should not be so large What went wrong? The output PDF is larger than the original jpg image Did this work before? N/A Does this work in other browsers? Yes Chrome version: 69.0.3497.100 Channel: stable OS Version: 10.0 Flash Version: none I am using Puppeteer to create a PDF from an HTML file. When using simple layouts the output PDF is small. As soon as I use object-fit: cover or none to make the images fill the available space the output PDF is very large. It seems like the input image is being saved/embedded as a PNG. I'm assuming this since I can achieve similar image sizes when manually saving the JPG as a PNG file.
,
Oct 22
,
Oct 22
,
Oct 22
,
Oct 22
re: comment 1, thanks for bisecting.
,
Oct 23
Since this clips part of the image, I try to save space by embedding *only* the part of the image that is visible. If you want optimal results, clip the jpeg to the desired aspect-ratio before embedding it in the web page.
,
Oct 23
I'm marking this as won't-fix/working-as-intended. The current behavior will be optimal if your subset is sufficiently smaller than the original.
,
Oct 23
Better solutions: * use the new behavior only if the resultant size is actually smaller than the source * do a lossless crop of JPEG to the nearest block boundary (8px) while keeping the same position within the clipping mask (yeah it's possible)
,
Oct 23
Those sound like great solutions, but it would require a lot of work. Feel free to take a look at the relevant code and send me a CL: https://skia.googlesource.com/skia/+/master/src/pdf/SkKeyedImage.cpp https://skia.googlesource.com/skia/+/master/src/pdf/SkPDFBitmap.cpp#410 https://skia.googlesource.com/skia/+/master/src/pdf/SkPDFDevice.cpp#1811
,
Oct 24
"If you want optimal results, clip the jpeg to the desired aspect-ratio before embedding it in the web page." When I use images of the correct aspect ratio that are larger than the parent container, the PDF is still larger than the original images. The only way I have found around the problem is to use images that are exactly the same size as the container. This means I need to replicate the object-fit functionality in some other way (eg. image clip on server side). I am assuming aspect-ratio is not enough, the size of the image needs to also be smaller or equal to the container?
,
Oct 24
Sorry, I didn't quite understand how `object-fit` works.
,
Dec 4
We cannot use this suggestion "clip the jpeg to the desired aspect-ratio before embedding it in the web page" in case the user prints the page as PDF from the Chrome UI: we cannot know the correct image dimensions because the user can choose any layout (A4, letter). |
||||||
►
Sign in to add a comment |
||||||
Comment 1 by woxxom@gmail.com
, Oct 22