Optimisation de l'image du site: traitement par lots avec jpegtran | optipng | trou noir

1. Prérequis
2. Nous utilisons des recommandations pour les images
3. Structure d'archive
4. Brèves instructions pour le travail
5. Ajouts

Site sans images - un anachronisme. Tant de gens pensent, et ce n’est pas dépourvu de bon sens. Rappelez-vous, depuis combien de temps utilisez-vous le site pour la dernière fois et depuis combien de temps l'utilisez-vous?

Les données texte sont beaucoup plus petites que l'image. Mais les gens sont connus pour aimer leurs yeux. Par conséquent, les images seront un avantage indéniable de l'histoire.

En général, lorsque nous parlons de texte, nous entendons à la fois son contenu et une présentation visuelle commode, notamment des paragraphes, des listes, des citations et des tableaux. Cependant, cela ne suffit pas, et même les sites d'informations essaient de fournir des images de journalistes.

Commençons par l'hypothèse que les images sont nécessaires. Celles-ci peuvent être des photos, des schémas, expliquant simplement des images.

Il y a longtemps, lorsque Poutine ne semblait pas éternel, j'ai créé mon premier portail Web médical. Il était nécessaire de placer des images sur l'atlas. Il est évident qu’il est assez difficile d’imaginer la structure anatomique du corps sans images, et a fortiori de la décrire avec des mots. Et sans plus tarder, j'ai téléchargé des photos au format bmp (format non compressé). Dois-je dire qu'ils ont pesé la pâte? De plus, certains navigateurs ne savaient pas comment afficher de telles images.

Alors, pourquoi optimiser les images? Un exemple simple est une photo. Les téléphones modernes ont des appareils photo de 8, 12 et même davantage de mégapixels. 12 MP correspond à une image de 4000 × 3000 pixels. En fonction de la complexité de la scène, cela correspond à une taille de 2 à 5 Mo, voire plus. Une douzaine de photos - et la taille de la page grossit beaucoup. L'image s'insère dans la zone de contenu, ce qui signifie que le navigateur doit tout télécharger, tout redimensionner et ensuite seulement l'afficher. Pour les faibles processeurs ou avec une petite quantité de RAM - un désastre.

Imaginez maintenant que l'utilisateur regarde le site à partir du téléphone. Dans ce cas, le chargement de la page ne peut tout simplement pas attendre. Donc, les images doivent être pré-réduites.

Quelqu'un dira que cela ne sert à rien, un CMS moderne crée automatiquement des vignettes lors du téléchargement d'images. Mais est-ce que tout le monde a son site sur les tarifs VPS ou VIP? Télécharger une image de 12 MP peut sortir, mais pour la traiter, PHP devra allouer plus de 35 mégaoctets (en théorie, en fait plus) au stockage, et sait toujours combien de choses il faut pour créer une copie plus petite. Les tarifs bon marché plongent immédiatement dans l'excès de ressources. Un bon hébergeur demandera à l'utilisateur de ne plus le faire, un mauvais l'ignorera, car seul l'argent lui importe, et non la performance des services.

Et donc, nous avons décidé d'agir correctement. Nous réduisons au préalable les images, puis nous les transférons sur le site. Donc, le moteur est plus facile, et les gens. Est tout Pas vraiment.

De nombreux éditeurs conservent les fragments d'origine (méta-informations, parties non-image du fichier) contenant des informations supplémentaires. Par exemple, si vous prenez une photo de quelque chose sur le téléphone, transférez le fichier sur l'ordinateur, cliquez dessus avec le bouton droit de la souris et sélectionnez «Propriétés → Détails» pour afficher les données sur l'appareil: l'appareil photo que vous avez photographié, la vitesse d'obturation, l'ISO, etc. Pour l'utilisateur, cette information est inutile, vous pouvez donc vous en débarrasser.

Eh bien, réfléchis-y, un morceau. Qu'y a-t-il, un tas d'informations qui sont contenues? Imagine. Parfois, vous obtenez des images contenant des centaines de kilo-octets de ces données. Aujourd'hui encore, ils ont envoyé un logo de 584 Ko pour répondre aux besoins. Dans le même temps, l'information utile n'était que de 14 Ko! Quant à moi, il n’est pas tout à fait correct de forcer le visiteur à télécharger 570 ko d’en haut.

Résumons les sous-totaux. Pour que les utilisateurs du site se débrouillent bien, vous devez:

1. Réduisez la taille de l'image. Pour aider n'importe quel éditeur graphique.
2. Jeter les parties du fichier sont inutiles. En fait, l'utilisateur n'a besoin que d'une image.
3. Essayez de réduire davantage la taille de l'image.

Le premier paragraphe implique un travail individuel sur chaque fichier. Cela prend du temps mais apporte le meilleur résultat. Nous ouvrons chaque fichier, coupons, réduisons, puis sauvegardons avec une qualité acceptable.

Mais les paragraphes 2 et 3 peuvent être mis à la merci de programmes spéciaux. Logiciel pour travailler avec le jeu d'images. Google recommande les programmes suivants:

• jpegtran pour le format d'image jpg.
• optipng et pngout pour les images PNG.

Quelques mots sur la page 3. Les éditeurs graphiques ne s'en préoccupent généralement pas. Ils sauvegardent simplement l'image en choisissant à l'avance des algorithmes de compression avec les mêmes paramètres, les mêmes coefficients de quantification et autres. En outre, beaucoup transfèrent honnêtement les méta-informations disponibles et ajoutent les leurs, augmentant ainsi la taille du fichier.

Prérequis

