Optimalisatie en compressie van png en jpg, jpeg zonder kwaliteitsverlies. Beeldoptimalisatie als belangrijk onderdeel van het CRO-proces

Beeldoptimalisatie is een belangrijk onderdeel van websitepromotie. Goed geoptimaliseerde afbeeldingen dragen bij aan een hogere positie van de bron in de zoekresultaten en versnellen de laadsnelheid van de inhoud. Wat is beeldoptimalisatie en hoe wordt het uitgevoerd?

Beeldoptimalisatie is het proces van het verkleinen van afbeeldingen die worden gebruikt in website-ontwerp en artikelen zonder kwaliteitsverlies.

Voordat we beginnen met het "comprimeren" van afbeeldingen, evalueren we de snelheid van het laden van webpagina's en begrijpen we welke indicatoren ons ervan weerhouden de resultaten te verbeteren. De dienst PageSpeed ​​Insights helpt hierbij. Als de pagina meer dan 85 van de 100 punten scoort, is dit: goed resultaat En dat is het aantal waar je naar moet streven.

Het resultaat is nu bijvoorbeeld:

En na optimalisatie:

Dit resultaat werd mogelijk gemaakt dankzij de aanbevelingen van Google:

PNG-indeling

Hoe afbeeldingen optimaliseren als PNG-indeling wordt gebruikt om ze op te slaan? Om dit te doen, kunt u de aanbevelingen van Google gebruiken:

Als alleen elementaire beeldoptimalisatie is gepland, kunt u elk beeldbewerkingsprogramma gebruiken: GIMP, Photoshop, enz. Maar welke is beter? Een klein experiment zal je helpen erachter te komen. We nemen het niet-geoptimaliseerde beeld in PNG-indeling met een gewicht van 293 KB:

Maak twee mappen aan: "GIMP" en "Photoshop" en plaats daar dezelfde afbeelding in.

Hoe wordt een afbeelding gecomprimeerd zonder kwaliteitsverlies met behulp van de GIMP- en Photoshop-editors?

Het resultaat is als volgt:

Kortom: Photoshop heeft de afbeelding beter geoptimaliseerd dan GIMP.

Dit betekent echter niet dat alleen deze opties kunnen worden gebruikt. Er zijn andere even effectieve hulpprogramma's voor het comprimeren van PNG-afbeeldingen. Bijvoorbeeld, en PNGOUT . Het resultaat van hun werk is het volgende:

Ondanks dat OptiPNG 1 KB kwijt is aan Photoshop, weegt het programma zelf slechts 96 KB, en dat is een groot pluspunt. Maar PNGOUT overtrof zijn "concurrenten" in alle opzichten:

Werken met programma's

Allereerst moet u het hulpprogramma OptiPNG of PNGOUT (of misschien beide) downloaden van de officiële sites. Kopieer vervolgens de .exe-bestanden naar de map: C:\Windows.

Om de taak te "vereenvoudigen", kopieert u deze bestanden gewoon uit de Windows-map en plaatst u hun snelkoppelingen op het bureaublad. Voor het gemak kan de OptiPNG-snelkoppeling onmiddellijk opting-o7 worden genoemd (parameter maximale compressie met behoud van kwaliteit). Het blijft gewoon om de gewenste foto's naar de snelkoppeling over te brengen en te wachten tot het programma ze optimaliseert.

Deze methode is eenvoudig, maar niet erg handig. Soms, wanneer u probeert een groot aantal afbeeldingen te optimaliseren, kan er een fout "opduiken". Ook zal niet iedereen het leuk vinden om constant bestanden te slepen en neer te zetten.

Daarom is er nog een andere optie om met hulpprogramma's te werken. We maken een testdocument, openen het en schrijven daar de code (werkt alleen correct op Windows OS):

We slaan het bestand op in .reg-indeling en in ANSI-codering, voeren het uit, stemmen in met alle acties en u bent klaar. De hulpprogramma's zijn geïntegreerd in de Windows-shell.

Hoe worden afbeeldingen geoptimaliseerd? Het proces gaat als volgt: klik met de rechtermuisknop op de map die niet-geoptimaliseerde afbeeldingen in PNG-indeling bevat (het hulpprogramma verandert geen bestanden van een andere extensie) en selecteer het programma waarmee we de afbeeldingen gaan comprimeren. U kunt dit om de beurt doen met twee hulpprogramma's.

Vervolgens wordt de opdrachtregel geopend, die het optimalisatieproces demonstreert:

JPEG-formaat

Om een ​​JPEG-afbeelding te comprimeren, hebt u de tools Jpegtran of Jpegoptim nodig. Natuurlijk kunt u gebruik maken van GIMP-editors en photoshop. Jpegtran of Jpegoptim gaan de optimalisatietaak echter efficiënter aan, dus we downloaden en installeren beide programma's.

Het Jpegtran-hulpprogramma instellen

Het activeren van het Jpegtran-programma door het in de Windows-shell te injecteren is niet erg geschikt voor het hulpprogramma. Het zal niet correct werken omdat de code (jpegtran -copynone -optimize -outfile min.image.jpg image.jpg) is ontworpen om het gewicht van slechts één afbeelding te comprimeren, niet alle bestanden in een map.

Dit betekent dat u een andere manier moet gebruiken om het hulpprogramma te activeren. Jpegtran hoeft niet in de map C:\Windows te worden geplaatst, maar u kunt hier een kopie ervan opslaan. We plaatsen het programma jpegtran.exe in een willekeurige map en hernoemen (voor het gemak) naar!jpegtran.

Vervolgens maken we met Notepad++ een bestand in UTF-8-codering (zonder stuklijst) met de extensie .bat en de naam!start. We zetten er deze code in:

Om afbeeldingen te optimaliseren, moet u zowel jpegtran.exe als!start.bat-bestanden in dezelfde map plaatsen en het compressieproces starten met behulp van het!start.bat-bestand:

Het Jpegoptim-programma instellen

