Beeldoptimalisatie voor de site: batchverwerking met behulp van jpegtran | optipng | PNGOUT

  1. vereisten
  2. We gebruiken aanbevelingen voor afbeeldingen
  3. Archiefstructuur
  4. Korte instructies voor werk
  5. supplementen
  6. x64 (aka andi)

Site zonder afbeeldingen - een anachronisme. Zoveel mensen denken, en het is niet verstoken van gezond verstand. Weet je nog, hoe lang ben je al voor de laatste keer op de site en hoe lang ben je al bezig?

Tekstgegevens zijn veel kleiner dan de afbeelding. Maar van mensen is bekend dat zij van hun ogen houden. Daarom zullen de foto's een onbetwistbaar voordeel van het verhaal zijn.

In het algemeen spreken we over de tekst, we bedoelen zowel de inhoud als een handige visuele presentatie, inclusief alinea's, lijsten, citaten, tabellen. Dit is echter niet voldoende en zelfs nieuwssites proberen afbeeldingen van journalisten te leveren.

Dit is echter niet voldoende en zelfs nieuwssites proberen afbeeldingen van journalisten te leveren

Laten we beginnen met de veronderstelling dat afbeeldingen nodig zijn. Dit kunnen foto's zijn, diagrammen, gewoon foto's toelichten.

Lang geleden, toen Poetin niet eeuwig leek, heb ik mijn eerste medische webportal gemaakt. Het was nodig om foto's in de atlas te plaatsen. Het is duidelijk dat het vrij moeilijk is om de anatomische structuur van het lichaam zonder afbeeldingen voor te stellen, en des te meer om met woorden te beschrijven. En zonder verder oponthoud, heb ik foto's geüpload naar bmp (ongecomprimeerd formaat). Moet ik zeggen dat ze het deeg wogen? Bovendien wisten sommige browsers niet hoe ze dergelijke afbeeldingen moesten tonen.

Dus waarom afbeeldingen optimaliseren? Een eenvoudig voorbeeld is een foto. Moderne telefoons hebben camera's in 8, 12 en zelfs meer megapixels. 12 MP komt overeen met een afbeelding van 4000 × 3000 pixels. Afhankelijk van de complexiteit van de scène komt dit overeen met een grootte van 2-5 megabytes, en zelfs meer. Een dozijn foto's - en de paginagrootte zwelt veel op. De afbeelding past in het inhoudsgebied, wat betekent dat de browser eerst alles moet downloaden, schalen en alleen dan weergeven. Voor de zwakken processors of met een kleine hoeveelheid RAM - een ramp.

Stel je nu voor dat de gebruiker de site vanaf de telefoon bekijkt. In dit geval kan het laden van de pagina eenvoudigweg niet wachten. Dus, de foto's moeten vooraf worden gereduceerd.

Iemand zal beweren dat het geen zin heeft, moderne CMS maakt automatisch miniaturen bij het downloaden van afbeeldingen. Maar heeft iedereen zijn sites op VPS of VIP-tarieven? Het downloaden van een 12 MP-afbeelding kan uitkomen, maar om deze te verwerken, moet PHP 35+ megabytes (in feite meer) voor opslag toewijzen en weet dan nog steeds hoeveel een kleinere kopie moet maken. Goedkope tarieven duiken onmiddellijk in het overschot aan middelen. Een goede hoster zal de gebruiker vragen dit niet meer te doen, een slechte host zal het negeren, omdat alleen geld belangrijk voor hem is en niet de prestaties van services.

En dus hebben we besloten om correct te handelen. We verkleinen de afbeeldingen voorlopig en uploaden ze vervolgens naar de site. Dus de motor is eenvoudiger en mensen. Is alles Niet echt.

Veel editors bewaren de originele brokken (meta-informatie, niet-afbeelding delen van het bestand) met aanvullende informatie. Als u bijvoorbeeld een foto van iets op de telefoon maakt, het bestand naar de computer overbrengt, erop klikt met de juiste toets en "Eigenschappen → Details" selecteert, ziet u de gegevens op het apparaat: welke camera u hebt gefotografeerd, sluitertijd, ISO enzovoort. Voor de gebruiker is deze informatie nutteloos, dus u kunt er vanaf.

