CSS: superposer du texte lisible sur une image de fond photo

CSS: superposer du texte lisible sur une image de fond

Il est souvent utile de pouvoir placer du texte sur une image de fond, de manière à ce que l’on puisse lire le texte facilement et distinguer l’image. C’est ce que j’utilise sur le blog pour les images d’illustration des articles.

Nous allons donc superposer du texte lisible sur une image de fond en utilisant uniquement du code HTML et CSS, ce qui nous donne ceci:

Voici une planche à voile

Une image de planche à voile se trouve derrière ce texte.

Vous souhaitez accomplir la même chose? Voici comment faire.

Lire la suite

GIMP : tutoriel pour créer un meme photo 3

GIMP : tutoriel pour créer un meme

Qu’est-ce qu’un meme ?

Un mème ou « meme », qui se prononce [mi:m] en anglais, décrit un élément ou un phénomène repris et décliné en masse sur internet.

Origine du mot “meme”

Le terme de « mème » a été proposé pour la première fois par Richard Dawkins dans Le Gène égoïste (1976) par déformation du terme mimesis (« imitation », en grec ancien) par analogie avec le mot gène. Selon Dawkins, dans le domaine mental, les mèmes sont des réplicateurs, comparables à ce titre aux gènes, mais responsables de l’évolution de certains comportements animaux et des cultures.

Formes du meme

Dans sa forme la plus sommaire, un mème internet est une idée simple propagée à travers le web. Cette idée peut prendre la forme d’un hyperlien, d’une vidéo, d’un site internet, d’un hashtag, d’un personnage récurrent ou simplement d’une phrase ou d’un mot. Ce mème peut être propagé par plusieurs personnes par le biais de réseaux sociaux, de blogs, de messageries instantanées, d’actualité, et autres services internet.

L’élément humoristique est un facteur très important pour les mèmes. Une communication décalée par rapport à un contexte en combinaison avec des images, est bien souvent la base des mèmes sur internet. L’imitation entre pairs induit implicitement une compétition créative pour se faire remarquer et générer collectivement le buzz. Commercialement, ils sont utilisés en tant que marketing viral, aperçus comme publicités de masse.

Créer un meme sous GIMP

La création d’un meme tient surtout du texte que l’on va apposer sur notre image. C’est un texte en lettres capitales blanches avec un contour blanc, pour respecter le code du meme.Nous allons donc utiliser la police d’écriture Impact, en blanc, avec un contour noir pour respecter le code du meme.

  1. Ouvrez l’image qui va servir de support à votre futur meme. Je choisis ici “The Most Interesting Man in the World”.
  2. Cliquez sur l’icône Texte et entrez votre punchline, écrite avec la police de caractère Impact, en blanc. Ajustez la taille de la police selon la longueur de votre punchline :
    GIMP : tutoriel pour créer un meme photo
  3. Ensuite, faîtes un clic droit sur le calque texte et sélectionnez Alpha vers sélection qui se trouve en bas de la liste:
    GIMP : tutoriel pour créer un meme photo 1
  4. Vérifiez que la couleur de premier plan sélectionnée est bien sur Noir.
  5. Sélectionnez maintenant le menu Edition > Tracer la sélection. Sur la page d’options, cochez Ligne de tracé, Couleur pleine et Anti-crénelage. Choisissez l’épaisseur du trait en pixel qui convient, 1 pixel ou plus selon la taille de la police :
    GIMP : tutoriel pour créer un meme photo 2
  6. Validez : votre texte blanc devrait maintenant avoir une bordure noire !

Il ne vous reste plus qu’à répéter l’opération pour la seconde ligne de texte (si besoin) et enregistrer votre meme tout neuf.

GIMP : tutoriel pour créer un meme photo 3

Résultat :

Et voilà, vous venez de créer votre propre meme avec GIMP !

hourglass

Serveur dédié : optimiser toutes les images GIF avec GIFsicle

Après avoir vu comment optimiser les fichiers JPG et PNG sur le serveur, voici comment optimiser les fichiers GIF.

hourglass

Comme dans le tutoriel précédent, nous allons optimiser toutes nos images d’un seul coup, de manière à charger nos pages plus rapidement et à consommer moins de bande passante.

Pour optimiser les fichiers GIF, j’ai choisi GIFsicle.

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation de GIFsicle

On installe le paquet :

apt-get install gifsicle

et on RTFM :

man gifsicle

Optimisation des PNG

Pour optimiser les fichiers GIF, il suffit de lancer :