Het hulpprogramma Jpegoptim integreert zichzelf naadloos in de Windows-shell. Om het te activeren, moet u de code toevoegen aan het einde van het PMGoptim.reg-bestand (het is al eerder gemaakt voor hulpprogramma's voor PNG-afbeeldingen):

Het proces van het optimaliseren van afbeeldingen met dit programma is eenvoudig: klik met de linkermuisknop op de map met afbeeldingen en selecteer "Run jpegoptim".

Het resultaat van Jpegtran en Jpegoptim:

Online diensten

Er zijn veel diensten op internet waarmee u afbeeldingen effectief kunt optimaliseren. Soms is het resultaat van hun werk beter dan de hierboven besproken hulpprogramma's.

Online services verslechteren echter de kwaliteit bij het comprimeren van een afbeelding. Soms maar een paar pixels, maar de vervorming is nog steeds merkbaar. Dat wil zeggen, de grootte van de afbeeldingen past misschien goed bij ons, maar de kwaliteit laat veel te wensen over.

Wat doet onze module?De belangrijkste functie is om afbeeldingen zoveel mogelijk te optimaliseren, terwijl praktisch geen kwaliteitsverlies. Waar is het voor?Er zijn verschillende redenen: Besparingen vrije ruimte op hosting, omdat in de regel zijn het afbeeldingen die het meeste "opeten". Naleving van de vereisten van PageSpeed ​​​​Insights - de vereisten voor het optimaliseren van de site voor zijn maximale positie in de zoekmachine. zal de mobile-first index bijwerken. Als onderdeel van deze updates zullen de laadsnelheid en draagbaarheid van de site een serieuze rankingfactor worden. U kunt controleren of uw site problemen heeft met de afbeeldingsgrootte: hier. Afbeeldingen zullen u behoeden voor lang en vervelend opnieuw opslaan in applicaties van derden. Geen quota en beperkingen, koop een licentie en converteer zoveel bestanden als je nodig hebt, zonder het saldo op te waarderen en eventuele extra betalingen!Geachte klanten, houd er rekening mee dat licentiesleutel geeft u de mogelijkheid om onze service zonder beperkingen te gebruiken, na het verstrijken van de licentiesleutel is toegang tot de service mogelijk, maar kunt u geen updates voor onze module ontvangen. Houd er ook rekening mee dat u bij het kopen van een extensie de schakelaar in de module-instellingen niet hoeft te wijzigen. De module werkt volgens het "installeer en vergeet"-principe. Elke afbeelding die naar het infoblok wordt geüpload, wordt automatisch gecomprimeerd!Alle afbeeldingen worden in 1 klik geoptimaliseerd, alle afbeeldingen die naar de infoblokken, mediabibliotheek of bij uitwisseling met 1C worden geüpload, worden automatisch gecomprimeerd. dit moment JPEG- en PNG-formaten worden ondersteund.HTTPS - het protocol wordt ondersteund.PHP7 - wordt ondersteund.Demo - de periode stelt u in staat 1000 afbeeldingen te verwerken.Elke dag worden met onze module voor 1C - Bitrix tot 500 duizend afbeeldingen verwerkt!U kan het compressieniveau controleren op de website van de module. Houd er rekening mee dat de module bijna volledig is geschreven in D7, op versies 1C - Bitrix jonger dan 16 - deze werkt mogelijk niet correct. Hoe u het kunt gebruiken Om uw leven gemakkelijker te maken, staat ons team altijd klaar om de module op uw site met 1C - Bitrix te installeren en zelf te optimaliseren, stuur hiervoor na aankoop een verzoek naar onze e-mail - [e-mail beveiligd] Geef met het onderwerp "Installatie" in de hoofdtekst van de brief de couponcode aan en toegang tot de site waarop u wilt werken. Beste klanten! Vergeet niet uw ervaring met het gebruik van onze producten te delen, feedback achter te laten, in discussies te schrijven en naar ons e-mailadres - [e-mail beveiligd] we zijn altijd blij om u te helpen en krijgen feedback!

Van AlfaGroup

Koop: 2 000 1 800 roebel.

Schermafbeeldingen

Beschrijving

Technische details

Beschrijving

Wat doet onze module?

De belangrijkste functie is om afbeeldingen zoveel mogelijk te optimaliseren, terwijl ze praktisch geen kwaliteit verliezen.

Waar is het voor?

Er zijn verschillende redenen:

1. Vrije ruimte besparen op hosting, tk. in de regel zijn het de beelden die het meeste "opeten".
2. Naleving van de vereisten PageSpeed ​​​​Inzichten - vereisten voor het optimaliseren van de site, voor de maximale positie in de zoekmachine.
3. De laadsnelheid van de pagina verhogen door het gedownloade verkeer te verminderen

Onze module OptiImg stelt u in staat om de grootte van afbeeldingen op de site tot 99% te verkleinen zonder zichtbaar kwaliteitsverlies.

Automatische beeldcompressie slaat op u van lang en vervelend opnieuw opslaan in toepassingen van derden.

Geen quota en beperkingen, koop een licentie en converteer zoveel bestanden als je nodig hebt, zonder je saldo op te waarderen en eventuele extra betalingen!

Beste klanten, houd er rekening mee dat u met de licentiesleutel onze service zonder beperkingen kunt gebruiken, nadat de licentiesleutel is verlopen, is toegang tot de service mogelijk, maar u kunt geen updates voor onze module ontvangen.

Houd er ook rekening mee dat u bij het kopen van een extensie de clbch in de module-instellingen niet hoeft te wijzigen.

De module werkt volgens het "set it and forget it" principe. Elke afbeelding die naar het infoblok wordt geüpload, wordt automatisch gecomprimeerd!

Alle afbeeldingen worden in 1 klik geoptimaliseerd, alle afbeeldingen die worden geüpload naar infoblocks, mediabibliotheek of bij uitwisseling met 1C worden automatisch gecomprimeerd.

JPEG- en PNG-indelingen worden momenteel ondersteund.

HTTPS - protocol ondersteund.

PHP7 - ondersteund.

Demo - periode stelt u in staat om 1000 afbeeldingen te verwerken.

Elke dag met onze module voor 1C - Bitrix, verwerkt tot 500 duizend afbeeldingen!

U kunt het compressieniveau controleren op de website van de module.

Houd er rekening mee dat de module bijna volledig is geschreven in D7, op versies 1C - Bitrix onder 16 - werkt mogelijk niet correct.

Hoe te beginnen met gebruiken?

Om uw leven gemakkelijker te maken, staat ons team altijd klaar om de module op uw site met 1C - Bitrix te installeren en zelf te optimaliseren, stuur hiervoor na aankoop een verzoek naar onze e-mail - [e-mail beveiligd] Geef met het onderwerp "Installatie" in de hoofdtekst van de brief de couponcode en toegang tot de site aan waarop u wilt werken.

Beste klanten!

Vergeet niet uw ervaring met het gebruik van onze producten te delen, feedback achter te laten, te schrijven in discussies en naar ons e-mailadres - [e-mail beveiligd] We zijn altijd blij om te helpen en feedback te krijgen!

Beoordelingen (10)

Totale score: Totaal aantal beoordelingen: 10

Goede oplossing voor het optimaliseren van afbeeldingen

Op het moment van 25 februari 2019 werkt de oplossing niet volledig, zelfs op hun website http://www.optiimg.ru/ kun je de afbeelding niet rechtstreeks comprimeren, deze bevriest na het laden.

Onze excuses, de oplossing werkt, maar deze werkt niet op onze hosting, het probleem bleek niet in de oplossing te zitten, maar zoals de persoon van de technische ondersteuning aangaf, "het probleem ligt op het niveau van netwerkcommunicatie van de hosting centra." De technische ondersteuning zelf bleek zeer actief te zijn in het oplossen van ons probleem en heeft persoonlijk onderhandeld met de hosting van onze site.

De module is geweldig!

Zoals ze hieronder schreven, doe ik mee, maar dit is de enige beslissing waar ik geen spijt van heb gehad! De module werkt slim, bevriest niet. De site opgeschoond voor 3 GB. Het was 5 GB nu 2 GB.
Super module, goed gedaan!) Ik raad aan)

Uitstekende technische ondersteuning en een coole module

De onmiddellijke hulp van technische ondersteuning verraste me, op zondagavond reageerden ze onmiddellijk.
De module is erg gaaf, ik ben al heel lang op zoek naar een vergelijkbare oplossing. Ik raad aan!

Hallo

Technische ondersteuning werkt direct, na 10 seconden hebben ze al geantwoord online chat en beantwoorde vragen! Het programma is vuur, vooral als er veel foto's zijn! Ik raad het iedereen aan!

Uitstekende technische ondersteuning

Er waren problemen met de werking van de module, contact opgenomen. Support heeft het probleem zeer snel opgelost, bedankt.

Goede beslissing

Perfecte oplossing! De jongens hebben alles zelf geïnstalleerd en de afbeeldingen met 40% gecomprimeerd. Bedankt!

Tot nu toe de enige aankoopbeslissing waar we geen spijt van hebben

Tot nu toe de enige aankoopbeslissing waar we geen spijt van hebben gehad. 5 GB gewist.

Zeer nuttige module en uitstekende technische ondersteuning!

Dankzij de module was het mogelijk om de snelheid van de site te verdubbelen, wat erg belangrijk is voor een webwinkel met een groot aantal afbeeldingen. Technische ondersteuning hielp om de problemen die zich voordeden snel op te lossen, legde geduldig alle subtiliteiten uit.

Geweldige module, geweldige ondersteuning.

Wij hebben de module aangeschaft, support direct aangesloten en alles ingesteld. Dankzij foto-optimalisatie geeft Google PageSpeed ​​de site op de meeste pagina's een score van meer dan 80 punten. Ik raad deze oplossing aan iedereen aan.

Uitstekende module

Ik heb de site getest op google, er waren grote foto's. Ik dacht na over hoe te optimaliseren. Ik heb een simpele en goedkope oplossing gevonden. De jongens van die support installeerden zichzelf, schreven alles voor, nu bij het laden van foto's werkt het automatisch, alles comprimeert naar optimale maten. Meteen op de tweede site gezet, zeer tevreden. Ik raad aan.

Discussies (76)

Discussies (76)

Gekocht, betaald, geoptimaliseerde foto's. Alles is cool, behalve één storing die deze module aanroept. Namelijk, wanneer ik het product probeer te bewerken vanaf het gezicht van de site, verschijnt er een fatale fout

Detailfoto:
Toegang tot niet-aangegeven statische eigenschap: Alfa1c\Optiimg\OptiImg::$_1260989302 (0)
/home/bitrix/www/bitrix/modules/alfa1c.optiimg/include.php:1
#0: OptiImgEvents::CompressOnResize(array, array, NULL, string, string, boolean)
/home/bitrix/www/bitrix/modules/main/classes/general/module.php:490
#1: ExecuteModuleEventEx(array, array)
/home/bitrix/www/bitrix/modules/main/classes/general/file.php:1705
#2: CAllFile::ResizeImageGet(array, array, integer, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinputunclouder.php:40
#3: Bitrix\Main\UI\FileInputUnclouder::getSrcWithResize(array, array)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:477
#4: Bitrix\Main\UI\FileInput->getFile(string, string, boolean)
/home/bitrix/www/bitrix/modules/main/lib/ui/fileinput.php:283
#5: Bitrix\Main\UI\FileInput->show(array, boolean)
/home/bitrix/www/bitrix/modules/iblock/admin/iblock_element_edit.php:2539
#6: opnemen (tekenreeks)
/home/bitrix/www/bitrix/admin/cat_product_edit.php:3

