▷ Een AFBEELDING COMPRESSEREN in PHOTOSHOP

Het hebben van een website is niet alleen gebaseerd op het ongecontroleerd uploaden van inhoud, u moet zorgen voor de structuur van het web, inclusief elk element dat we erop hosten. Er moet rekening mee worden gehouden dat het toegankelijk is via internetverbindingen en dat, hoewel er op veel plaatsen hoge snelheden zijn, ze op andere nog wat achterblijven. Dit alles zonder rekening te houden met het belang van het mobiele thema en de kosten van megabytes. Daarom is het comprimeren van afbeeldingen zonder verlies van Photoshop-kwaliteit een zeer gewilde taak van makers die in het belang van de gebruikers denken.

Wat we niet moeten doen, is van onze website een langzame ruimte maken die mensen niet opnieuw willen betreden, iets dat we kunnen vermijden als we rekening houden met verschillende elementen en leren om afbeeldingen te comprimeren in Photoshop. Een daarvan en heel belangrijk is het uploaden van afbeeldingen. Als je een site hebt met veel visuele inhoud, moet je er zowel van binnen als van buiten voor zorgen door Photoshop-afbeeldingen te comprimeren en de pagina veel sneller te laten gaan.

De snelheid van onze website is essentieel voor de gebruikerservaring, aangezien het niet hetzelfde is om een ​​snelle pagina te openen die geen invloed heeft op onze verbinding met een website waar alle objecten die we zien heel langzaam laden. Om de afbeeldingen te zien, moeten ze bovendien naar de server worden gedownload, dus hoe hoger het volume, hoe langer het laden duurt en de gebruiker zal waarschijnlijk wanhopen en vertrekken. Vandaar het belang van het bewerken van afbeeldingen in Photoshop en het verbeteren van onze website of gewoon onze ruimte door te weten hoe afbeeldingen in Photoshop kunnen worden gecomprimeerd.

Als u zeer zware afbeeldingen uploadt, zal uw pagina traag zijn en zullen gebruikers moe worden en vertrekken. Als je bezoeken wilt vermijden, zorg dan voor alles wat je uploadt en leer hoe je een afbeelding comprimeert in Photosho door de grootte te verkleinen.

1. Soorten afbeeldingsindelingen in Photoshop

Om over beeldoptimalisatie te praten, moeten we onderscheiden welk type afbeeldingsformaat we hebben en welke het beste voor ons is.

JPEG.webp-indelingVoor algemeen fotografiegebruik is dit het standaardformaat dat wordt gebruikt met resultaten van goede kwaliteit. Ondersteunt 24-bits kleuren.

PNG-8-indelingHet is het alternatief voor GIF.webp maar zonder animaties en kan tot 256 kleuren weergeven. De compressie voor het web is een van de meest geschikte, waardoor een goede kwaliteit met kleinere afmetingen mogelijk is.

PNG-24-indelingHet is een goede optie om kwaliteitsafbeeldingen te exporteren, net als JPEG.webp. Dit type extensie is handig wanneer we een afbeelding hebben die transparantie bevat. Het geeft ook tot 16 miljoen kleuren weer omdat het 24-bits kleuren ondersteunt.

GIF.webp-formaatHet is het formaat voor animaties bij uitstek. Vertegenwoordigt tot 256 kleuren in de vorm van grote hoeveelheden effen kleuren, lijnen of tekst.

Voor deze tutorial zullen we twee van de meest bruikbare en gebruikte formaten kiezen voor het uploaden van afbeeldingen naar het web: JPEG.webp en PNG-8.

2. Een afbeelding comprimeren in Photoshop

Wanneer we in een werkruimte in Photoshop werken, doen we dat volgens bepaalde parameters afhankelijk van de afbeelding of van algemene aard. Een daarvan is de grootte, de verhoudingen van het beeld waarmee we werken. De grootte van een afbeelding komt overeen met het aantal pixels dat het verticaal en horizontaal bevat, waardoor de grootte van de afbeelding ontstaat.

Wat we resolutie noemen, betekent het aantal stukjes informatie in een specifieke ruimte, die pixels per inch of dpi wordt genoemd. Dit betekent dat hoe hoger het aantal pixels per inch, onze resolutie hoger zal zijn.

Nadat beide aspecten zijn onderscheiden, moet worden opgemerkt dat twee afbeeldingen dezelfde grootte kunnen hebben, maar verschillende resolutie en verhoudingen. Als het afbeeldingen voor het web zijn, wordt aanbevolen om de formaten in pixelgrootte te behandelen. Om toegang te krijgen, ga naar Afbeelding / Afbeeldingsgrootte of druk op de volgende combinatie.

Ctrl + Alt + I

OpmerkingMet de optie Resample afbeelding kunnen we de grootte wijzigen zonder de resolutie te wijzigen. Selecteer de meest geschikte optie voor wat u nodig heeft.

3. Photoshop-kleurprofiel wijzigen