gifsicle --batch -O3 *.gif

L’argument --batch permet de gérer plusieurs fichiers et -O3 permet la meilleure optimisation possible, en essayant plusieurs combinaisons de compression pour trouver le ratio le plus intéressant.

Lire la suite

Sommaire de la série Monter un serveur dédié de A à Z

  1. Serveur dédié : installation d’Apache, PHP, MySQL et Webmin
  2. Serveur dédié : créer la base de données MySQL et importer WordPress
  3. Serveur dédié : créer et activer un Virtual Host sous Apache
  4. Serveur dédié : changer les DNS du nom de domaine et le faire pointer vers le serveur
  5. Serveur dédié : sécurisation des services avec iptables et fail2ban
  6. Serveur dédié : sécurisation de la couche TCP/IP
  7. Serveur dédié : création d’un serveur mail Postfix (sécurisé avec Saslauthd et certificat SSL) et Courier (accès POP et IMAP) utilisant une base MySQL d’utilisateurs/domaines virtuels
  8. Serveur dédié : sécuriser Apache 2 avec ModSecurity
  9. Serveur dédié : CHMOD récursif sur des fichiers ou répertoires en ligne de commande
  10. Serveur dédié : installer APC comme système de cache et configurer Varnish comme reverse-proxy pour Apache pour améliorer les performances
  11. Serveur dédié : afficher la véritable IP derrière un reverse-proxy comme Varnish
  12. Serveur dédié : intégrer SSH à WordPress pour mettre à jour le core, les plugins et les thèmes
  13. Serveur dédié : installer la dernière version d’APC par SVN
  14. Serveur dédié : analyse des performances du serveur
  15. Serveur dédié : mettre à jour le noyau Debian de la Kimsufi
  16. Serveur dédié : sauvegarde automatique des fichiers avec Backup Manager sur le serveur de sauvegarde OVH
  17. Serveur dédié : configurer la limite mémoire pour PHP et Suhosin
  18. Bash : supprimer tous les fichiers et sous-répertoires d’un répertoire
  19. Serveur dédié : impossible de se connecter à un port distant
  20. Rsync: rapatrier les fichiers du serveur à la maison
  21. Bash : réparer les tables MySQL en cas de crash
  22. Serveur dédié : création d’une seedbox avec Transmission
  23. Serveur dédié : des paquets LAMP à jour sous Debian
  24. Serveur dédié : mise à jour vers Debian 7 Wheezy
  25. Serveur dédié : activer X11 forwarding pour SSH
  26. Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim
  27. Postfix : résoudre l’erreur “fatal: www-data(33): message file too big”
  28. Serveur dédié : mise en place de l’IPv6
  29. WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod
  30. WordPress : héberger les images sur un sous-domaine
  31. Serveur dédié : ajouter l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim
  32. Apache : lorsque le domaine seul (sans WWW) renvoie une erreur 403
  33. Serveur dédié : sécuriser Apache avec HTTPS (HTTP avec la couche TLS/SSL) en Perfect Forward Secrecy
  34. Serveur dédié : passer WordPress en HTTPS (TLS/SSL)
  35. Serveur dédié : configurer Webmin en TLS avec un certificat SSL
  36. Serveur dédié : configurer Transmission pour accéder au WebUI via TLS-SSL
  37. Serveur dédié : installer et configurer Varnish 4
  38. Serveur dédié : passage au mod FastCGI et PHP-FPM avec Apache MPM Worker
  39. Récupérer un serveur Kimsufi après un plantage de kernel avec le mode rescue OVH
  40. Serveur dédié : configurer Postfix et Courier pour utiliser TLS-SSL en Perfect Forward Secrecy
  41. Serveur dédié : retirer Varnish, devenu inutile avec HTTPS
  42. Serveur dédié : installer la dernière version d’OpenSSL sous Debian
  43. Serveur dédié : activer l’IP canonique du serveur sous Apache
  44. Serveur dédié : mise à jour vers PHP 5.6
  45. MySQL : convertir les tables MyISAM au format InnoDB
  46. Serveur dédié : optimiser toutes les images GIF avec GIFsicle
  47. Serveur dédié : migration de MySQL vers MariaDB
  48. BASH : lister, bloquer et débloquer des adresses IP avec iptables
  49. Serveur dédié : produire une meilleure réserve d’entropie avec haveged
  50. Serveur dédié : mettre en place DNSSEC pour sécuriser les DNS du domaine
  51. Serveur dédié : mise en place du protocole DANE
  52. 8 règles d’or pour bien déployer DNSSEC et DANE
  53. Serveur dédié : installer PHP7 FPM avec FastCGI sous Debian
  54. Serveur dédié : optimiser la couche TCP
  55. Fail2Ban: protéger Postfix contre les attaques DoS de types AUTH, UNKNOWN et EHLO
  56. Serveur dédié : mettre à jour Apache pour HTTP/2
  57. Serveur dédié : ajouter le domaine à la liste HSTS preload
  58. Serveur dédié : ajouter l’authentification DMARC à Postfix et BIND
  59. Serveur dédié : à la recherche de l’inode perdue ou comment résoudre le problème “no space left on device”
  60. Serveur dédié : installer NginX avec support HTTP2 et certificat SSL, PHP, MariaDB sous Debian