Het komt niet altijd voor, maar wel heel vaak. Tegelijkertijd is er soms op hetzelfde product eerst een glitch, voor de tweede of derde keer is er geen glitch.

Sergey Zabotin, te oordelen naar het feit dat de naam van de functie onduidelijk is - u blijft de demoversie gebruiken, verwijdert de module volledig en installeert deze opnieuw, als de fout aanhoudt - schrijf ons op [e-mail beveiligd] wij zullen je helpen.

Welke mogelijkheden heeft de module als afbeeldingen in "clouds" worden opgeslagen? Is het bijvoorbeeld Selectel?
Voor zover ik begrijp, comprimeert de module zowel bij het laden als bij het vergroten/verkleinen, maar comprimeert het niet als de afbeeldingen zich al in de "wolken" bevinden?
Wat zijn je plannen in deze richting?

Gavril Skryabin, CMS laadt bestanden rechtstreeks in de cloud van derden, om voor de hand liggende redenen zal onze module niet in staat zijn om respectievelijk aan de cloudzijde te werken, alleen als u de bestanden vooraf verwerkt en ze vervolgens naar de cloud verplaatst.

Het zal werken met de Bitrix-cloud, omdat. Bitrix-bestanden in de cloud worden van tijd tot tijd bijgewerkt.

Goedemiddag
Hoe lang is de licentiesleutel geldig? (update)

Ivan Prilepin, Updates zijn beschikbaar voor 1 jaar, toegang tot de server is niet beperkt in de tijd.

1.2.8 versie.

Roman Petrov, schrijf ons een e-mail, we komen er wel uit.

Ik heb de optimizer een jaar geleden gekocht, toen heb ik hem heel weinig gebruikt, nu wilde ik hem opnieuw gebruiken, maar ik kreeg een autorisatiefout?! Moet ik het opnieuw kopen?
Waarom zou ik het elk jaar kopen omwille van 100 foto's?

Roman Petrov, U kunt een extensie kopen als u de module wilt updaten, als de versie van de module ouder is dan 1.2. in deze versie was er een grote refactoring, daarin veranderde de server waar onze module toegang toe had. Als uw huidige versie nieuwer is, schrijf ons dan op het e-mailadres, [e-mail beveiligd] Laten we eens kijken waarom de fout optreedt.

Wat is er nieuw

Installatie

De installatie is standaard vanuit de Marketplace.

De module is toegankelijk via de sectie

Tools -> Image Optimizer of volg de link:
/bitrix/admin/optiimg_admin.php

Module-instellingen:
/bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1

Houd er rekening mee dat om de module te laten werken, u de sleutel die na aankoop per post is ontvangen, in het veld "Sleutel" moet invoeren.

De oplossing maakt gebruik van de cURL-bibliotheek, deze is in de regel standaard ingeschakeld, zo niet, neem dan contact op met uw host of systeembeheerder voor hulp.

We vestigen ook uw aandacht op het feit dat de snelheid van het werk rechtstreeks afhangt van de snelheid van het bestandssubsysteem van de server en het communicatiekanaal.

Ook kan de module afbeeldingen direct comprimeren, bijvoorbeeld afbeeldingen die aan een infoblock-element zijn toegevoegd. Om dit te doen, vinkt u in de module-instellingen de vakjes aan naast En Comprimeer afbeeldingen bij formaat wijzigen.

Steun

Hoe u onze module correct gebruikt:

1. Installeer de module vanaf de marktplaats.
2. Ga naar /bitrix/admin/settings.php?lang=ru&mid=alfa1c.optiimg&mid_menu=1
3. Stel de compressiekwaliteit in, vink de vakjes aan Comprimeer afbeeldingen bij uploaden En Comprimeer afbeeldingen bij formaat wijzigen, als je site werkt https-protocol voer vervolgens 443 in het poortveld in of laat het leeg.
4. Ga naar de bestandsbeheerder en verwijder de /upload/resize_cache/ map
5. Ga naar de interface voor het werken met de module /bitrix/admin/optiimg_admin.php
6. druk op de knop Optimaliseren

Elk jaar draaien zoekmachines de schroeven voor externe optimalisatie steeds meer aan. En er wordt meer aandacht aan besteed interne factoren plaats. Zo heeft de laadsnelheid van je site ook invloed op de groei van je posities in de zoekresultaten.

Natuurlijk zijn er veel manieren om uw site te versnellen, maar vandaag zullen we het over slechts één daarvan hebben - dit is beeldoptimalisatie voor de site. Nee, dit zijn niet de beruchte metatags - ALT en TITLE, we zullen het hebben over technische problemen.

Ooit dacht ik niet eens na over de mogelijkheid om afbeeldingen op de een of andere manier te optimaliseren. En waarom? Immers, breedband, onbeperkt, foto's van sites worden direct geladen. Wat zal de afbeeldingsgrootte met 20 kilobyte verkleinen? Laat maar zitten!

Maar de trend mobiel verkeer zette me aan het denken over optimalisatie. Als je kijkt naar de groeigrafiek van mobiel verkeer, dan hadden volgens statistieken in 2014 elke 3 mensen toegang tot internet vanaf mobiele apparaten. En dat betekent dat steeds meer mensen vanuit gadgets websites en blogs gaan bezoeken.

En zoals je weet is de snelheid van mobiel internet nog steeds een sprookje. En als uw site zware afbeeldingen heeft, wacht de gebruiker mogelijk helemaal niet tot uw site is geladen. Daarom is het onderwerp beeldoptimalisatie voor de site nu zeer relevant.

Ik optimaliseer voor elke publicatie, en geloof me, het totale gewicht van alle foto's wordt teruggebracht tot 60% zonder hun kwaliteit te verliezen. Dus laten we eens kijken naar de tools die ik gebruik.

Tools voor het optimaliseren van afbeeldingen op de site.

De meest voorkomende en meest toegankelijke voor velen is Photoshop. Hoogstwaarschijnlijk, als u een blogger, webmaster of een persoon bent die nauw betrokken is bij de publicatie van artikelen op uw sites, heeft u deze software geïnstalleerd.

Om een ​​afbeelding in Photoshop te optimaliseren, moet u een reeks eenvoudige manipulaties uitvoeren. Ga naar het menu Bestand -> Opslaan voor web.

Dan zien we een venster met twee opties voor afbeeldingen.

De bovenste is de originele afbeelding, de onderste is wat we krijgen na verwerking.

En nu zal ik je de truc laten zien. Kijk naar de afbeeldingen en de pijlen erop.

De eerste foto wordt opgeslagen op 100% kwaliteit. Haar gewicht is met 85% afgenomen.

De tweede foto wordt opgeslagen op 70% kwaliteit. Het gewicht is met 95% verminderd, terwijl de afbeeldingen er identiek uitzien.

Stel je nu eens voor hoeveel tijd een gebruiker zou moeten besteden aan het downloaden van een afbeelding van 2 megabyte op een mobiel apparaat. En als er 5-10 van dergelijke afbeeldingen in het artikel staan? Daarom is het belangrijk om afbeeldingen voor een website te optimaliseren.

Maar Photoshop is niet ideaal voor massale beeldoptimalisatie. Laten we dus overschakelen naar meer gespecialiseerde software.

PictureBeaver is een vriend voor de vensters van de gebruiker.

Ik ben lang geleden overgestapt op MacOS en gebruik Windows in zeldzame zaken. In principe is het om de semantische kern te verzamelen met behulp van de KeyCollector. Dus ik moest hard werken om echt te vinden waardevol programma voor beeldoptimalisatie. En om het op Windows te laten werken.

Het bleek dat er een prachtig programma PictureBeaver is, dat niet grillig is voor bronnen, en verrassend snel werkt.

Het programma is zeer eenvoudig om mee te werken. Open de map met het gedownloade script en sleep alle afbeeldingen die u wilt optimaliseren naar het bestand optimize.wsf

Na de beeldverwerking verschijnt er een map met geoptimaliseerde afbeeldingen en voor elk daarvan een rapportbestand.

ImageOptim is een vriend van appeltelers.

Met deze software voor macOS-problemen Nee. Dit is voornamelijk te wijten aan het feit dat ontwerpers het meest van Apple-technologie hielden. En ze spelen heel graag met de beelden. dus vind de juiste software het zal niet werken voor jou.

ik heb gekozen voor gratis hulpprogramma ImageOptim , omdat het de hoofdtaak met een knal aankan. En dit is massa-optimalisatie van afbeeldingen voor de site.