De kleurruimte waarin we werken heeft ook invloed op het uiteindelijke bestand. Er is om het verschil tussen sRGB- en RGB-ruimte te noemen. Het Adobe RGB-systeem werd in 1998 door het bedrijf geïntroduceerd en stelt een veel breder kleurenspectrum samen dan de sRGB-ruimte. Dit betekent niet dat het erger is, maar dat ze toegewijd zijn aan verschillende doelen.

Het RGB-systeem staat met zijn spectrum dichter bij dat van CMYK, dat is gericht op de printwereld. Ondanks dat er meer kleuren zijn, is de standaard die digitaal wordt gedistribueerd in apparaten, of het nu mobiele telefoons, monitoren of een ander digitaal apparaat zijn, die van sRGB. Wanneer een van deze apparaten RGB tegenkomt, probeert het de overtollige kleuren te comprimeren en creëert het een valse sRGB met slechtere resultaten.

Stap 1
Daarom wordt aanbevolen om de foto's, werkruimte in Photoshop te maken of ze te optimaliseren met dit systeem om de kleurcompatibiliteit te verbeteren. Om het werkende kleurprofiel te wijzigen, gaat u naar uw menu Bewerken en selecteert u Converteren naar profiel.

Stap 2
In het volgende venster hoef je alleen maar het profiel te kiezen dat je nodig hebt, in dit geval sRGB.

4. Comprimeer de afbeelding zonder de Photoshop-kwaliteit te verliezen

Het JPG.webp-formaat is de meest gebruikte standaard en hoewel het compressie toestaat, biedt het niet zoveel bewerkbare parameters als PNG. We kunnen het uiteindelijke gewicht van onze afbeelding variëren door het formaat van onze foto te wijzigen of bij het exporteren.

Stap 1
Bij het opslaan als JPEG.webp zien we dat we twee opties hebben, enerzijds de beeldopties (kwaliteit) configureren en anderzijds de formaatopties. Ga hiervoor naar het menu Bestand / Opslaan als of de volgende combinatie en selecteer het JPEG.webp-formaat.

Shift + Ctrl + S

Stap 2
Deze configuratieparameters verschijnen in het volgende venster. Laten we eens kijken wat elk betekent.

AfbeeldingsoptiesHier moeten we de uiteindelijke kwaliteit van de afbeelding kiezen, het is duidelijk dat hoe hoger de kwaliteit, hoe groter de bestandsgrootte, om te kunnen zien wat het uiteindelijk zal innemen als we op Voorbeeld klikken. Verplaats de balk om deze waarden te kunnen wijzigen.

Als we willen dat een foto op posterformaat wordt afgedrukt, moeten we een veel hogere kwaliteit selecteren dan wanneer we een afbeelding voor het web willen. Onthoud dat hoe groter de afbeelding, hoe meer middelen er nodig zijn om deze via internet te laden.

OpmaakoptiesBinnenin vinden we verschillende alternatieven om het uiteindelijke formaat aan onze afbeelding te geven. Het meest aanbevolen is de standaardbasislijn, omdat deze meestal het meest compatibel is.

• Basislijn ("Standaard"). Het maakt gebruik van een formaat dat herkenbaar is voor de overgrote meerderheid van webbrowsers en programma's. Momenteel geven de nieuwste programma's meestal geen incompatibiliteit.

• Geoptimaliseerde basislijn. Met deze indeling wordt een afbeeldingsbestand gemaakt dat geoptimaliseerde kleuren bevat, waardoor u een kleiner formaat krijgt.

• Progressief. Met deze optie worden verschillende versies getoond die steeds gedetailleerder worden naarmate ze worden gedownload. Het is de gebruiker die bepaalt hoeveel er worden aangemaakt. Het is een formaat dat werd gebruikt en veel wordt gebruikt als we naar langzame verbindingen gaan waarvoor sweeps-sweeps moeten worden geladen.

OpmerkingOpgemerkt moet worden dat niet alle browsers JPEG.webp-afbeeldingen gaan herkennen of ondersteunen die progressief of geoptimaliseerd zijn.

5. Comprimeer PNG-afbeeldingen in Photoshop

Stap 1
Om te exporteren als PNG moeten we dezelfde eerste stap doen als bij de andere formaten, ga naar Bestand Menu / Opslaan als en selecteer in dit geval PNG.

Stap 2
Nu zul je in het opslagvenster zien dat er verschillende opties verschijnen.

CompressieWe kunnen het type compressie selecteren dat we willen of niets zeggen als we niet willen dat het wordt toegepast. Afhankelijk van de keuze wordt de laadsnelheid verhoogd of verlaagd.

WevenDeze optie is belangrijk, vooral als we het hebben over webplatforms. Laten we eens kijken naar het verschil:

• Geen van beide. Met deze optie kan een afbeelding alleen worden weergegeven als deze volledig is geladen, dat wil zeggen, als we een trage of probleemverbinding hebben, wordt de afbeelding pas weergegeven als deze is geladen in de internetoverdracht.

