Si vous utilisez Google Chrome en headless pour exporter vos pages HTML en PDF avec l'option --print-to-pdf
, vous avez peut être rencontré un problème avec des PDFs de sortis très lourd. Dans notre cas, les symptômes étaient des images de 2 à 3 fois plus lourdes que leur poids original dans le PDF.
Le problème peut arriver si vous utilisez la règle CSS object-fit
sur des images ou utilisez des images de fond avec background
ou background-image
, Chrome va alors transformer les JPG en PNG qui aura pour conséquence une augmentation significative du poids de ces images. Pour régler le soucis il faut donc se passer de ces règles dans les pages qui auront besoin d'être générées en PDF.
La règle object-fit: cover
peut être convertie en :
.votre-conteneur { position: relative; width: 200px; // ou votre largeur fixe height: 100px; // ou votre hauteur fixe overflow: hidden; } .votre-conteneur > img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto; min-width: 1000%; min-height: 1000%; transform: scale(0.1); }
La règle object-fit: contain
peut être convertie en :
.votre-conteneur { position: relative; width: 200px; // ou votre largeur fixe height: 100px // ou votre hauteur fixe overflow: hidden; } .votre-conteneur > img { position: absolute; left:-10000%; right: -10000%; top: -10000%; bottom: -10000%; margin: auto; max-width: 10%; max-height: 10%; transform: scale(10); }
Nous avons ainsi divisé par 4 le poids du PDF.