Serveur dédié : passer WordPress en HTTPS (TLS/SSL) photo

Serveur dédié : passer WordPress en HTTPS (TLS/SSL)

Vous avez sauté le pas et avez validé votre nom de domaine avec un certificat TLS/SSL. Très bien ! Voyons comment passer WordPress sur la version sécurisée de votre site.

Il existe des plugins WordPress entièrement dédiés à SSL pour rediriger vers les pages sécurisées mais on peut très bien faire sans, avec un peu d’huile de coude.

Le tutoriel est pour Debian et WordPress tourne sous Apache chez moi. Cela prend moins d’une heure pour configurer l’essentiel mais il est probable que vous ayez des petites corrections (thèmes, plugins) pour que tout soit servi en https.

Le but est de tout (oui, absolument tout!) servir via la connexion sécurisée.

Etape 1 : configurer Apache

On édite notre fichier de configuration :

nano /etc/apache2/sites-available/www.skyminds.net

et voici ce que garde pour VirtualHost *:80 :

ServerName www.skyminds.net
ServerAlias skyminds.net
DocumentRoot /home/skyminds/public_html/
Redirect 301 / https://www.skyminds.net/

La directive ServerName est nécessaire. Ensuite, une simple redirection renvoie toutes les requêtes du port 80 vers le port 443, sécurisé. Même pas besoin de mod_rewrite!

Lire la suite