De manier waarop het werkt is anders dan PictureBeaver. Het maakt geen nieuwe mappen met voltooide afbeeldingen. Het vervangt gewoon de originelen door geoptimaliseerde afbeeldingen.

Het ziet er zo uit:

Het venster waar u de afbeelding naartoe wilt slepen.

Venster na optimalisatie.

Zoals u kunt zien, is het programma erin geslaagd om het totale gewicht met 24,8% te verminderen.

De eerste afbeelding is al geoptimaliseerd in Photoshop. De tweede niet.

PS Mobiel internet groeit, denk dus aan het gemak voor uw gebruikers.

In het huidige tijdperk mobiele technologieën beeldoptimalisatie in PNG- en JPG-formaten, JPEG is weer relevant geworden, zoals het relevant was in die tijd dat internet net ons leven binnenkwam en overal traag en inbelbaar was. Mobiel internet is natuurlijk niet helemaal correct om te vergelijken met inbellen, maar op plekken waar de verbinding slecht is, is de toegangssnelheid ook vrij laag. En in die tijd kon de gebruiker nergens heen en moest hij wachten tot de pagina was geladen. Nu het internet is gegroeid, is de keuze aan sites groot. De gebruiker werd chagrijnig en ongeduldig en de gemiddelde laadtijd van de pagina werd sterk verminderd. Het is voor de gebruiker gemakkelijker om een ​​andere snellere site te vinden.
Ja, en zoekgiganten zoals Google of Yandex begonnen aandacht te besteden aan hoe snel sites worden geladen, en gaven de voorkeur aan sites die sneller zijn in de uitgifte. Niet de laatste rol hierin wordt gespeeld door het gewicht van de pagina, dat op zijn beurt sterk afhankelijk is van het gewicht van de afbeeldingen die erop staan. Het is vrij duidelijk dat compact gecomprimeerde afbeeldingen voordelig voor iedereen. Daarom wil ik het hier hebben over hoe u uw PNG- en JPG-, JPEG-bestanden kunt voorbereiden voor uploaden naar hosting.

Basis beeldoptimalisatie

Dit betekent het bijsnijden van onnodige velden, het verminderen van de kleurdiepte, het verwijderen van opmerkingen en het opslaan van de afbeelding in een geschikt formaat. Hiervoor kunt u gebruik maken van Adobe Photoshop, of als je het niet hebt, MS Paint of GIMP.
Zelfs het elementair bijsnijden van de afbeelding zal het gewicht behoorlijk verminderen.

Een afbeelding verkleinen in MS Paint

Met MS Paint als voorbeeld laat ik zien hoe je een afbeelding verkleint tot het gewenste formaat.
Laten we bijvoorbeeld het NGINX-logo nemen en zijn nginx.png-afbeelding van 2000×417 pixels, die in de breedte moet worden gesneden tot 1024, omdat dit is de breedte van de pagina-indeling en het heeft geen zin meer te doen.

Aan de uitgang krijgen we een afbeelding die de minimale basisoptimalisatie heeft doorstaan. Het is tijd om verder te gaan met het comprimeren van haar gewicht.

Bestandsoptimalisatie voor het comprimeren van PNG en JPG, JPEG

De eenvoudigste en snelste manier om optimale beeldcompressie te bereiken zonder kwaliteitsverlies, is door File Optimizer te gebruiken.

Officiële website en programmabeschrijving :

Bestandsoptimalisatie downloaden je kunt met

Beschrijving . Het is een effectieve optimalisatie, niet alleen voor afbeeldingen, maar ook voor .pdf, .docx, txt en andere tekst-, audio- en videobestanden, evenals archieven. Volle lijst ondersteunde extensies zijn te vinden op: Officiële Pagina projecteren.
Hier zijn enkele van de hulpprogramma's die in het werk worden gebruikt: AdvanceCOMP, APNG Optimizer, CSSTidy, DeflOpt, defluff, Gifsicle, Ghostscript, jhead, jpegoptim, jpegtran, Leanify, mozjpeg, MP3packer, mp4v2, OptiPNG, PngOptimizer, PNGOUT, pngquant, pngrewrite, pngLiwolf, TruePNG,. Ik denk dat zelfs deze onvolledige lijst behoorlijk indrukwekkend is.

Bestandsoptimalisatie installeren en gebruiken

Eerst downloaden laatste versie programma's in de vorm van een installatieprogramma of een archief met bestanden. Overigens heeft het archief een versie voor 32-bits en 64-bits versies van Windows.

De interface is vrij eenvoudig en intuïtief.
Het hoeft niet te worden geconfigureerd, maar u kunt enkele indelingen voor uzelf aanpassen met de knop Opties....
Gebruik . Je sleept ofwel benodigde bestanden en zelfs mappen (directories) in het programmavenster, of selecteer degene die je nodig hebt via het menu Bestanden toevoegen....
Om bestanden te optimaliseren, klikt u op Alle bestanden optimaliseren

Geoptimaliseerde bestanden zullen de originelen vervangen, de categoriehiërarchie blijft ook behouden. Tegenover elk bestand worden statistieken getoond die laten zien hoeveel de geoptimaliseerde versie weegt als percentage van de oorspronkelijke bestandsgrootte.
Na voltooiing van het werk worden in de statusbalk hieronder statistieken weergegeven over het aantal verwerkte bestanden en hoeveel er is bespaard.

Naar mijn mening doet File Optimizer zijn werk erg goed.
Het enige negatieve is dat als de lijst met bestanden groot is, je lang op de resultaten kunt wachten, maar het is het waard.

Als u geïnteresseerd bent in de details van optimalisatiemethoden die u op uw eigen manier kunt aanpassen, dan zullen we het hebben over het instellen en gebruiken van hulpprogramma's voor beeldcompressie.

PNG-compressie zonder kwaliteitsverlies

Overweeg 3 programma's voor: PNG-optimalisatie:

• Adobe Photoshop
• OptiPNG
• PNGOUT

Laten we ze vergelijken in termen van beeldcompressiekwaliteit. We zullen nginx.png uit de vorige sectie comprimeren. Het gewicht van het origineel is 27,5 Kb.

PNG-compressie met Adobe Photoshop

De eerste op de lijst is het bekende Photoshop. Een multifunctionele maaidorser voor een ontwerper die bijna alles kan, inclusief het comprimeren van afbeeldingen.
Openen in Photoshop Bestand opslaan voor web of gebruik een combinatie Alt+Shift+Ctrl+S

Als resultaat krijgen we 22,7 Kb, d.w.z. geperst met 17,5%

Helaas zijn de meeste grafische programma's niet in staat om het volledige potentieel van de algoritmen die worden gebruikt om PNG te comprimeren, te benutten. belangrijkste reden in die zin dat ze, om de optimale compressiestrategie te bepalen, heuristische algoritmen gebruiken die het mogelijk maken om, zonder compressie, de effectiviteit van bepaalde parameters te schatten, wat als resultaat geeft een groot percentage fouten. Daarom gebruiken we voor het comprimeren van PNG hulpprogramma's die speciaal voor dit doel zijn gemaakt, namelijk OptiPNG en PNGOUT.

OptiPNG gebruiken om PNG te comprimeren

Hoe OptiPNG . te installeren en te gebruiken

We hebben de .exe gedownload, geüpload naar C:\Windows, het benodigde PNG-bestand genomen en in een map geplaatst. Gebruik nu FAR Manager of een andere bestandsbeheerder met console-ondersteuning, ga naar deze map en voer de opdracht in de console in

optipng -o7 nginx.png

De opdracht dwingt om de PNG in de map te comprimeren. Later zullen we een eenvoudige optie overwegen voor het uitvoeren van compressie met één klik.
Maar laten we eerst eens kijken naar het resultaat.

18,8 Kb, d.w.z. met 31,6% gedrukt, bijna een derde. Heel dwaas, niet? Photoshop bleek veel erger.

PNGOUT gebruiken om PNG te comprimeren

Hoe PNGOUT te installeren en te gebruiken

Alles is precies hetzelfde als voor OptiPNG. Download PNGOUT.exe, zet het in C:\Windows, open het in bestandsbeheer, bijvoorbeeld, Far Manager map met PNG, en in opdrachtregel schrijven

Pngout nginx.png

Resultaat hieronder

Het resultaat is 23,4 Kb, d.w.z. erin geslaagd om met 15% te krimpen. Heel goed.

Over het algemeen zal ik meteen zeggen dat ik verschillende resultaten had met verschillende bestanden, ergens waar PNGOUT efficiënter werkte, ergens OptiPNG, dus ik raad je aan om afbeeldingen om de beurt door beide hulpprogramma's te laten lopen.