Il y a un an, parlant massivement du service PageSpeed ​​Insights de google. En fait, ce sont des recommandations du géant de la recherche sur «comment bien faire». Il suffit de taper l'adresse du site et d'obtenir une liste de suggestions pour l'optimisation. Là, vous pouvez également télécharger des ressources déjà optimisées, y compris des images, pour votre site. Certes, cela ne concerne que la page cochée.

Si vous avez un site Web, assurez-vous de regarder cet article . Particulièrement utile pour ceux qui utilisent WordPress.

Nous utilisons des recommandations pour les images

Cela semble simple: téléchargez les programmes spécifiés par Google et exécutez tous les fichiers du serveur à travers eux. Le problème est que ces utilitaires sont en console. Ils ne prennent qu'un fichier à la fois. Mais nous ne sommes pas en vain dans dernier article a pris le temps de regrouper les fichiers, non?

Les informations de l'article suffisent amplement à la création en masse de votre propre gestionnaire de fichiers. Je ne peindrai donc pas à la place. Je propose juste de télécharger l’assemblée prête que je m’utilise moi-même.

Télécharger une archive (212 KB)

Structure d'archive

L'archive contient un dossier [ OptimizeImg ]. Pour commencer, décompressez-le quelque part. Je le trouve dans c: \ temp \ mais ce n’est pas grave. L'essentiel est que le chemin ne contienne pas de points d'exclamation.

Suivant Ce dossier contient le sous-répertoire [ uploads ]. Ici, vous devez mettre des fichiers qui nécessitent un traitement. La meilleure partie est que vous pouvez au moins pousser la structure du dossier / fichier.

Il y a 3 autres programmes: jpegtran.exe | optipng.exe | pngout.exe est l'utilitaire même recommandé par Google. Téléchargé à partir des sites / référentiels officiels correspondants. En cas de doute ou si vous souhaitez simplement effectuer une mise à niveau, téléchargez-le à partir d'une source fiable et remplacez les sources existantes.

Et enfin, le coeur de tulza. Batnichki:

• 1.bat
• 3.bat
• 3-go.bat
• 3-opti-to-out.bat
• 3-out-to-opti.bat

Le premier fichier, 1.bat, recrée la structure à partir de [uploads]. 3 dossiers supplémentaires sont créés: [jpg_jpegtran] [png_optipng] [png_pngout] avec les fichiers minimisés traités de leur type (jpg - uniquement les fichiers * .jpg, de même que png).

3.bat lance séquentiellement trois fichiers de commandes à exécuter:

• 3-go.bat est presque identique à 1.bat. Ignorer les fichiers jpg / png via les minimiseurs. Le résultat du travail sera 3 dossiers (voir ci-dessus) avec les images correspondantes.
• 3-opti-to-out.bat crée le dossier [png_optipng-to-pngout] dans lequel les fichiers traités par optipng + pngout sont écrits (exactement dans cet ordre).
• 3-out-to-opti.bat crée un dossier [png_pngout-to-optipng] dans lequel sont écrits les fichiers traités par pngout + optipng. Semblable à la précédente, mais dans un ordre différent.

En principe, seulement 1.bat suffit à nos besoins. 3 sacs sont apparus à la suite de recherches et d'erreurs dans la version précédente du fichier de traitement par lots. Il se trouve que pendant l’erreur, les fichiers de pngout ont été extraits du répertoire optipng. Et quelle fut ma surprise lorsque le lancement de l'ancienne version donnait une taille deux fois et demie inférieure à celle du fichier batch mis à jour. En conséquence, il est apparu que le double traitement pouvait bien «rattraper» les images. Mais cela prend presque 2 fois plus de temps. Alors décidez vous-même si c'est nécessaire.

Brèves instructions pour le travail

1. Télécharger l'archive .
2. Déballez-le.
3. Accédez au dossier [OptimizeImg] récemment ouvert.
4. Tous les fichiers nécessitant une piqûre, copiez le dossier [upload].
5. Exécutez 1.bat et attendez. S'il y a beaucoup de fichiers et qu'ils sont en png, attendez longtemps.
6. Lorsqu'un message apparaît dans la fenêtre noire indiquant la nécessité d'appuyer sur une touche pour continuer, tout est prêt. Il reste à prendre le contenu des dossiers créés et à le copier sur l’hébergement via FTP, en écrasant les anciens fichiers.

Pour un exemple. Laissez-vous un blog sur WordPress. Toutes les images sont stockées dans [ / wp-content / uploads / ]. Allez dans le dossier du site (via ftp), allez dans [ wp-content ] et copiez simplement [ uploads ] dans le dossier OptimizeImg du même nom. Exécutez 1.bat et attendez. Une fois le travail terminé, le contenu [jpg_jpegtran] (nous y allons!) Est chargé sur le serveur. Les demandes de fichiers existants sont traitées par écrasement. Une astuce similaire pour png, mais examinons d’abord quel dossier - [png_optipng] ou [png_pngout] - occupe moins d’espace, remplissez-le de son contenu.

N'ayez pas peur d'endommager les autres fichiers. Batniki ne fonctionne qu'avec jpg / png, et seules les images de ces types sont écrites dans les dossiers nouvellement créés.

J'espère que quelqu'un sera utile. Des succès!

Ajouts

1. Le chemin d'accès à [OptimizeImg] ne doit pas contenir de points d'exclamation ! et pourcentage %
2. L'exécution de scripts en tant qu'administrateur n'est pas nécessaire. De plus, dans ce cas, ils peuvent ne pas fonctionner!
3. ...

Éditeur

pas en ligne 13 heures

x64 (aka andi)