Sommaire de la série Monter un serveur dédié de A à Z

  1. Serveur dédié : installation d’Apache, PHP, MySQL et Webmin
  2. Serveur dédié : créer la base de données MySQL et importer WordPress
  3. Serveur dédié : créer et activer un Virtual Host sous Apache
  4. Serveur dédié : changer les DNS du nom de domaine et le faire pointer vers le serveur
  5. Serveur dédié : sécurisation des services avec iptables et fail2ban
  6. Serveur dédié : sécurisation de la couche TCP/IP
  7. Serveur dédié : création d’un serveur mail Postfix (sécurisé avec Saslauthd et certificat SSL) et Courier (accès POP et IMAP) utilisant une base MySQL d’utilisateurs/domaines virtuels
  8. Serveur dédié : sécuriser Apache 2 avec ModSecurity
  9. Serveur dédié : CHMOD récursif sur des fichiers ou répertoires en ligne de commande
  10. Serveur dédié : installer APC comme système de cache et configurer Varnish comme reverse-proxy pour Apache pour améliorer les performances
  11. Serveur dédié : afficher la véritable IP derrière un reverse-proxy comme Varnish
  12. Serveur dédié : intégrer SSH à WordPress pour mettre à jour le core, les plugins et les thèmes
  13. Serveur dédié : installer la dernière version d’APC par SVN
  14. Serveur dédié : analyse des performances du serveur
  15. Serveur dédié : mettre à jour le noyau Debian de la Kimsufi
  16. Serveur dédié : sauvegarde automatique des fichiers avec Backup Manager sur le serveur de sauvegarde OVH
  17. Serveur dédié : configurer la limite mémoire pour PHP et Suhosin
  18. Bash : supprimer tous les fichiers et sous-répertoires d’un répertoire
  19. Serveur dédié : impossible de se connecter à un port distant
  20. Rsync: rapatrier les fichiers du serveur à la maison
  21. Bash : réparer les tables MySQL en cas de crash
  22. Serveur dédié : création d’une seedbox avec Transmission
  23. Serveur dédié : des paquets LAMP à jour sous Debian
  24. Serveur dédié : mise à jour vers Debian 7 Wheezy
  25. Serveur dédié : activer X11 forwarding pour SSH
  26. Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim
  27. Postfix : résoudre l’erreur “fatal: www-data(33): message file too big”
  28. Serveur dédié : mise en place de l’IPv6
  29. WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod
  30. WordPress : héberger les images sur un sous-domaine
  31. Serveur dédié : ajouter l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim
  32. Apache : lorsque le domaine seul (sans WWW) renvoie une erreur 403
  33. Serveur dédié : sécuriser Apache avec HTTPS (HTTP avec la couche TLS/SSL) en Perfect Forward Secrecy
  34. Serveur dédié : passer WordPress en HTTPS (TLS/SSL)
  35. Serveur dédié : configurer Webmin en TLS avec un certificat SSL
  36. Serveur dédié : configurer Transmission pour accéder au WebUI via TLS-SSL
  37. Serveur dédié : installer et configurer Varnish 4
  38. Serveur dédié : passage au mod FastCGI et PHP-FPM avec Apache MPM Worker
  39. Récupérer un serveur Kimsufi après un plantage de kernel avec le mode rescue OVH
  40. Serveur dédié : configurer Postfix et Courier pour utiliser TLS-SSL en Perfect Forward Secrecy
  41. Serveur dédié : retirer Varnish, devenu inutile avec HTTPS
  42. Serveur dédié : installer la dernière version d’OpenSSL sous Debian
  43. Serveur dédié : activer l’IP canonique du serveur sous Apache
  44. Serveur dédié : mise à jour vers PHP 5.6
  45. MySQL : convertir les tables MyISAM au format InnoDB
  46. Serveur dédié : optimiser toutes les images GIF avec GIFsicle
  47. Serveur dédié : migration de MySQL vers MariaDB
  48. BASH : lister, bloquer et débloquer des adresses IP avec iptables
  49. Serveur dédié : produire une meilleure réserve d’entropie avec haveged
  50. Serveur dédié : mettre en place DNSSEC pour sécuriser les DNS du domaine
  51. Serveur dédié : mise en place du protocole DANE
  52. 8 règles d’or pour bien déployer DNSSEC et DANE
  53. Serveur dédié : installer PHP7 FPM avec FastCGI sous Debian
  54. Serveur dédié : optimiser la couche TCP
  55. Fail2Ban: protéger Postfix contre les attaques DoS de types AUTH, UNKNOWN et EHLO
  56. Serveur dédié : mettre à jour Apache pour HTTP/2
  57. Serveur dédié : ajouter le domaine à la liste HSTS preload
  58. Serveur dédié : ajouter l’authentification DMARC à Postfix et BIND
  59. Serveur dédié : à la recherche de l’inode perdue ou comment résoudre le problème “no space left on device”
  60. Serveur dédié : installer NginX avec support HTTP2 et certificat SSL, PHP, MariaDB sous Debian
WordPress : héberger les images sur un sous-domaine photo 1

WordPress : héberger les images sur un sous-domaine

Cela fait des années que je parle d’héberger les images du site sur un sous-domaine mais j’ai toujours remis cela à plus tard.

Je pensais que la configuration me prendrait un temps infini mais au final cela ne m’aura pris qu’un peu de réflexion et quelques minutes pour tout finaliser.

Le plus long aura été d’écrire ce tutoriel!

Aujourd’hui, c’est chose faite : les images des articles du site sont donc placées sur un sous-domaine pour des raisons de performances.

subdomains

Voici donc un petit tutoriel qui détaille toutes les étapes. Cela prend environ 20 minutes.

Principe de fonctionnement

Les fichiers du site sont présentement servis par Apache. Le domaine est skyminds.net et nous allons créer un sous-domaine, qui est en fait un répertoire au niveau de l’arborescence du site, qui contiendra toutes les images de nos articles.

Par défaut, WordPress place tous les fichiers uploadés via l’interface d’administration dans /wp-content/uploads.

Nous allons donc créer un sous-domaine (static.skyminds.net) qui pointera vers le répertoire /wp-content/uploads.

L’intérêt est que nous n’avons pas à copier ou à déplacer de fichiers. Cela permet aussi de revenir à une installation plus classique à tout moment, sans intervention majeure.

Une fois ce VirtualHost créé, il ne reste plus qu’à modifier les options de WordPress pour les futurs articles et changer les anciennes URI des images dans les anciens articles. P

our finir, nous redirigerons les anciennes URI vers les nouvelles via .htaccess.

Etape 1 : on crée le sous-domaine sur le serveur Apache