Snel PNG comprimeren in OptiPNG en PNGOUT

Maak een png.reg-bestand en schrijf daar registergegevens

ramen Register-editor Versie 5.00 @="OptiPNG op map uitvoeren" @="cmd.exe /c \"TITLE OptiPNG uitvoeren op %1 && FOR /r \"%1\" %%f IN (*.png) DO optipng -o7 \ "%%f\" \"" @="Voer PNGOUT uit op map" @="cmd.exe /c \"TITLE PNGOUT uitvoeren op %1 && FOR /r \"%1\" %%f IN (*. png) DO pngout \"%%f\" \""

Voer vervolgens dit bestand uit en schrijf gegevens naar het Windows-register.
Wanneer u nu op een map klikt met PNG-bestanden die u wilt comprimeren, selecteert u de commando's die u nodig hebt, de compressie zal automatisch en voor alle afbeeldingen tegelijk plaatsvinden.

Om alles te verwijderen van contextmenu, schrijf de volgende code in png.reg en voer het uit

Windows Register-editor versie 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\OptiPNG\command] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\PNGOUTer] -HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\PNGOUT\command]

Comprimeer JPG, JPEG zonder kwaliteitsverlies

Om JPG, JPEG te optimaliseren, naar analogie met PNG, zijn er hulpprogramma's: jpegtran en jpegoptim. Natuurlijk kunt u Photoshop gebruiken, maar voor JPG- en JPEG-compressie raad ik u ten zeerste aan deze te gebruiken.

Hoe jpegtran te installeren, configureren en gebruiken

jpegtran is een krachtig hulpprogramma waarmee u zowel eenvoudige verliesvrije JPG-compressie, compressie met een bepaald niveau van anti-aliasing als zelfs conversie naar progressieve JPEG kunt uitvoeren.
Je kunt jpegtran hier downloaden http://jpegclub.org/jpegtran/ (zoek en download jpegtran.exe).

Hoe JPG, JPEG te comprimeren met jpegtran

Upload jpegtran.exe naar C:\Windows
Open vervolgens de map met de gewenste JPEG in Far Manager en voer in de console in

Jpegtran -copy none -optimize -outfile min.1.jpg 1.jpg # Basisoptimalisatie 1.jpg # -copy none verwijdert metadata uit JPG # -optimize optimaliseert de afbeelding

Progressieve JPG, JPEG

Dit is een type JPG dat bij het laden van de pagina eerst de algemene contouren laat zien, vervolgens laadt en de beeldkwaliteit op het maximum brengt. Het is erg handig voor langzaam mobiel internet en daarom is het noodzakelijk om het te gebruiken.

Jpegtran -progressive -outfile 1.jpg 1.jpg # Converteer het 1.jpg-formaat naar Progressive

Hoe te controleren of een afbeelding een Progressive JPEG is

jpegtran geavanceerde functies

Alles hier behandeld mogelijke opties jpegtran-gebruik

Jpegtran --help gebruik: jpegtran invoerbestand uitvoerbestand Schakelaars (namen kunnen worden afgekort): -kopieer geen Kopieer geen extra markeringen uit het bronbestand -kopieer opmerkingen Kopieer alleen commentaarmarkeringen (standaard) -kopieer alle Kopieer alle extra markeringen -optimaliseer Huffman-tabel optimaliseren ( kleiner bestand, maar langzame compressie) -progressief Maak een progressief JPEG-bestand Schakelt om de afbeelding te wijzigen: -crop BxH+X+Y Bijsnijden tot een rechthoekig deelgebied -flip Spiegelbeeld (links-rechts of boven-onder) -grijswaarden Verkleinen tot grijswaarden ( kleurgegevens weglaten) -perfect Mislukken als er niet-transformeerbare randblokken zijn -roteren Beeld roteren (graden rechtsom) -schaal M/N Uitvoerbeeld schalen met breuk M/N, bijv. 1/8 -transponeren Beeld transponeren -transversaal Transversaal transponeren image -trim Laat niet-transformeerbare randblokken vallen -wipe BxH+X+Y Veeg (grijs uit) een rechthoekig deelgebied Schakelaars voor gevorderde gebruikers: -arithmetic Gebruik rekenkundige codering -restart N Stel herstartinterval in in rijen, of in blokken met B -maxmemory N Maximaal te gebruiken geheugen (in kbytes) -outfile-naam Specificeer de naam voor het uitvoerbestand -uitgebreid of -debug Emit debug-uitvoer Schakelt voor wizards: -scanbestand Maak multi-scan JPEG per scriptbestand

Hoe jpeg automatisch te comprimeren met jpegtran in Windows

Het is niet mogelijk om via het contextmenu te comprimeren vanwege de eigenaardigheden van het hulpprogramma, maar u kunt de compressie van veel JPEG's tegelijk op de machine configureren.
Om dit te doen, moeten we een bestand maken met de extensie .bat (voor hulp) en het daar schrijven

cd/d. voor %%j in (*.jpg) bel:sheensay "%%~nxj" "%%~nj.jpg" goto:eof:sheensay jpegtran -copy none -optimize -progressive "%~1" "%~2 "

Hoe jpegoptim te installeren, configureren en gebruiken

Hoe JPG, JPEG te comprimeren met jpegoptim

Upload jpegoptim.exe naar C:\Windows. Open vervolgens de map met JPG-afbeeldingen gebruik Far Manager en ga naar de console

Jpegoptim *.jpg --strip-all --all-progressive

Hoe meerdere JPG, JPEG tegelijk te optimaliseren met jpegoptim

In tegenstelling tot jpegtran, kunt u er met het hulpprogramma jpegoptim heel goed mee werken vanuit het contextmenu.
Laten we een jpegoptim.reg-bestand maken, bijvoorbeeld met Far Manager, en het daar schrijven

Windows Register-editor versie 5.00 @="Run jpegoptim on Folder" @="cmd.exe /c \"TITLE Jpegoptim uitvoeren op %1 && FOR /r \"%1\" %%f IN (*.jpg) DO jpegoptim *.jpg --strip-all --all-progressive \"%%f\" \""

Gelanceerd, ingevoerde gegevens in het register. Nu kunt u veel JPEG-bestanden comprimeren met behulp van het contextmenu, plaats gewoon de gewenste afbeeldingen in één map, RMB en "Run jpegoptim on Folder".

Als u jpegoptim uit het register en het contextmenu wilt verwijderen, schrijft u jpegoptim.reg

Windows Register-editor versie 5.00 [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim] [-HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Folder\shell\jpegoptim\command]

Opslaan, uitvoeren, wijzigingen aanbrengen in het register.

Hoe goed comprimeren jpegtran en jpegoptim jpg, jpeg

Laten we verder gaan met de tests. Neem bijvoorbeeld het caching.jpg-bestand. In het origineel weegt hij 29,5 KB

jpegtran-tests voor compressiekwaliteit JPG, JPEG

De output bleek 29,1 KB te zijn, compressie bespaard 1,36%

jpegoptim-tests voor JPG-, JPEG-compressiekwaliteit

IN Windows Explorer dit is niet zichtbaar, de compressie was enkele honderden bytes.

We zullen, origineel bestand was goed voorbereid, dus de compressie had geen zichtbaar effect, maar wanneer je je niet-geoptimaliseerde afbeeldingen verwerkt, zul je soms verbaasd zijn hoe goed je in grootte kunt besparen.

Hoe compressie png en jpg, jpeg op de machine in te stellen

Als je dit gedeelte hebt gelezen, maar nog steeds niet tevreden bent met de voorgestelde opties, raad ik je aan zelf een draagbare maaidorser samen te stellen - een service voor het comprimeren van afbeeldingen, foto's en afbeeldingen die naar wens zullen werken op je bureaublad.

Moet vooraf zijn geïnstalleerd jpegtran, jpegoptim, optipng, png uit Yu
Installatie-instructies staan ​​hierboven.

Hiervoor moeten we dus de maparchitectuur correct samenstellen. Stel dat u een map afbeeldingen heeft met een eigen geneste hiërarchie van PNG- en JPG-mappen die u moet verwerken.
Maak een map optimus aan, plaats de map afbeeldingen met alle submappen en bestanden erin.
Open het, open optimus erin, maak daar een go.bat-bestand aan en schrijf het daar