Wel, denk er eens over na, één brok. Wat is er, een hoop informatie die bevat is? Stel je voor. Soms krijg je afbeeldingen waarin honderden kilobytes van dergelijke gegevens staan. Alleen vandaag stuurden ze een logo van 584 KB ter grootte van een adres. Tegelijkertijd was nuttige informatie slechts 14 KB! Wat mij betreft, het is niet helemaal correct om de bezoeker te dwingen 570 KB van boven te downloaden.

Laten we de subtotalen samenvatten. Om ervoor te zorgen dat gebruikers van de site het goed doen, moet u:

  1. Verklein de afbeelding. Om een ​​grafische editor te helpen.
  2. Het weggooien van de bestandsdelen is niet nodig. In feite heeft de gebruiker alleen een foto nodig.
  3. Probeer de grootte van de afbeelding verder te verkleinen.

De eerste paragraaf bevat individueel werk voor elk bestand. Het is tijdrovend, maar het levert het beste resultaat op. We openen elk bestand, knippen, verkleinen, en opslaan met acceptabele kwaliteit.

Maar paragrafen 2 en 3 kunnen worden overgeleverd aan speciale programma's. Software voor het werken met afbeeldingen ingesteld. Google beveelt de volgende programma's aan:

  • jpegtran voor jpg afbeelding formaat.
  • optipng en pngout voor PNG-afbeeldingen.

Een klein beetje over pagina 3. Grafische editors doen er meestal geen moeite mee. Ze slaan simpelweg het beeld op en kiezen van te voren afgesproken compressiealgoritmen met dezelfde instellingen, kwantisatiecoëfficiënten en andere dingen. Bovendien brengen veel mensen de beschikbare meta-informatie eerlijk over en voegen ze hun eigen toe, waardoor de bestandsgrootte verder wordt vergroot.

vereisten

Een jaar geleden begonnen ze massaal over de dienst te praten. PageSpeed ​​Insights van google. In feite zijn dit aanbevelingen van de zoekgigant over "hoe het goed te doen". Typ gewoon het adres van de site en ontvang een lijst met suggesties voor optimalisatie. Daar kunt u ook al geoptimaliseerde bronnen downloaden, inclusief afbeeldingen, voor uw site. Toegegeven, dit is alleen relevant voor de gecontroleerde pagina.

Als je een website hebt, kijk dan zeker dit artikel . Vooral handig voor mensen die WordPress gebruiken.

We gebruiken aanbevelingen voor afbeeldingen

Het lijkt eenvoudig: download de programma's die door Google zijn gespecificeerd en voer alle bestanden op de server via deze uit. Het probleem is dat deze hulpprogramma's console zijn. Ze nemen slechts 1 bestand tegelijk. Maar we zijn niet tevergeefs binnen laatste artikel nam de tijd om batch-bestanden, toch?

Informatie uit het artikel is vrij genoeg om massaal je eigen file-handler te maken, dus ik zal niet schilderen waar dat is. Ik stel alleen voor om de ready-assembly te downloaden, die ik zelf gebruik.

Archief downloaden (212 KB)

Archiefstructuur

Het archief bevat een map [ OptimizeImg ]. Om te beginnen, pak het ergens uit. Ik heb het gevonden in c: \ temp \ maar het maakt niet uit. Het belangrijkste is dat het pad geen uitroeptekens bevat.

Next. Deze map bevat de subdirectory [ uploads ]. Hier moet je bestanden plaatsen die moeten worden verwerkt. Het beste deel is dat je op zijn minst de map / bestandsstructuur kunt pushen.

Er zijn nog 3 programma's: jpegtran.exe | optipng.exe | pngout.exe is het hulpprogramma dat door Google wordt aanbevolen. Gedownload van de corresponderende officiële sites / repositories. Als u twijfelt of gewoon wilt upgraden, downloadt u van een vertrouwde bron en vervangt u bestaande.

En tot slot, het hart van tulza. Batnichki:

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