Commençons par créer un nouveau VirtualHost pour notre sous-domaine:

nano /etc/apache2/sites-available/static.skyminds.net

et ajoutons-y ceci :

ServerAdmin webmaster@localhost
DocumentRoot /home/skyminds/public_html/wp-content/uploads
ServerName static.skyminds.net
ErrorLog /var/log/apache2/www-error.log

        
          AllowOverride None
          RequestHeader unset Cookie
          Header unset Set-Cookie
          Options FollowSymLinks
          Order allow,deny
          Allow from all

Plusieurs choses sont importantes à noter dans ce fichier de configuration Apache:

  • DocumentRoot pointe vers le répertoire /home/skyminds/public_html/wp-content/uploads
  • on retire tous les cookies servis par static.skyminds.net

Pas de cookies, pas de soucis et un site qui gagne en rapidité !

Lire la suite

Sommaire de la série Monter un serveur dédié de A à Z

  1. Serveur dédié : installation d’Apache, PHP, MySQL et Webmin
  2. Serveur dédié : créer la base de données MySQL et importer WordPress
  3. Serveur dédié : créer et activer un Virtual Host sous Apache
  4. Serveur dédié : changer les DNS du nom de domaine et le faire pointer vers le serveur
  5. Serveur dédié : sécurisation des services avec iptables et fail2ban
  6. Serveur dédié : sécurisation de la couche TCP/IP
  7. Serveur dédié : création d’un serveur mail Postfix (sécurisé avec Saslauthd et certificat SSL) et Courier (accès POP et IMAP) utilisant une base MySQL d’utilisateurs/domaines virtuels
  8. Serveur dédié : sécuriser Apache 2 avec ModSecurity
  9. Serveur dédié : CHMOD récursif sur des fichiers ou répertoires en ligne de commande
  10. Serveur dédié : installer APC comme système de cache et configurer Varnish comme reverse-proxy pour Apache pour améliorer les performances
  11. Serveur dédié : afficher la véritable IP derrière un reverse-proxy comme Varnish
  12. Serveur dédié : intégrer SSH à WordPress pour mettre à jour le core, les plugins et les thèmes
  13. Serveur dédié : installer la dernière version d’APC par SVN
  14. Serveur dédié : analyse des performances du serveur
  15. Serveur dédié : mettre à jour le noyau Debian de la Kimsufi
  16. Serveur dédié : sauvegarde automatique des fichiers avec Backup Manager sur le serveur de sauvegarde OVH
  17. Serveur dédié : configurer la limite mémoire pour PHP et Suhosin
  18. Bash : supprimer tous les fichiers et sous-répertoires d’un répertoire
  19. Serveur dédié : impossible de se connecter à un port distant
  20. Rsync: rapatrier les fichiers du serveur à la maison
  21. Bash : réparer les tables MySQL en cas de crash
  22. Serveur dédié : création d’une seedbox avec Transmission
  23. Serveur dédié : des paquets LAMP à jour sous Debian
  24. Serveur dédié : mise à jour vers Debian 7 Wheezy
  25. Serveur dédié : activer X11 forwarding pour SSH
  26. Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim
  27. Postfix : résoudre l’erreur “fatal: www-data(33): message file too big”
  28. Serveur dédié : mise en place de l’IPv6
  29. WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod
  30. WordPress : héberger les images sur un sous-domaine
  31. Serveur dédié : ajouter l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim
  32. Apache : lorsque le domaine seul (sans WWW) renvoie une erreur 403
  33. Serveur dédié : sécuriser Apache avec HTTPS (HTTP avec la couche TLS/SSL) en Perfect Forward Secrecy
  34. Serveur dédié : passer WordPress en HTTPS (TLS/SSL)
  35. Serveur dédié : configurer Webmin en TLS avec un certificat SSL
  36. Serveur dédié : configurer Transmission pour accéder au WebUI via TLS-SSL
  37. Serveur dédié : installer et configurer Varnish 4
  38. Serveur dédié : passage au mod FastCGI et PHP-FPM avec Apache MPM Worker
  39. Récupérer un serveur Kimsufi après un plantage de kernel avec le mode rescue OVH
  40. Serveur dédié : configurer Postfix et Courier pour utiliser TLS-SSL en Perfect Forward Secrecy
  41. Serveur dédié : retirer Varnish, devenu inutile avec HTTPS
  42. Serveur dédié : installer la dernière version d’OpenSSL sous Debian
  43. Serveur dédié : activer l’IP canonique du serveur sous Apache
  44. Serveur dédié : mise à jour vers PHP 5.6
  45. MySQL : convertir les tables MyISAM au format InnoDB
  46. Serveur dédié : optimiser toutes les images GIF avec GIFsicle
  47. Serveur dédié : migration de MySQL vers MariaDB
  48. BASH : lister, bloquer et débloquer des adresses IP avec iptables
  49. Serveur dédié : produire une meilleure réserve d’entropie avec haveged
  50. Serveur dédié : mettre en place DNSSEC pour sécuriser les DNS du domaine
  51. Serveur dédié : mise en place du protocole DANE
  52. 8 règles d’or pour bien déployer DNSSEC et DANE
  53. Serveur dédié : installer PHP7 FPM avec FastCGI sous Debian
  54. Serveur dédié : optimiser la couche TCP
  55. Fail2Ban: protéger Postfix contre les attaques DoS de types AUTH, UNKNOWN et EHLO
  56. Serveur dédié : mettre à jour Apache pour HTTP/2
  57. Serveur dédié : ajouter le domaine à la liste HSTS preload
  58. Serveur dédié : ajouter l’authentification DMARC à Postfix et BIND
  59. Serveur dédié : à la recherche de l’inode perdue ou comment résoudre le problème “no space left on device”
  60. Serveur dédié : installer NginX avec support HTTP2 et certificat SSL, PHP, MariaDB sous Debian