@ECHO OFF CLS SetLocal EnableExtensions EnableDelayedExpansion set home_path=%~dp0:: Naam van map waarin onbewerkte afbeeldingen worden opgeslagen set folder=images echo Verwerking *.JPG-bestanden via jpegtran:: Maak een map om op te slaan gecomprimeerde jpg. In ons geval is dit jpeg_images xcopy /y /t /c /i "%folder%" "jpg_%folder%" :: Voor elke .jpg optimaliseren we met jpegtran. output.jpg wordt naar jpeg_images geschreven voor /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegtran -copy none -optimize -progressive -outfile %home_path%jpg_!fn:%~ dp0 =!%home_path%!fn:%~dp0=!) echo Verwerking van *.JPG-bestanden via jpegtran voltooid:: Specificeer dat de uitvoering nu in een nieuwe map moet worden gedaan jpeg_images set folder = jpg_%folder% echo Verwerking *. JPG-bestanden via jpegoptim voor /r %folder% %%a in (*.jpg) do (set fn=%%a& jpegoptim %%~a --strip-all) echo Verwerking *.JPG-bestanden via jpegoptim voltooid echo Verwerking * . png-bestanden via optipng xcopy /y /t /c /i "%folder%" "png_%folder%" voor /r %folder% %%a in (*.png) do (set fn=%%a& optipng -o7 %% ~a -out %home_path%png_!fn:%~dp0=!) echo Verwerking *.PNG-bestanden via optipng is compleet set folder=png_%folder% echo Verwerking *.PNG-bestanden via pngout voor /r %folder% %% a in (*.png) do (set fn=%%a& pngout %%~a) echo Verwerking van *.PNG-bestanden via pngout voltooid pauze

De code is becommentarieerd in belangrijke onderdelen. In feite niets ingewikkelds, zoek het uit als je het nodig hebt.

Sla nu go.bat op en voer het uit.

Als er veel bestanden zijn, duurt het enige tijd om de afbeelding te comprimeren. Wacht tot de console u meldt dat het proces voorbij is.

De compressie verloopt door JPG-bestanden afzonderlijk te scheiden, die zich nu in jpg_images bevinden, en PNG-bestanden afzonderlijk, die zich in png_images bevinden.

Als u de kwaliteit of andere parameters moet wijzigen, raadpleegt u de beschrijving van de hulpprogramma's hierboven en past u de code aan uw behoeften aan.

Hoe GIF te optimaliseren en te comprimeren

Eindelijk

In dit artikel heb ik geprobeerd de manieren te bespreken om PNG en JPG zo volledig mogelijk te optimaliseren. Als je vragen, aanvullingen hebt, schrijf dan in de comments, we zullen het bespreken

Ilya is een Developer Advocate en Web Perf Guru

Afbeeldingen zijn de bronnen die vaak de meeste ruimte op de pagina innemen en het zwaarst wegen. Door ze te optimaliseren, kunnen we de hoeveelheid gedownloade gegevens aanzienlijk verminderen en de prestaties van de site verbeteren. Hoe meer gecomprimeerd de afbeelding, hoe minder bandbreedte kanaal duurt downloaden en onderwerpen snellere browser kan de pagina aan de gebruiker tonen.

Beeldoptimalisatie is zowel een wetenschap als een kunst. We kunnen het kunst noemen omdat niemand een definitief antwoord kan geven over hoe een bepaald beeld het beste kan worden gecomprimeerd. Dit is echter ook wetenschap, omdat we technieken en algoritmen tot onze beschikking hebben ontwikkeld die de omvang van de bron aanzienlijk kunnen verminderen. Om de optimale instellingen voor een afbeelding te selecteren, moet met veel factoren rekening worden gehouden: formaatmogelijkheden, gecodeerde gegevens, kwaliteit, aantal pixels, enz.

Afbeeldingen verwijderen en vervangen

TL;DR

• Verwijder ongewenste afbeeldingen.
• Gebruik waar mogelijk CSS3-effecten.
• Gebruik weblettertypen in plaats van tekst in afbeeldingen te coderen.

Stel jezelf allereerst de vraag: is dit beeld echt nodig? goed design moet eenvoudig zijn en de prestaties niet verminderen. Het is het beste om gewoon de onnodige afbeelding te verwijderen, omdat deze veel meer bytes weegt dan de HTML, CSS, JavaScript en andere bronnen op de pagina. Eén afbeelding op de juiste plaats kan echter lange tekst vervangen, dus u moet zelf de balans vinden en de juiste beslissing nemen.

Controleer daarna of het gewenste resultaat op een efficiëntere manier kan worden bereikt:

• Dankzij CSS-effecten(gradiënten, schaduwen, enz.) en CSS-animaties, kunt u items maken die er bij elke resolutie en schaal scherp uitzien en veel minder wegen dan afbeeldingen.
• Weblettertypen stelt u in staat om prachtige inscripties te gebruiken, terwijl u de mogelijkheid behoudt om tekst te selecteren en te zoeken, en de grootte ervan te wijzigen. Hierdoor wordt het werken met uw resource nog handiger.

Vermijd het coderen van tekst in een afbeelding. Mooie opschriften zijn nodig voor hoogwaardig design, merkpromotie en handige bediening met de bron, maar de tekst in de afbeelding staat dit alles alleen maar in de weg. Het kan niet worden geselecteerd, gevonden, vergroot, gekopieerd en ziet er niet goed uit op apparaten met een hoge resolutie. Natuurlijk hebben weblettertypen ook optimalisatie nodig, maar ze helpen bovenstaande problemen te voorkomen. Selecteer ze altijd om tekst weer te geven.

Vector- en bitmapafbeeldingen

TL;DR

• Het vectorformaat is geweldig voor afbeeldingen van geometrische vormen.
• De kwaliteit van vectorafbeeldingen is niet afhankelijk van de schaal en resolutie.
• Gebruik bitmap-indeling voor complexe afbeeldingen met veel niet-standaard formulieren en details.

Als je besluit dat je een afbeelding moet gebruiken om het resultaat te bereiken, kies dan het juiste formaat ervoor:

vector afbeelding

Bitmap

• Vectorafbeeldingen gebruiken lijnen, punten en polygonen om afbeeldingen weer te geven.
• In rasterafbeeldingen worden de individuele waarden van elke pixel in een rechthoekig raster gecodeerd en wordt op basis daarvan een afbeelding weergegeven.

