Redimensionner photo pour le web mobile

Navigation: Pages Webmaster > Programmation

Le web mobile ne peut permettre de charger des images de grande résolution. Les temps de téléchargement risquent d'être longs pour un affichage de surcroit sur un écran de petite taille.
Il convient donc de redimensionner ces images et ce à la volée.
Pour ce faire utilisons PHP avec la bibliothèque GD, et voyons le script en ligne.

La bibliothèque GD, disponible sur les hébergements WEB (peut être pas les hébergement gratuits) permet de redimensionner les images et ce sans avoir à télécharger l'image via FTP, GD va faire ça à la volée.
Pour notre problématique de web mobile, il va de plus falloir détecter la présence d'une image dans le source SQL ou texte et afficher ce code source avec l'image redimensionnée.
Etant donné que la bibliothèque GD est gourmande en CPU, il va également être nécessaire de tester si l'image n'a pas été redimensionnée au préalable. Il faut aussi prendre en compte qu'il peut y avoir plusieurs images et que les images inférieures à une taille donnée seront affichées en l'état. Ouf !

En pseudo code, cet algorithme va avoir la forme suivante :
Pour un article stocké en base :

Lecture de l'article
Pour chaque image trouvée
réduction de l'image et stockage dans un répertoire
remplacement image lu par image réduite
Autre image
Affichage de l'article

$line=$r1["texte"];
if (preg_match_all("|<img src=\"(.*)></img >|U",  $line, $out)) { // ! </img>
$i=0;
foreach ($out as $v1) {
    foreach ($v1 as $v2) {
	$chaine = $out[1][$i];
	if ($chaine) {
	$line = mini($chaine,$line); // fonction de reduction
	}
	$i++;
    }
}
}
print $line;

Le preg_match_all va aller chercher toutes les images correspondant à notre pattern et alimenter un tableau. Pour chaque image, on appelle la fonction de réduction / remplacement. Lorsque toutes les images sont traitées on affiche l'article avec les images réduites.

Voyons le coeur du sujet, la réduction de l'image à la volée.

Tout d'abord le pseudo code de l'algorithme :

Récupérer le nom de l'image
Récupérer le répertoire de l'image
Récupérer la dimension de l'image
Si la largeur de l'image est supérieure à une largeur donnée
On calcule un taux de réduction
On crée une copie de l'image source à la taille réduite
Sinon
Image réduite c'est l'image source
Fin si
On remplace l'image source par l'image réduite

Ce qui nous donne en PHP quelque chose comme

// fonction de miniature
function mini($chaine, $line) {

$findme ="/";
$pos = strrpos($chaine, $findme);
$npos=$pos++;
$rest = substr($chaine, $npos); // image.jpg" width="30" height="30" alt="_"
$pos= strpos($rest,"\""); // recherche du " après l'extension
$image=substr($rest, 0, $pos); // nom de l'image
$doss = substr ($chaine, 0, $npos);
if (eregi("alt=\"(.*)\"", $rest, $out)) {
$alt = $out[1];
}
$line=str_replace($chaine, reduit($doss, $image)." Alt=\"".$alt."\"", $line);
return($line);
}



// fonction de reduction

function reduit($doss, $img1) {
$source = @imagecreatefromjpeg($doss.$img1); // La photo est la source
// Les fonctions imagesx et imagesy renvoient la larg et la haut d'une image
$largeur_source = @imagesx($source);
$hauteur_source = @imagesy($source);
$pref="small/";   // nom du répertoire vignettes
$img2=$pref.$img1;
$largeur_destination = 170; // taille destination réduite
if ($largeur_source > $largeur_destination ) // grande image
{
$taux=imagesx($source)/$largeur_destination;  // on determine un taux
$hauteur_destination=intval($hauteur_source/$taux); // on l'applique
if (!file_exists($img2)) { // a t'on déja reduit ?
$destination = imagecreatetruecolor($largeur_destination, $hauteur_destination); 
// On crée la miniature

@imagecopyresampled($destination, $source, 0, 0, 0, 0, $largeur_destination,
 $hauteur_destination, $largeur_source, $hauteur_source);
// On enregistre la miniature dans la var2
@imagejpeg($destination, $img2);
}
return ("".$img2."\" width=\"".$largeur_destination."\" 
height=\"".$hauteur_destination."\"");
}
else
{ // pas de reduction
$img1=$doss.$img1;
return ("".$img1."\" width=\"".$largeur_source."\" height=\"".$hauteur_source."\"") ;
}

}

Le nom des variables ainsi que les commentaires doivent vous permettre de comprendre ce que l'on fait.
La largeur de 170 peut être adaptée, voire passée en variable pour réellement s'adapter à la taille de l'écran.
Encore faut il avoir une base des différents mobiles et smart-phones du marché en constante évolution pour s'adapter, ou lire en direct la taille des écrans et redimensionner en conséquence (a suivre ...).

Téléchargement du script : le script initial avec les deux fonctions peut être directement téléchargé ici

Commentaires

Autres publications Programmation

Url en bit.ly sous ajax
(Ecrit le 15/03/2010 - 2.445 lectures)
Autre manière de calculer une url courte de type bit.ly et de profiter des traitements asynchrones possibles avec ajax