403-error

Des images qui renvoient une erreur 403

Aujourd’hui, j’édite un ancien article et le prévisualise pour voir les changements : je m’aperçois alors que l’image de l’article ne s’affiche plus.

Ni une ni deux, je sors mon terminal et tente de récupérer l’image avec wget. Erreur 403. Je vérifie la configuration Apache et Varnish, rien à signaler (et surtout rien n’avait été modifié).

Je vérifie alors le fichier via FTP : il se trouve qu’il ne possédait pas les bons droits!

Evidemment, avec un chmod 600, cela ne risque pas de s’afficher… Les autres images, celles qui s’affichaient bien et renvoyaient un code 200, étaient bien chmodées en 644.

Solution : CHMOD

Il faut donc chmoder l’ensemble des fichiers du répertoires, 640 pour les images ce sera parfait :

find /home/public_html/wp-content/uploads -type f -exec chmod 640 {} \;

et pour les répertoires, 750 c’est correct :

find /home/public_html/wp-content/uploads -type d -exec chmod 750 {} \;

Notez la différence de syntaxe : on utilise f pour les fichiers (files) et d pour les répertoires (directory).

hourglass

Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim

Je classe volontairement cet article dans la série Serveur dédié, étant donné que nous allons utiliser la ligne de commande exclusivement. Si vous souhaitez faire la même chose sur votre machine personnelle, il vous suffit d’utiliser Trimage (qui en plus possède une GUI).

hourglass

Si vous possédez un site, blog ou une galerie d’images, il peut être très intéressant d’optimiser toutes vos images d’un seul coup et ce, de manière lossless : chargement plus rapide des pages et moindre consommation de bande passante.

Sous Linux, il existe plusieurs programmes pour le faire. Personnellement, j’ai choisi OptiPNG (pour optimiser les PNG) et JpegOptim (pour optimiser les JPG).

L’installation et la compression de vos répertoires d’images prend à peine quelques minutes.

Installation d’OptiPNG et JpegOptim

On installe nos deux paquets :

apt-get install jpegoptim optipng

et on RTFM :

man jpegoptim

et

man optipng

Optimisation des JPG

On navigue dans notre répertoire images et on fait une estimation des gains. Avant de commencer, vérifiez que vous avez la dernière version de jpegoptim et installez manuellement la dernière version des dépôts Sid.

Commençons par les JPG :

jpegoptim -n -t *.jpg

-n permet de simuler l’optimisation.
-t permet de calculer l’espace gagné

Résultat :

Average compression (2730 files): 0.95% (452k)

Cela peut sembler peu mais je compresse toutes mes images avant de les mettre sur le web. Visiblement, quelques unes sont passées au travers du filet !

Lire la suite

