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);
}

Un autre possibilité vient de la règle -webkit-filter: opacity(1) appliqué sur l'élément html qui va donner des pages du PDF ne contenant qu'une grande complète de la page.

Nous avons ainsi divisé par 4 le poids du PDF.