Elk formaat heeft zijn eigen voor- en nadelen. Het vectorformaat is ideaal voor afbeeldingen met eenvoudige geometrische vormen (zoals logo's, tekst, pictogrammen, enz.). Ze blijven scherp bij elke resolutie en schaal, dus gebruik dit formaat om grote schermen en bronnen die in verschillende formaten moeten worden weergegeven.

Vectorformaten zijn echter niet geschikt voor complexe afbeeldingen (zoals foto's). Er is mogelijk te veel SVG-opmaak om alle vormen te beschrijven, maar de resulterende afbeelding ziet er nog steeds onrealistisch uit. In dit geval moet u een bitmapafbeeldingsindeling gebruiken, zoals GIF, PNG, JPEG of de nieuwe JPEG-XR- en WebP-indelingen.

De kwaliteit van rasterafbeeldingen hangt af van de resolutie en schaal: bij uitvergroting wordt het wazig en valt het uiteen in pixels. Als gevolg hiervan moet u mogelijk meerdere versies van een bitmap met verschillende resoluties opslaan.

Geoptimaliseerd voor schermen met hoge resolutie

TL;DR

• Op schermen met een hoge resolutie bestaat één CSS-pixel uit meerdere schermpixels.
• Er zijn veel meer pixels en bytes in afbeeldingen met een hoge resolutie dan in normale afbeeldingen.
• Optimalisatietechnieken kunnen worden toegepast op afbeeldingen van elke resolutie.

Als we het over pixels hebben, moet er een onderscheid worden gemaakt tussen schermpixels en CSS-pixels. Een CSS-pixel kan overeenkomen met een of meer schermpixels. Dit wordt gedaan zodat op toestellen met een groot aantal schermpixels het beeld helderder en gedetailleerder is.

Natuurlijk, op schermen met hoge DPI(HiDPI) graphics zien er erg mooi uit. Om er echter goed uit te zien in hoge resolutie, moeten onze afbeeldingen gedetailleerder zijn. Maar we hebben een oplossing: vectorformaten zijn ideaal voor deze taak. Ze behouden duidelijkheid in elke resolutie. Zelfs als de kosten voor het weergeven van kleine details toenemen, gebruiken we nog steeds één bron, onafhankelijk van de schermgrootte.

Aan de andere kant zijn rasterafbeeldingen veel complexer omdat ze afbeeldingsgegevens op elke pixel coderen. Dus hoe hoger het aantal pixels, hoe groter de omvang van een dergelijke bron. Overweeg als voorbeeld het verschil tussen 100x100 CSS-pixelfoto's:

Wanneer we de schermresolutie verdubbelen, neemt het totale aantal pixels in één keer vier keer toe: twee keer verticaal en twee keer horizontaal.

Samenvatten. Op schermen met een hogere resolutie zien afbeeldingen er erg aantrekkelijk uit, zodat u kunt creëren goede impressie over uw website. Deze schermen vereisen echter afbeeldingen met een hoge resolutie. Kies vectorindelingen omdat ze er op elk apparaat scherp uitzien. Als u een bitmap moet gebruiken, voegt u enkele geoptimaliseerde bronopties toe (zie hieronder).

Optimalisatie van vectorafbeeldingen

TL;DR

• SVG is een afbeeldingsformaat voor XML-gebaseerd
• SVG-bestanden moeten worden verkleind om hun grootte te verkleinen.
• Comprimeer SVG-bestanden met GZIP.

Alle moderne browsers ondersteunen SVG-indeling(Schaalbare vectorafbeeldingen). Het is een op XML gebaseerd beeldformaat voor 2D-graphics. SVG-opmaak kan rechtstreeks in de pagina of in een externe bron worden ingesloten. Het SVG-bestand kan op zijn beurt worden gemaakt met behulp van elke vectortekensoftware of handmatig in een teksteditor.

Het bovenstaande voorbeeld maakt een eenvoudige ronde vorm met zwarte rand en rode achtergrond. Het is geëxporteerd vanuit Adobe Illustrator. Het is gemakkelijk te raden dat het veel metadata bevat, zoals laaginformatie, opmerkingen en XML-naamruimten, die meestal niet nodig zijn om de bron in een browser weer te geven. Als gevolg hiervan moeten SVG-bestanden worden verkleind met behulp van de svgo-tool.

SVGo verkleint bijvoorbeeld de grootte van het bovenstaande SVG-bestand met 58% van 470 B naar 199 B. Omdat SVG een op XML gebaseerde indeling is, kunnen we GZIP-compressie toepassen om de grootte bij overdracht te verkleinen. Zorg ervoor dat SVG-broncompressie op uw server is geconfigureerd.

Bitmap-optimalisatie

TL;DR

• Een bitmap is een raster van pixels.
• Elke pixel bevat informatie over kleur en transparantie.
• Om de grootte van een afbeelding te verkleinen, gebruiken compressoren verschillende methoden om het aantal bits per pixel te verminderen.

Een bitmap is gewoon een 2D-raster van individuele pixels. Een afbeelding van 100 x 100 pixels is bijvoorbeeld een reeks van 10.000 pixels. Elke pixel bevat RGBA-waarden: een rood (R), groen (G) en blauw (B) kanaal, evenals een alfa- of transparantiekanaal (A).

De browser stelt 256 waarden (tints) in voor elk kanaal, wat bij conversie 8 bits per kanaal (2^8 = 256) en 4 bytes per pixel (4 kanalen x 8 bits = 32 bits = 4 bytes) kost. Dus als we de afmetingen van het raster kennen, kunnen we eenvoudig de bestandsgrootte berekenen:

• Afbeelding 100 x 100 pixels. bestaat uit 10.000 pixels
• 10.000 pixels x 4 B = 40.000 B
• 40.000 B / 1024 = 39 KB

Het lijkt misschien dat 39 KB niet veel is voor een afbeelding van 100x100 pixels. Naarmate de grootte toeneemt, zal het bestand echter veel meer wegen en zal het veel tijd en middelen kosten om het te downloaden. Deze afbeelding is momenteel niet gecomprimeerd. Wat kan er worden gedaan om de omvang ervan te verkleinen?

Een eenvoudige manier om een ​​afbeelding te optimaliseren, is door de kleurdiepte te verlagen van 8 bits per kanaal door een palet te kiezen kleiner. Door de diepte in te stellen op 8 bits per kanaal krijgen we 256 waarden per kanaal en 16.777.216 (2563) kleuren. Misschien moeten we het palet terugbrengen tot 256 kleuren? Dan hebben we maar 8 bits nodig voor alle RGB-kanalen en slechts 2 bytes per pixel, niet 4 zoals voorheen. Het is ons gelukt om de afbeeldingen twee keer te comprimeren!

Laten we na het optimaliseren van de gegevens in afzonderlijke pixels aandacht besteden aan aangrenzende pixels. Het blijkt dat de kleur van dergelijke pixels in veel afbeeldingen, vooral foto's, vaak vergelijkbaar is. Hierdoor kan de compressor delta-codering toepassen. In plaats van te sparen individuele waarden voor elke pixel kunt u alleen het verschil tussen aangrenzende pixels specificeren. Als ze hetzelfde zijn, dan is de delta nul en hoeven we maar één bit op te slaan. Maar dat is niet alles!

We merken het verschil in sommige tinten vaak niet, dus we kunnen de afbeelding optimaliseren door het palet voor deze kleuren te verkleinen of te vergroten. Elke pixel in een 2D-raster heeft meerdere buren, dus we kunnen de deltacodering verbeteren. Focus niet op de directe buren van een pixel, maar op hele blokken van vergelijkbare kleuren en codeer ze met verschillende instellingen.

Zoals u kunt zien, wordt beeldoptimalisatie steeds ingewikkelder en interessanter. Er is veel wetenschappelijk en commercieel onderzoek naar dit onderwerp omdat afbeeldingen grote bytes zijn en het gunstig is om nieuwe compressietechnieken te ontwikkelen. Als je meer wilt weten, lees of bekijk dan de specifieke voorbeelden in .

Dus hoe helpen al deze complexe dingen ons bij het optimaliseren van afbeeldingen? Nogmaals, we hoeven geen nieuwe compressiemethoden uit te vinden. We moeten ons echter bewust zijn van de belangrijkste aspecten van de vraag: RGBA-pixels, kleurdiepte en verschillende technieken optimalisatie. Dit is nodig om over rasterformaten te blijven praten.

Lossy en lossless datacompressie

TL;DR

• Gezien de kenmerken menselijke visie, kan datacompressie met verlies worden toegepast op afbeeldingen.
• Om het beeld te optimaliseren, wordt lossy en lossless datacompressie gebruikt.
• Het verschil in afbeeldingsformaten zijn de verschillen in hoe en welke algoritmen deze compressies gebruiken om de omvang van de bron te verkleinen.
• Er is geen instelling voor het beste formaat of de beste kwaliteit die voor alle afbeeldingen werkt. Wanneer we verschillende compressoren en middelen combineren, zullen we nooit hetzelfde resultaat krijgen.

Voor bepaalde soorten gegevens, zoals paginabroncode of uitvoerbaar bestand, is het absoluut noodzakelijk dat de compressor de originele informatie niet verwijdert of wijzigt. Een ontbrekend of onjuist stukje gegevens kan de betekenis van de inhoud van het bestand volledig beschadigen of vernietigen. Andere soorten gegevens kunnen echter ook bij benadering worden doorgegeven.

Vanwege de eigenaardigheden van het menselijk zicht, merken we misschien niet de afwezigheid van informatie over elke pixel, we zullen bijvoorbeeld het verschil tussen sommige kleurtinten niet zien. Daarom kunnen we minder bits gebruiken om sommige kleuren te coderen en zo de omvang van de bron te verkleinen. Standaard beeldoptimalisatie bestaat dus uit twee hoofdfasen:

1. Beeldcompressie [lossy](http://en.wikipedia.org/wiki/Losy_data_compression) , waardoor enkele pixelgegevens worden verwijderd.
2. [Lossless](http://en.wikipedia.org/wiki/Lossless_compression) beeldcompressie, die pixelgegevens comprimeert.

De eerste stap is optioneel. Het exacte algoritme hangt af van het specifieke afbeeldingsformaat, maar houd er rekening mee dat elke afbeelding kan worden gecomprimeerd met verlies van gegevens. In feite is het verschil tussen afbeeldingsformaten zoals GIF, PNG, JPEG, enz. precies de combinatie verschillende algoritmen lossy en lossless datacompressie.

Wat is de beste manier om lossy en lossless compressie te combineren? Dit is afhankelijk van de afbeelding zelf en andere omstandigheden zoals de balans tussen bestandsgrootte en ruis. Om een ​​helder, gedetailleerd beeld te krijgen, kunt u ervoor kiezen om geen compressie met verlies te gebruiken. Als bestandsgrootte belangrijker voor u is, kunt u deze optimalisatiemethode gebruiken. Er is niet één instelling voor alle afbeeldingen. U moet zelf het gewenste resultaat bepalen en een beslissing nemen.

Als u compressie met verlies gebruikt, zoals JPEG, kunt u kwaliteitsinstellingen kiezen (zoals de schuifregelaar Opslaan voor web in Adobe Photoshop). Dit is meestal een waarde tussen 1 en 100, die bepaalt of lossy of lossless compressiealgoritmen worden toegepast. Wees niet bang om de kwaliteit te verlagen: vaak ziet de afbeelding er nog steeds goed uit en is de bestandsgrootte veel kleiner.

De beeldverhouding selecteren

TL;DR

• Kies het juiste standaardformaat: GIF, PNG of JPEG.
• Probeer verschillende instellingen in te stellen voor elk formaat (kwaliteit, paletgrootte, enz.) en kies degene die het beste bij u past.
• Voeg voor moderne klanten bronnen toe in WebP- en JPEG XR-geschaalde afbeeldingen:
• Beeldschaling is een van de eenvoudigste en meest effectieve optimalisatietechnieken.
• Als u grote afbeeldingen gebruikt, kan de gebruiker extra gegevens downloaden.
• Verminder het aantal onnodige pixels door uw afbeeldingen te schalen naar hun weergavegrootte

Naast lossy en lossless compressie-algoritmen, ondersteunen afbeeldingsindelingen andere functies, zoals animatie en een transparantiekanaal (alfakanaal). Dus bij het kiezen van het juiste formaat moet u rekening houden met de gewenste visueel effect en vereisten voor de site of toepassing.

Er zijn er drie standaard formaat afbeeldingen: GIF, PNG en JPEG. Daarnaast ondersteunen sommige browsers de nieuwe WebP- en JPEG XR-formaten, waarvoor meer compressie en extra functies beschikbaar zijn. Dus welk formaat moet je kiezen?

1. Moet de afbeelding worden geanimeerd? Kies vervolgens het GIF-formaat.
2. Het GIF-kleurenpalet bestaat uit slechts 256 kleuren. Dit is niet genoeg voor de meeste afbeeldingen. Bovendien comprimeert het PNG-8-formaat afbeeldingen beter met een klein palet. Kies dus alleen GIF als je animatie nodig hebt.
3. Wilt u alle fijne details in de hoogste resolutie opslaan? Gebruik PNG.
4. Het PNG-formaat gebruikt geen compressie met verlies, behalve voor de keuze van de paletgrootte. Hierdoor wordt de afbeelding opgeslagen in de van hoge kwaliteit, maar weegt veel meer dan bestanden van andere formaten. Gebruik dit formaat alleen waar nodig.
5. Als de afbeelding uit geometrische vormen bestaat, converteer deze dan naar vector (SVG-) formaat!
6. Vermijd tekst in afbeeldingen. Het kan niet worden geselecteerd, gevonden of vergroot. Als er tekst nodig is om een ​​ontwerp te maken, gebruik dan weblettertypen.
7. Ben je bezig met het optimaliseren van een foto, screenshot of soortgelijk type afbeelding? Gebruik JPEG.
8. JPEG gebruikt een combinatie van lossy en lossless compressie om de bestandsgrootte te verkleinen. Probeer verschillende niveaus van JPEG-kwaliteit in te stellen om de beste combinatie van kwaliteit en afbeeldingsgrootte te vinden.

Nadat u het juiste formaat en de bijbehorende instellingen voor alle items hebt bepaald, voegt u een extra optie toe aan WebP en JPEG XR. Dit zijn nieuwe formaten die nog niet in alle browsers worden ondersteund. Het gebruik ervan kan de bestandsgrootte echter aanzienlijk verkleinen. WebP comprimeert bijvoorbeeld een afbeelding meer dan JPEG.

Aangezien WebP en JPEG XR niet in alle browsers worden ondersteund, moet u extra logica aan toepassingen of servers toevoegen om de juiste bron naar de gebruiker te sturen.

• Sommige content delivery-netwerken bieden beeldoptimalisatiediensten, waaronder de levering van bestanden in JPEG XR en WebP.
• Sommige open source-tools, zoals PageSpeed ​​​​voor Apache en Nginx, optimaliseren, transformeren en leveren automatisch de juiste bronnen.
• U kunt extra applicatielogica toevoegen om de client en de ondersteunde formaten te definiëren en vervolgens verzenden beste optie bron.

Houd er rekening mee dat als u Webview gebruikt om inhoud naar een native app weer te geven, u de volledige controle over de client hebt en alleen WebP gebruikt. IN Facebook-apps, Google+, enz., worden WebP-bronnen gebruikt omdat ze de prestaties echt verbeteren. Voor meer informatie over dit formaat, zie de presentatie WebP: Snellere, kleinere en mooiere afbeeldingen implementeren van Google I/O 2013.

Hulpmiddelen en opties

Er is niet één perfect formaat, hulpmiddel of optimalisatie-algoritme dat bij alle afbeeldingen past. Verkrijgen beste resultaat, moet u het formaat en de instellingen kiezen afhankelijk van de inhoud, evenals visuele en technische vereisten.

Wees niet bang om te experimenteren met compressorinstellingen. Stel verschillende kwaliteitsinstellingen in, kies de juiste optie en pas deze toe op andere vergelijkbare afbeeldingen op de site. Maar onthoud: niet alle grafische bronnen hoeven met dezelfde methode te worden gecomprimeerd!

Verzonden afbeeldingen schalen

TL;DR

De afbeeldingsgrootte is de som van de pixels vermenigvuldigd met het aantal bytes dat is gebruikt om elke pixel te coderen. Beeldoptimalisatie komt neer op het verminderen van deze twee componenten.

Een van de eenvoudigste en meest effectieve optimalisatiemethoden is dus ervoor te zorgen dat de grootte van de ingediende afbeelding niet groter is dan de weergegeven grootte in de browser. Niets ingewikkelds, maar veel sites committeren zich ernstige fout. Ze hosten grote bronnen en de browser moet ze schalen en weergeven met een lagere resolutie. Dit verhoogt onder andere de belasting van de processor van de gebruiker.

Door extra pixels te sturen en de browser de bron zelf te laten schalen, missen we de kans om het aantal bytes dat nodig is om de pagina weer te geven te optimaliseren. Merk op dat schalen niet alleen het aantal pixels vermindert, maar ook de oorspronkelijke grootte van de afbeelding verandert.

Merk op dat in alle drie de gevallen de weergegeven grootte slechts 10 pixels kleiner is dan de oorspronkelijke grootte. Hoe groter de aanvankelijke grootte van de afbeelding, hoe meer extra gegevens er moeten worden gecodeerd en verzonden. Zelfs als u er niet in slaagt om de exacte overeenkomst tussen het origineel en de weergegeven formaten in te stellen, je moet het aantal onnodige pixels zoveel mogelijk verminderen.

Lijst met optimalisatiemethoden

Beeldoptimalisatie is zowel een wetenschap als een kunst. We kunnen het kunst noemen omdat niemand een definitief antwoord kan geven over hoe een bepaald beeld het beste kan worden gecomprimeerd. Dit is echter ook wetenschap, omdat we technieken en algoritmen tot onze beschikking hebben ontwikkeld die de omvang van de bron aanzienlijk kunnen verminderen.

Houd rekening met enkele tips en technieken om u te helpen uw afbeeldingen te optimaliseren:

• Kies afbeeldingen in vectorformaten. Hun kwaliteit is niet afhankelijk van resolutie en schaal, dus ze zijn geschikt voor grote schermen en verschillende soorten apparaten.
• Verklein en comprimeer SVG-bronnen. Veel grafische toepassingen voeg XML-opmaak toe, die vaak onnodige metadata bevat. Het kan worden verwijderd. Zorg ervoor dat op uw servers GZIP-compressie is geconfigureerd voor SVG-bronnen.
• Kies de meest geschikte rasterformaten. Bepaal de vereiste afbeeldingsvereisten en selecteer gewenste formaat voor elke bron.
• Probeer verschillende kwaliteitsinstellingen voor bitmapformaten. Wees niet bang om de kwaliteit te verlagen: vaak ziet de afbeelding er nog steeds goed uit en is de bestandsgrootte veel kleiner.
• Verwijder onnodige metadata. Veel bitmaps bevatten extra informatie over de bron: geodata, camera-informatie, enz. Gebruik de juiste tools om ze te verwijderen.
• Schaal uw afbeeldingen. Verklein bestanden op de server zodat de originele en weergegeven grootte bijna hetzelfde zijn. Besteed speciale aandacht aan grote afbeeldingen. Als de browser ze schaalt, worden de prestaties van uw site aanzienlijk verminderd.
• automatiseren. Gebruik betrouwbare tools en software die de afbeeldingen op uw site automatisch optimaliseren.

Tenzij anders vermeld, is de inhoud van deze pagina gelicentieerd onder de Creative Commons Attribution 3.0-licentie en codevoorbeelden zijn gelicentieerd onder de Apache 2.0-licentie. Voor details, zie onze . Java is een gedeponeerd handelsmerk van Oracle en/of zijn gelieerde ondernemingen.

Bijgewerkt op 8 augustus 2018