Sommaire de la série Monter un serveur dédié de A à Z

  1. Serveur dédié : installation d’Apache, PHP, MySQL et Webmin
  2. Serveur dédié : créer la base de données MySQL et importer WordPress
  3. Serveur dédié : créer et activer un Virtual Host sous Apache
  4. Serveur dédié : changer les DNS du nom de domaine et le faire pointer vers le serveur
  5. Serveur dédié : sécurisation des services avec iptables et fail2ban
  6. Serveur dédié : sécurisation de la couche TCP/IP
  7. Serveur dédié : création d’un serveur mail Postfix (sécurisé avec Saslauthd et certificat SSL) et Courier (accès POP et IMAP) utilisant une base MySQL d’utilisateurs/domaines virtuels
  8. Serveur dédié : sécuriser Apache 2 avec ModSecurity
  9. Serveur dédié : CHMOD récursif sur des fichiers ou répertoires en ligne de commande
  10. Serveur dédié : installer APC comme système de cache et configurer Varnish comme reverse-proxy pour Apache pour améliorer les performances
  11. Serveur dédié : afficher la véritable IP derrière un reverse-proxy comme Varnish
  12. Serveur dédié : intégrer SSH à WordPress pour mettre à jour le core, les plugins et les thèmes
  13. Serveur dédié : installer la dernière version d’APC par SVN
  14. Serveur dédié : analyse des performances du serveur
  15. Serveur dédié : mettre à jour le noyau Debian de la Kimsufi
  16. Serveur dédié : sauvegarde automatique des fichiers avec Backup Manager sur le serveur de sauvegarde OVH
  17. Serveur dédié : configurer la limite mémoire pour PHP et Suhosin
  18. Bash : supprimer tous les fichiers et sous-répertoires d’un répertoire
  19. Serveur dédié : impossible de se connecter à un port distant
  20. Rsync: rapatrier les fichiers du serveur à la maison
  21. Bash : réparer les tables MySQL en cas de crash
  22. Serveur dédié : création d’une seedbox avec Transmission
  23. Serveur dédié : des paquets LAMP à jour sous Debian
  24. Serveur dédié : mise à jour vers Debian 7 Wheezy
  25. Serveur dédié : activer X11 forwarding pour SSH
  26. Serveur dédié : optimiser toutes les images JPG et PNG avec OptiPNG et JpegOptim
  27. Postfix : résoudre l’erreur “fatal: www-data(33): message file too big”
  28. Serveur dédié : mise en place de l’IPv6
  29. WordPress : accorder les bonnes permissions aux fichiers et dossiers avec chown et chmod
  30. WordPress : héberger les images sur un sous-domaine
  31. Serveur dédié : ajouter l’authentification SPF, Sender-ID et DKIM à Postfix et Bind9 avec opendkim
  32. Apache : lorsque le domaine seul (sans WWW) renvoie une erreur 403
  33. Serveur dédié : sécuriser Apache avec HTTPS (HTTP avec la couche TLS/SSL) en Perfect Forward Secrecy
  34. Serveur dédié : passer WordPress en HTTPS (TLS/SSL)
  35. Serveur dédié : configurer Webmin en TLS avec un certificat SSL
  36. Serveur dédié : configurer Transmission pour accéder au WebUI via TLS-SSL
  37. Serveur dédié : installer et configurer Varnish 4
  38. Serveur dédié : passage au mod FastCGI et PHP-FPM avec Apache MPM Worker
  39. Récupérer un serveur Kimsufi après un plantage de kernel avec le mode rescue OVH
  40. Serveur dédié : configurer Postfix et Courier pour utiliser TLS-SSL en Perfect Forward Secrecy
  41. Serveur dédié : retirer Varnish, devenu inutile avec HTTPS
  42. Serveur dédié : installer la dernière version d’OpenSSL sous Debian
  43. Serveur dédié : activer l’IP canonique du serveur sous Apache
  44. Serveur dédié : mise à jour vers PHP 5.6
  45. MySQL : convertir les tables MyISAM au format InnoDB
  46. Serveur dédié : optimiser toutes les images GIF avec GIFsicle
  47. Serveur dédié : migration de MySQL vers MariaDB
  48. BASH : lister, bloquer et débloquer des adresses IP avec iptables
  49. Serveur dédié : produire une meilleure réserve d’entropie avec haveged
  50. Serveur dédié : mettre en place DNSSEC pour sécuriser les DNS du domaine
  51. Serveur dédié : mise en place du protocole DANE
  52. 8 règles d’or pour bien déployer DNSSEC et DANE
  53. Serveur dédié : installer PHP7 FPM avec FastCGI sous Debian
  54. Serveur dédié : optimiser la couche TCP
  55. Fail2Ban: protéger Postfix contre les attaques DoS de types AUTH, UNKNOWN et EHLO
  56. Serveur dédié : mettre à jour Apache pour HTTP/2
  57. Serveur dédié : ajouter le domaine à la liste HSTS preload
  58. Serveur dédié : ajouter l’authentification DMARC à Postfix et BIND
  59. Serveur dédié : à la recherche de l’inode perdue ou comment résoudre le problème “no space left on device”
  60. Serveur dédié : installer NginX avec support HTTP2 et certificat SSL, PHP, MariaDB sous Debian