Optimiser l'API bit.ly pour un affichage plus rapide des pages
(Ecrit le 08/03/2010 - 2.355 lectures)
Bit.ly est le site permettant de raccourcir une url, et dont l'API permet de raccourcir à la volée. Hélas cette api peut ralentir l'affichage des pages, voyons comment intégrer l'API et afficher ses pages aussi vite qu'avant.

Intégrer l'API bit.ly pour twitter
(Ecrit le 06/03/2010 - 3.499 lectures)
Twitter, le réseau social, peut être alimenté par des articles de site web et efficacement lorsque les url ont été raccourcies. Voyons alors comment générer à la volée des url avec bit.ly et ce grâce à l'API proposée.

Dessiner dans une image avec PHP
(Ecrit le 23/02/2010 - 1.808 lectures)
Après avoir vu comment écrire dans une image, voyons comment dessiner dans une image puis écrire avec d'une part des polices de caractère et des couleurs, mais également des paramètres passés en variable.

Ecrire dans une image à la volée
(Ecrit le 22/02/2010 - 2.093 lectures)
Le langage PHP permet d'écrire dans une image à la volée afin par exemple d'y ajouter un texte en superposition. Cette fonction permet également de masquer l'url de l'image puisque crée par le serveur.

Redimensionner photo pour le web mobile
(Ecrit le 15/02/2009 - 3.711 lectures)
Le web mobile ne peut permettre de charger des images de grande résolution. Il convient de les redimensionner. Pour ce faire utilisons PHP avec la bibliothèque GD, script en ligne.

Passer au web version mobile
(Ecrit le 09/02/2009 - 5.648 lectures)
Comment procéder pour écrire son site en version mobile pour smartphone, pda ou téléphone mobile avec wap. Voyons comment appliquer un template dédié pour le web sur mobile.

Structure pour web mobile
(Ecrit le 09/02/2009 - 4.450 lectures)
Les pages web pour téléphone mobile ou pour smartphone ne se construisent pas de la même manière que pour un site web avec navigateur classique. Quelques limitations sont à prendre en compte, voyons ces points.

Faut il externaliser ses scripts
(Ecrit le 09/12/2008 - 3.046 lectures)
Pour obtenir des temps de réponses corrects et si possible optimum, tout webmaster doit se poser la question de savoir si il faut externaliser les scripts d'un site web.

Reseau Social Friend connect
(Ecrit le 05/12/2008 - 2.779 lectures)
Google ouvre son réseau social Friend Connect aux autres plateforme et permet d'installer cet outil très facilement sur un site web.

Feuilles de styles statiques
(Ecrit le 09/11/2008 - 2.073 lectures)
Les feuilles de style dynamiques ne sont pas une bonne solution du coté de l'optimisation des pages web

Optimiser ses scripts
(Ecrit le 05/10/2008 - 2.033 lectures)
YSLOW propose de positionner ses scripts correctement dans ses pages web pour améliorer la vitesse de chargement.

Optimiser la lecture des feuilles de style
(Ecrit le 01/10/2008 - 1.658 lectures)
Cinquième règle YSLOW pour optimiser son site web : positionner les feuilles de styles correctement dans la page web.

YSLOW : composant compressé
(Ecrit le 20/09/2008 - 2.318 lectures)
Règle quatre pour optimiser les temps de réponse du serveur : compresser les composants de la page coté serveur.

Yslow : les pages dynamiques ou statiques sont persitantes
(Ecrit le 12/09/2008 - 2.010 lectures)
Règle numéro trois pour optimiser les temps de réponse du serveur : rendre persistantes ses pages web, qu'elles soient statiques ou dynamiques.

YSLOW : Réduire le nombre de requêtes
(Ecrit le 31/08/2008 - 2.637 lectures)
Règle numéro un pour optimiser les temps de réponse du serveur : minimiser le nombre de requêtes.

Améliorer la vitesse d'un site coté serveur
(Ecrit le 30/08/2008 - 2.907 lectures)
Après avoir optimisé le code des pages coté client, il reste à voir ce que l'on peut faire coté serveur, Yslow nous aide en ce sens

GoogleEarth kml et flux rss
(Ecrit le 20/06/2008 - 2.919 lectures)
Les flux rss permettant de lire de diffuser le contenu d'une page web sur un site, peuvent être utilisés pour lire un fichier Google Earth dont le contenu évolue.

Annuaire thématique cartographié
(Ecrit le 05/12/2007 - 8.339 lectures)
Carte des sites web de l'annuaire thématique avec géolocalisation et plan des villes.

Adapter son site à la résolution d'écran
(Ecrit le 23/11/2007 - 13.555 lectures)
Comment rendre son site lisible en 800 x 600 comme dans les grandes résolutions avec utilisation des balises div

L'API Google Maps Xml et Ajax sont sur un site web
(Ecrit le 19/11/2007 - 9.597 lectures)
Utiliser un flux xml pour afficher des données sur une carte Googlemaps

Intégrer l'API Google Maps
(Ecrit le 18/01/2006 - 73.462 lectures)
Présentation des éléments permettant de réaliser une intégration de l'API GoogleMaps sur un site web.

Software 2.0 - Programmation en Java
(Ecrit le 04/04/2005 - 6.702 lectures)
Le sujet principal de Software 2.0 4/2005 (6) : Programmation en Java

Suivez phortail

Web phortail.org

• Certification ISTQB
• Qualité logicielle
• Cahier des charges fonctionnel détaillé
• Emploi de Test manager en Recette informatique
• Emploi de Test Analyst en Recette informatique