Problème relatif à la prise en compte de l'issue #4865

Bonjour,

Avec la version de BigUp du 13/01/2023, qui contient en particulier la prise en compte de l'issue #4865, j'ai configuré BigUp avec comme largeur maximale de l'image 1080 et comme compression de l'image 85.

Avec la plupart des images téléversées via BigUp, le poids est réduit et la qualité est satisfaisante.

En revanche, avec des images PNG dont la largeur est inférieure à la largeur maximale, leur poids augmente.

Une solution consiste à ne pas utiliser l'actuelle fonction compress (de bigup.js) sur les image PNG si leur dimension est inférieure à la largeur et/ou hauteur maximale (voir l'exemple de code ci-dessous).

Par ailleurs, avec des images JPG déjà optimisées et dont la largeur est inférieure à la largeur maximale, leur poids augmente également.

Par exemple, avec l'image ci-jointe (arbre.jpg) de 768x432 qui pèse 59 Ko, son poids devient (après téléversement via BigUp) de 75 Ko, soit une augmentation de 27 % (alors que l'image est toujours en 768x432 après téléversement).

Une solution consiste à examiner le ratio poids (en octets) de l'image JPG divisé par sa résolution (en pixels). Si le ratio est inférieur par exemple à 0.3 (image déjà optimisée) et que la dimension est inférieure à la largeur et/ou hauteur maximale, alors il convient de ne pas utiliser l'actuelle fonction compress de bigup.js (voir l'exemple de code ci-dessous).

Remarque : l'exemple de ratio de 0.3 provient de tests effectués avec 9 images JPG très différentes.

Exemple de modification de la fonction compress dans \bigup\javascript\bigup.js :

async function compress(file, me) {
	const opts = {};
	opts.canvas = true;
	if (me.defaults.contraintes.clientWidth > 0) {
		opts.maxWidth = me.defaults.contraintes.clientWidth;
	}
	if (me.defaults.contraintes.clientHeight > 0) {
		opts.maxHeight = me.defaults.contraintes.clientHeight;
	}
	const data = await loadImage(file.file, opts);

  // Debut ajout
  var ci_ratio = file.file.size / (data.originalWidth * data.originalHeight);
  var ci_dimensions_ok = true;
	if (typeof opts.maxWidth !== 'undefined') {
		if (data.originalWidth > opts.maxWidth){
		  ci_dimensions_ok = false;
    }
  }
	if (typeof opts.maxHeight !== 'undefined') {
		if (data.originalHeight > opts.maxHeight){
		  ci_dimensions_ok = false;
    }
  }
  var ci_type_sans_compression = false;
  if (file.file.type=='image/png'){
    ci_type_sans_compression = true;
  }
  
  if (ci_dimensions_ok && (ci_type_sans_compression || ci_ratio < 0.3)){
		me.flow.upload();
  } else {
  // Fin ajout

	let quality = me.defaults.contraintes.clientQuality;
	if (quality > 1) {
		quality = quality / 100;
	}
	console.log('quality = ', quality);
	data.image.toBlob(
		(blob) => {
			file.file = blob;
			file.size = file.file.size;
			file.bootstrap();
			me.flow.upload();
		},
		file.file.type,
		quality
	);
	
  // Debut ajout
  }
  // Fin ajout
}

Cordialement, Equipement