WordPress : des images qui ont perdu leur chemin photo

WordPress : des images qui ont perdu leur chemin

Problème : chemin erroné pour certaines images

lost-sign En allant faire un tour sur Google Webmaster Tools, je me suis aperçu qu’il y a avait des erreurs sur la page Si je pouvais (vraiment) choisir ma voiture… et effectivement, les images ne s’affichaient pas!

Après vérification, il se trouve que le chemin des images était totalement inexistant : c’était un mélange d’URL publique et de chemin privé, donc aucun moyen que les images d’affichent comme il faut avec le chemin privé. Et bien sûr, on ne peut pas éditer le chemin des fichiers depuis WordPress.

Solution : MySQL

En faisant une petite requête sur la table postmeta, je me suis aperçu que ce n’était pas le seul article touché. J’ai donc purement et simplement supprimé le chemin privé dans la table, via une requête SQL :

Query:

UPDATE wp_postmeta SET meta_value = replace(meta_value, '/home/public_html/images/', '') WHERE meta_key='_wp_attached_file';

Résultat : 173 rows affected.

Ah oui quand même, 173 enregistrements affectés, cela fait quand même quelques dizaines d’articles sur lesquels les images ne s’affichaient pas. Je n’ai aucune explication à ce phénomène, d’autant que certains de ces articles ont plusieurs années. Sûrement une mauvaise configuration de ma part à un moment donné, je suppose.

Enfin, tout cela pour dire que garder un oeil sur GWT, cela peut être utile pour débugger aussi.

Une carte visuelle et sémantique de la langue anglaise photo

Langue anglaise : carte visuelle et sémantique

Un groupe de chercheurs du Massachusetts Institute of Technology (MIT) et de la New York University (NYU) ont créé une carte interactive de la langue anglaise en utilisant plus de 7,5 millions d’images trouvées sur internet.

Ces images sont triées selon les relations sémantiques entre les mot et, selon les chercheurs, ce projet explore “la relation entre les similarités visuelles et sémantiques”.

Voici ce que cela donne au final :

Chaque pixel de l’image est relatif à un des 53 464 noms communs et représente environ 140 images, donnant les caractéristiques visuelles de chaque mot : cela peut être une image précise, un résumé, une définition. La liste des noms vient de Wordnet.

C’est assez génial je trouve : essayez la carte.

Ubuntu : compression d'images JPG et PNG avec Trimage Image Compressor photo 1

Ubuntu : compression d’images JPG et PNG avec Trimage Image Compressor

trimage icon

Il y a quelques semaines, je vous ai parlé du plugin GIMP “Enregistrer pour le Web” qui permet d’obtenir le meilleur ratio qualité/poids pour vos images.

Et bien sachez qu’il existe une petite application qui permet d’automatiser la compression d’images JPEG et PNG sans perte de qualité et en un seul clic : Trimage Image Compressor, qui utilise optipng, advpng et jpegoptim, suivant le type du fichier.

Installation

L’installation est très simple, il suffit d’ajouter le dépôt PPA de l’application et de lancer l’installation :

sudo add-apt-repository ppa:kilian/trimage
sudo apt-get update && sudo apt-get install trimage

Lire la suite

CSS : définir la taille d'un champ texte photo

CSS : afficher correctement une image en arrière-plan

Il m’est arrivé plusieurs fois de ne pas pouvoir afficher une image en arrière-plan (background image) en CSS et cela tout simplement parce que le code CSS doit être écrit dans un certain ordre, notamment lorsque l’on utilise la syntaxe courte.

Solution : du code CSS ordonné

Alors voilà : imaginons que nous voulons créer une DIV ayant pour identifiant “banner”. Nous voulons que cette DIV affiche l’image background.png.

Il faut commencer par mettre l’URL de l’image entre guillements puis la position horizontale, ensuite la position verticale et enfin la répétition de l’image ou non.

Exemple en utilisant la propriété background (short-hand syntax) :

#banner {
  background:url("background.png") center top no-repeat;
}

Lire la suite