Redimensionner l’image envoyée sur le serveur

em>you can read this post in english on wprecipes

Les appareils photo numériques actuels affichent des résolutions de plus de 6 millions de pixels, soit des images pesant plus de 2 Mo. Si le but de votre blog n’est pas de proposer le téléchargement de photos pour les faire tirer, il n’y a aucun intérêt à garder sur le serveur une image aussi lourde.

D’autre part, les extensions de type lightbox (à ce propos, je viens de découvrir ColorBox) affiche l’image d’origine. Si celle-ci est lourde, l’utilisateur risque de s’impatienter.

La meilleure solution est de redimensionner l’image avant de l’envoyer avec un utilitaire comme photoresize pour éviter un transfert de fichier trop long. Cependant ceci peut parfois être fastidieux, donc autant demander à WordPress de remplacer l’image envoyée par une image redimensionnée à une taille plus adaptée aux écrans.

Ce script va donc remplacer l’image uploadée par celle créée par WordPress en tant qu’image de grande taille (à vous de définir les dimensions dans Réglages -> Médias ).

Il vous suffit d’ajouter ce bout de code dans le fichier functions.php de votre thème. Les images que vous enverrez seront dorénavant redimensionner automatiquement.

mise à jour du 24 septembre 2010 :  bug corrigé lors de l’insertion d’image sur des articles anciens et l’utilisation des dossiers année/mois

<?php
add_filter('wp_generate_attachment_metadata','replace_uploaded_image');

function replace_uploaded_image($image_data) {

// si l'image est plus petite que la grande taille, on ne fait rien
if (!isset($image_data['sizes']['large'])) return $image_data;

// si on utilise les dossiers année/mois pour stocker les médias, on récupère la date
$temp = explode('/',$image_data['file']);
if ( count($temp) == 3 ) $image_date = $temp[0]."/".$temp[1];    

// les chemins absolus de l'image d'origine et de la grande image générée par WordPress
$upload_dir = wp_upload_dir($image_date);
$uploaded_image_location = $upload_dir['basedir'] . '/' .$image_data['file'];
$large_image_location = $upload_dir['path'] . '/' .$image_data['sizes']['large']['file'];

// on supprime l'image d'origine
unlink($uploaded_image_location);

// on change le nom de la grande image qui prend le nom de l'image d'origine
rename($large_image_location,$uploaded_image_location);

// on met à jour les metadonnées associées à l'image
$image_data['width'] = $image_data['sizes']['large']['width'];
$image_data['height'] = $image_data['sizes']['large']['height'];
unset($image_data['sizes']['large']);

return $image_data;
}
?>

Pour l’exemple, cliquez sur les photos ci-dessous et comparez le temps d’attente :

Avant l’ajout du script (image originale : 2816 x 1584 – 1,54 Mo)

P1020595

L'Aubrac sous la neige

Après l’ajout du script (la même image redimensionnée à 1024 × 576 – 98 ko)

L'Aubrac sous la neige - toujours

L'Aubrac sous la neige - toujours

Ce qui nous donne sur  le serveur :

screenshot-image

On a gagné 1,54 Mo d’espace disque la seconde fois!

This entry was posted on Vendredi, février 5th, 2010 at 10:41 and is filed under Astuces. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

14 Responses to “Redimensionner l’image envoyée sur le serveur”

How to automatically use resized images instead of originals février 7th, 2010 at 10:26

[…] to Serge Rauberfor sharing his great tip with us! If you enjoyed this article, please consider sharing it! […]

Otomatik Olarak Resimleri Küçülterek Kullanmak | KaiseRCrazY.CoM, Serkan Algur février 8th, 2010 at 22:48

[…] Reader üzerinde bloglarda yazılanları incelerken Fransızca olarak şuradan, aynı konuyu İngilizce olarak da şuradan görünce bir ekleyeyim dedim. Bu kodun mantığı çok […]

WordPress Picks for the week [02/10] | Techtites février 10th, 2010 at 21:04

[…] Resize the image sent to the server […]

How To Save Space on Your WordPress Blog Server # WordPress Tricks & Tips février 14th, 2010 at 1:44

[…] code is doing automatically, so you didn’t needed any command anymore. Thanks for Serge Rauber for tricks about Save Space in WordPress blog […]

Tap-Tap design mai 19th, 2011 at 21:41

Hello,

I used this code and got the proper width, but the image assumed the max large height – which made it not proportional.

Is there any way to define a max width in this code, and let the height determine itself – as opposed to have it take the large img size?

There is not aspect ratio, Can You add an aspect ratio?! Cheers!

kalyx mai 20th, 2011 at 8:57

@tap-tap : this code don’t generate any image. It just delete the original image if it’s bigger than the large size defined in options -> media. The image is resized by wordpress when you upload it, so look at your media options.

skaapoom juin 17th, 2012 at 10:33

I use this function with plugin :Hacklog Remote Image Autosave

I want 166×166 feature image. It works. But the Hacklog Remote Image Autosave then also downloads all remote images as 166px. Because Large i set at 166×166. I need Hacklog Remote Image Autosave to download full copy, but your function just to generate 166×166. How to work these two together?

[MOD NEEDED] Autoresize images juin 21st, 2012 at 13:22

[…] uploading, but if we let you resize automatically is much easier and faster. I found this article http://wp.kalyx.fr/05-02-2010-redime…image-uploadee could be useful? thank Reply With […]

kalyx juin 21st, 2012 at 22:03

@skaapoom:
you should set your Large image bigger (something like 1024×748) and set your featured image as thumbnail (set_post_thumbnail_size(‘166′,’166′,’true’)) or call it in your theme like this : the_post_thumbnail(‘thumbnail’) if you define your thumbnail at 166×166

look at the codex :
set_post_thumbnail_size
the_post_thumbnail

Otomatik Olarak Resimleri Küçülterek Kullanmak - WpAdamı septembre 14th, 2013 at 19:59

[…] Reader üzerinde bloglarda yazılanları incelerken Fransızca olarak şuradan, aynı konuyu İngilizce olarak da şuradan görünce bir ekleyeyim dedim. Bu kodun mantığı çok […]

Per evitare di salvare le immagini originali in WordPress | Catnic Blog octobre 25th, 2013 at 17:39

[…] a Serge Rauber per il tip. Pagina separata di ringraziamento su Contact Form 7 › Pubblicato in […]

Leave a Reply