Het eerste bestand, 1.bat, reconstrueert de structuur van [uploads]. Er worden 3 extra mappen gemaakt: [jpg_jpegtran] [png_optipng] [png_pngout] met verwerkte geminimaliseerde bestanden van hun type (jpg - alleen * .jpg-bestanden, hetzelfde met png).

3.bat lanceert sequentieel drie batchbestanden voor uitvoering:

  • 3-go.bat is bijna hetzelfde als 1.bat. Sla jpg / png-bestanden over via minimizers. Het resultaat van het werk is 3 mappen (zie hierboven) met de bijbehorende afbeeldingen.
  • 3-opti-to-out.bat maakt de map [png_optipng-naar-pngout] waarin de bestanden die door optipng + pngout zijn verwerkt, worden geschreven (precies in deze volgorde).
  • 3-out-naar-opti.bat maakt een [png_pngout-naar-optipng] -map waarin bestanden worden verwerkt die door pngout + optipng zijn verwerkt. Vergelijkbaar met de vorige, alleen in een andere volgorde.

In principe is alleen 1.bat voldoende voor onze behoeften. 3x- zakken verschenen als resultaat van onderzoek en fouten in de vorige versie van het batchbestand. Het gebeurde zo dat tijdens de fout de bestanden voor pngout uit de optipng-map werden gehaald. En wat was mijn verrassing toen de lancering van de oude versie 1,5 keer kleiner was dan in het bijgewerkte batchbestand. Als gevolg hiervan bleek dat dubbele verwerking foto's goed kan 'inhalen'. Maar het kost bijna 2 keer meer tijd. Dus beslis zelf of het nodig is.

Korte instructies voor werk

  1. Archief downloaden .
  2. Pak het uit.
  3. Ga naar de zojuist geopende map [OptimizeImg].
  4. Alle bestanden die stinging nodig hebben, kopieer de map [upload].
  5. Voer 1.bat uit en wacht. Als er veel bestanden zijn en deze zijn png, wacht dan lang.
  6. Wanneer een bericht in het zwarte venster verschijnt over de noodzaak om op een toets te drukken om door te gaan, is alles klaar. Het blijft nodig om de inhoud van de gemaakte mappen te nemen en naar de hosting te kopiëren via FTP, waarbij oude bestanden worden overschreven.

Voor een voorbeeld. Laat je een blog hebben over WordPress. Alle afbeeldingen worden opgeslagen in [ / wp-content / uploads / ]. Ga naar de sitemap (via ftp), ga naar [ wp-content ] en kopieer eenvoudigweg [ uploads ] naar de OptimizeImg-map met dezelfde naam. Voer 1.bat uit en wacht. Nadat het werk is voltooid, wordt de inhoud [jpg_jpegtran] (we gaan daar!) Geüpload naar de server. Aanvragen voor bestaande bestanden worden beantwoord door overschrijven. Een vergelijkbare truc voor png, maar eerst kijken we naar welke map - [png_optipng] of [png_pngout] - minder ruimte in beslag neemt, volstaat met de inhoud ervan.

Wees niet bang om andere bestanden te beschadigen. Batniki werkt alleen met jpg / png en alleen de afbeeldingen van deze typen worden naar de nieuw gemaakte mappen geschreven.

Ik hoop dat iemand nuttig zal zijn. Good luck!

supplementen

  1. Het pad naar [OptimizeImg] mag geen uitroeptekens bevatten ! en procent %
  2. Scripts uitvoeren als beheerder is niet nodig. Bovendien werken ze in dit geval mogelijk niet!
  3. ...

auteurs

niet online 13 uur

x64 (aka andi)

Toelichting: 2846 Publicaties: 395 Registratie: 02-04-2009

Weet je nog, hoe lang ben je al voor de laatste keer op de site en hoe lang ben je al bezig?
Moet ik zeggen dat ze het deeg wogen?
Dus waarom afbeeldingen optimaliseren?
Maar heeft iedereen zijn sites op VPS of VIP-tarieven?
Wat is er, een hoop informatie die bevat is?