When printing to PDF from Google Chrome, strange things happen to small images.
The images seem to alternate between being stretched or squished horizontally.
It happens to all image types I've tried.
The images display exactly correctly in browser, but when printed to a PDF, the boxes that contain them seem to get "rounded", as if constrained to a grid that is .25pt square.
I have created an example image that should help show off the effect.
Here is how they look in browser:
This is then printed using Chrome's "Save as PDF":
Then, when viewing the file afterward, the images are now non-square:
The images will either be squished or stretched horizontally.
When inspecting the images in Adobe Illustrator, the images are always rounded to .25pt increments:
And the "stretched" images are always out by the same amount, usually rounded up to the nearest pt size. This one is 5.25pt high and 6pt across:
As images get larger, the effect is less apparent, but for small images it is obviously much more apparent.
Here is an example that is stretched vertically, with a width of 5.25pt and a height of 6pt:
I'm scratching my head trying to think why this would be, but drawing up blanks.
You can find a HTML example on CodePen here.
Basic example:
<img src="icon.svg" class="icon">
<img src="icon.png" class="icon">
<!-- repeated numerous times so error definitely shows. File type doesn't seem to matter. -->
<img src="icon.svg" class="icon">
<img src="icon.png" class="icon">
<img src="icon.svg" class="icon">
<img src="icon.png" class="icon">
<img src="icon.svg" class="icon">
<img src="icon.png" class="icon">
.icon {
width: 3mm;
height: 3mm;
}
Once the example is loaded, simply ctrl+p in Chrome (or any chromium based browser it seems, tested in Edge) and Save As PDF - the resulting file should have mangled icons in it.
The problem does not happen in Firefox.
My real question is this:
Is there a way around this? To make sure images print at the exact size specified, using Chromium Save As PDF?