• Met elkaar verweven. Deze optie wordt meer aanbevolen voor webservices, omdat deze tijdens het laden verkleinde versies van de afbeelding toont. Dit helpt het downloadproces kleiner te maken en de gebruiker weet ook dat de afbeelding wordt gedownload.

6. JPG.webp-afbeeldingen opslaan voor Photoshop-web

Stap 1
Een van de voordeligste opties die we in Photoshop hebben voor beeldoptimalisatie is Opgeslagen als een web, waarmee we verschillende parameters handmatig kunnen aanpassen. Deze opslag is erg handig voor afbeeldingen die zijn bedoeld voor uploaden naar het web, waardoor afbeeldingen van hoge kwaliteit mogelijk zijn, maar met een kleiner formaat. Hiervoor gaan we Bestand / Opslaan voor web of doen de volgende combinatie.

Alt + Shift + Ctrl + S

Stap 2
Als we JPEG.webp willen selecteren, hebben we deze instellingen.

BeeldkwaliteitSelecteer uw gewenste beeldkwaliteit van Laag tot Maximaal of met de waarden aan de rechterkant. U kunt de groottevariatie onder de afbeelding aan de linkerkant zien.

ProgressiefDe afbeelding wordt beetje bij beetje geladen, dat wil zeggen, we gaan van de weergave in lage resolutie naar de echte.

geïnterlinieerdGeeft de afbeelding alleen weer als deze volledig is geladen.

HaloAls de afbeelding transparant is, selecteert u een halokleur die overeenkomt met de achtergrond van de pagina waar deze wordt ingesloten.

Kleurprofiel insluitenSelecteer deze optie om het ICC-profiel van de afbeelding te behouden, sommige webbrowsers gebruiken het om de kleur te corrigeren.

Converteren naar sRGBGebruik dit profiel om de kleurcompatibiliteit op apparaten en monitoren te verbeteren.

Je hebt andere opties zoals voorbeeldmodus, metadata of formaat wijzigen met of zonder beperking.

7. PNG-afbeeldingen opslaan voor web-Photoshop

Stap 1
Zoals we al weten om toegang te krijgen tot Saved for Web in PNG, moeten we naar Bestand / Opslaan voor web gaan. Onthoud dat dit formaat erg goed is voor afbeeldingen met een webbestemming, aangezien het resultaat een zeer goede relatie geeft tussen kwaliteit en bestandsgewicht.

Stap 2
Om als PNG te exporteren, selecteert u het in het vervolgkeuzemenu. Onthoud dat PNG 24 meer kleur biedt, dus de formaten zijn veel groter dan die van PNG-8. Dit laatste raden we aan voor standaard webafbeeldingen. Het venster dat verschijnt is vergelijkbaar met dat van JPEG.webp en naast de opties die we al in de vorige sectie hebben gezien, kunnen we ook kiezen:

TransparantieHier kunt u het type transparantie selecteren dat het beste bij uw afbeelding past of deze verwijderen en een specifieke kleur selecteren met Halo.

Aanpassen aan internetMet deze parameter kan de afbeelding verder worden gecomprimeerd, hoe hoger het aanpassingspercentage, hoe hoger de compressie, hoe lager de kwaliteit en hoe kleiner het formaat.

8. Afbeeldingen opslaan voor Photoshop-web

Stap 1
Om een ​​automatische compressie voor zowel PNG als JPEG.webp te kunnen uitvoeren, openen we de save for web in File / Save for Web of de volgende toetsencombinatie.

Alt + Shift + Ctrl + S

Stap 2
Klik rechts van de optie Voorinstellingen op het menutabblad dat verschijnt en selecteer Optimaliseren naar bestandsgrootte.

Stap 3
Nu hoef je alleen maar de grootte van de afbeelding te selecteren die je wilt hebben en het programma zal automatisch de compressie voor je uitvoeren. U kunt de waarden variëren om verschillende resultaten te verkrijgen.

Stap 4
U kunt ook naar het venster met de naam 4 exemplaren gaan en daar een van de aan u verstrekte versies selecteren en opslaan.

Stap 5
Als u de grootte en overdrachtssnelheid wilt wijzigen, klikt u op de waarden onder de afbeelding en selecteert u ze automatisch.

Zoals u kunt zien, zijn er verschillende manieren om de grootte van uw afbeeldingen te verkleinen, afhankelijk van hun doel. Er zijn veel parameters waarmee u rekening moet houden, maar afhankelijk van het niveau dat u nodig hebt, is de een of de ander nuttiger om te weten hoe u een Photoshop-afbeelding kunt comprimeren. In de volgende video laten we u grafisch zien hoe u afbeeldingen op een eenvoudige en complete manier kunt optimaliseren en comprimeren. Als u een snelle compressie wilt, is de eerste methode goed voor u en als u op zoek bent naar iets complexers waarbij u alle parameters kunt bewerken, is uw methode de tweede.