Bewaar voor internet en apparaten in Adobe Photoshop CS5. Een afbeelding voorbereiden en de grootte ervan aanpassen voor internet

Module Opslaan voor internet en apparaten(Save for Web & Devices), wat uw werk aanzienlijk vereenvoudigt, meer flexibiliteit biedt en beste kwaliteit Converteer afbeeldingen naar GIF-, JPEG- en PNG-formaten. Het hoofdvenster van de module wordt getoond in Fig. 15.10. Het wordt geopend met dezelfde opdracht vanuit het menu Bestand(Bestand). Voer deze opdracht uit voor het bestand BAS-RELIEF1_ON_SINGER_HOUSE.jpg.

Rijst. 15.10. Dialoogvenster Opslaan voor internet en apparaten(tab 4-op-1)

Het grootste deel van het venster wordt ingenomen door het voorbeeldgebied. Het kan zich in een van de vier modi bevinden, ingesteld met behulp van tabbladen:

± Origineel(Origineel). Origineel beeld.

± Geoptimaliseerd(Geoptimaliseerd). Weergave van de afbeelding na optimalisatie. Dit is precies hoe het er in de browser uit zal zien.

± 2-op-1(Twee). Gelijktijdig bekijken van de originele en geoptimaliseerde uitvinding. Beide vensters in het weergavegebied kunnen echter het geoptimaliseerde beeld weergeven, maar met verschillende parameters optimalisatie.

± 4-op-1(Vier). In deze modus is het weergavegebied verdeeld in vier vensters, waarin u een demonstratie van de originele en geoptimaliseerde afbeeldingen kunt bestellen verschillende parameters optimalisatie. Deze modus is handig om te selecteren beste parameters. Hiermee kunt u de impact van compressie of paletreductie op de beeldkwaliteit en -grootte visueel evalueren.

Het regelen van de weergaveschaal in het weergavegebied is op dezelfde manier georganiseerd als in Photoshop zelf: met behulp van de schaallijst in de linkerbenedenhoek van het venster en de hulpmiddelen Zoom(Schaal) en Hand(Hand).

Onder elk weergavegebiedvenster worden het afbeeldingsbestandsformaat (GIF, JPEG of PNG), optimalisatieparameters, bestandsgrootte en de tijd die nodig is om het met een bepaalde modemsnelheid naar de browser te downloaden aangegeven. Selecteer het in het weergavemenu dat wordt geopend door op te drukken ronde knop met een driehoekige pijl. Daar vindt u ook kleurenweergaveopties:

± Browser-dithering(Vloeiende overgang van kleuren in de browser). Als de afbeelding meer kleuren bevat dan de monitor kan weergeven, worden deze in de browser bij benadering weergegeven als u het selectievakje inschakelt.

± Automatisch segmenteren verbergen(Verberg de verdeling in fragmenten). Wordt gebruikt voor afbeeldingen die in fragmenten worden “geknipt”.

± Niet-gecompenseerde kleur(Geen aanpassingen). Kleuren worden in het weergavegebied weergegeven "zoals ze zijn", zonder correcties.

± Standaard Windows-kleur(Standaard Windows-kleuren). Dit is hoe kleuren worden weerspiegeld op de monitoren van computers met Windows.

± Standaard Macintosh-kleur(Macintosh-standaardkleuren). Op Macintosh-computers Afbeeldingen lijken iets lichter omdat Mac OS een andere gammawaarde (1,8) gebruikt dan Windows (2.2). Als u deze optie selecteert, krijgt u een idee van hoe de afbeelding eruit zal zien voor Macintosh-gebruikers.

± Gebruik documentkleurprofiel(Gebruik documentprofiel). Het uiterlijk van de uitvinding wordt aangepast in overeenstemming met de kleurbeheersysteeminstellingen gemaakt in Photoshop.

In hetzelfde weergavegebied kunt u de parameters opgeven van de modem die u gebruikt.

Laten we dit commando in actie proberen op een bas-reliëfafbeelding uit het bestand BAS-RELIEF2_AT_HOME_ZINGER.jpg.

1. Open het bestand BAS-RELIEF2_AT_SINGER_HOUSE.jpg.

2. Selecteer een team Opslaan voor internet en apparaten(Opslaan voor web en apparaten) in het menu Bestand(Bestand).

3. Selecteer modus 2-op-1(Twee) door naar het juiste tabblad te gaan (Fig. 15.11).

Rijst. 15.11. Dialoogvenster Opslaan voor internet en apparaten(tab 2-op-1)

4. Aan de rechterkant van het venster bevinden zich bedieningselementen voor exportparameters. Op de lijst Voorinstelling(Aanbevolen instellingen) selecteer het opslagformaat JPEG-medium(Afb. 15.12).

5. Lijst Voorinstelling(Voorgestelde instellingen) biedt verschillende typische waarden voor beeldkwaliteit: JPEG Hoog(Hoog) JPEG Laag(Laag), JPEG-medium(Gemiddeld). Fijne aanpassingen worden gemaakt met behulp van de schuifregelaar Kwaliteit(Kwaliteit), gelegen aan de rechterkant. Installeer het eerst met behulp ervan maximale kwaliteit, 100%. Met zulke hoge waarde het beeld aan de rechterkant van het weergavegebied (geoptimaliseerd) verschilt praktisch niet van het origineel aan de linkerkant. Verlaag de beeldkwaliteit met

schuifregelaar Kwaliteit(Kwaliteit) tot 15-18%. Kijk eens naar informatievelden in de juiste delen van het kijkgebied. De originele, ongecomprimeerde afbeelding neemt 3,21 MB in beslag en de gecomprimeerde afbeelding neemt 109 KB in beslag. Toch lage coëfficiënt compressie levert bijna vier keer de winst in bestandsgrootte op.

6. Bekijk de geschatte laadtijd gecomprimeerde afbeelding. Bij een modemsnelheid van 28,8 KB/s duurt dit 40 seconden. Stel je nu voor dat je een lezer bent van een webpagina met vijf van dergelijke afbeeldingen. Wil je wachten tot de hele pagina is geladen? Hoogstwaarschijnlijk niet. Om de lezer vast te houden, moet je afbeeldingen zo compact mogelijk maken. In het geval van het JPEG-formaat hoeft u alleen maar de kwaliteit te verlagen door de compressieverhouding te verhogen. Stel de schuifregelaar in Kwaliteit(Kwaliteit) ligt dichter bij de linkerrand. Het is duidelijk dat de kwaliteit is verslechterd en dat er een karakteristiek "vuil" is verschenen. Maar is het echt zo erg?

7. Laten we nu nog een paar seconden spelen voor de lezer van de webpagina. De compressieverhouding kan worden verhoogd door het beeld vooraf te vervagen. Schuifregelaar Vervagen(Vervaging) in gebied Voorinstelling(Voorgestelde instellingen) elimineert de noodzaak om het exportfiltervenster te verlaten. Uiteraard mag de kloof niet te groot zijn, zodat de beeldkwaliteit er niet onder lijdt. Een waarde van 0,2 voldoet volledig aan deze eis.

8. Selectievakje Progressief(Geleidelijk) stelt in dat de afbeelding wordt geïnterlinieerd wanneer deze in de browser wordt geladen. Het vergroot de bestandsgrootte enigszins, maar stelt de lezer van de pagina ook in staat zelf te bepalen of het de moeite waard is om te wachten tot deze is geladen. Installeer het.

9. Selectievakje ICC-profiel(ICC-profiel) stelt u in staat een afbeelding in een bestand in te sluiten kleur profiel. Vink dit vakje alleen aan als u daar een zeer dwingende reden voor heeft, aangezien het ingebedde profiel de bestandsgrootte met 3-4 KB vergroot.

10. Selectievakje Geoptimaliseerd(Geoptimaliseerd) maakt aanvullende optimalisatie van de interne structuur van de JPEG mogelijk, waardoor de bestandsgrootte soms nog verder wordt verkleind. Bijwerking optimalisatie kan alleen van invloed zijn bij het gebruik van zeer oude versies van browsers. Alle nieuwe browsers verwerken dergelijke bestanden normaal.

11. Het is gemakkelijk om de juistheid van de gemaakte instellingen te controleren door de voltooide uitvinding in de browser te laden. Om dit te doen, hoeft u het venster van de escortmodule niet eens te verlaten. Klik op de knop Apparaat centraal(Device Center), en de module zal de radiotelefoonbrowser openen met de afbeelding erin geladen (Fig. 15.13). De achtergrondkleur van de pagina kan vooraf worden ingesteld met behulp van de lijst Mat(Achtergrondkleur van pagina).

Rijst. 15.13. Bekijk een voorbeeld van de geoptimaliseerde afbeelding in het browservenster

We hebben geleerd hoe we lettertypen in Photoshop kunnen laden. Ik raad iedereen die dit artikel nog niet heeft gelezen, aan er eens naar te kijken.

Vandaag gaan we verder met het leren van de basisprincipes van Photoshop, het onderwerp van de les van vandaag Hoe u foto's kunt voorbereiden voor internet. Misschien heb je meteen vragen over waarom en waarom je foto's voor internet moet maken? Je kunt het gewoon downloaden en dat is alles.

Ja inderdaad, in sommige gevallen kun je het gewoon downloaden en dat is alles, maar dit brengt veel problemen en ongemakken met zich mee. Hieronder heb ik gegeven 5 redenen waarom u foto's moet voorbereiden voor internet:

5 redenen om afbeeldingen voor te bereiden op WEB

Groot beeldgewicht. Als u bijvoorbeeld een foto op uw website plaatst die meerdere megabytes weegt, overbelast en verstoort u ten eerste het werk van uw server, en ten tweede duurt het laden van de pagina waarop u uw foto hebt geplaatst erg lang. En dit heeft grote invloed op het siteverkeer. Houd er rekening mee dat mensen niet graag sites bezoeken die traag zijn en er lang over doen om te laden.

Tijdens de lay-out van het webontwerp moeten alle elementen van de lay-out van de toekomstige site (afbeeldingen in .png- en .jpg-formaat) worden voorbereid voor internet. Zonder dit is lay-out onmogelijk;

Verkeerde proporties van de foto, wat tot vervorming leidt. Dit punt behoeft mijns inziens geen verduidelijking.

Hoog verlies aan beeldkwaliteit. Wanneer u uw nieuwe foto's bijvoorbeeld uploadt naar sociale netwerken of online veilingen, heeft u waarschijnlijk gemerkt dat ze niet zo duidelijk, kleurrijk of contrastrijk zijn als ze oorspronkelijk waren. Het punt is dat wanneer u uw afbeeldingen uploadt naar
Alle internetbronnen comprimeren en verslechteren automatisch de kwaliteit van uw afbeeldingen.

In sommige situaties moet u een afbeelding van een specifiek formaat en formaat uploaden. U moet bijvoorbeeld een pictogram van 16x16 pixels in het formaat uploaden .png voor uw site. Dit alles kan eenvoudig en eenvoudig in Photoshop worden gedaan.

Ons favoriete programma kan al deze taken perfect aan. Adobe Photoshop CC. De ontwikkelaars van Photoshop hebben een zeer nuttig en benodigde module met de functie om afbeeldingen op te slaan voor internet (Sparen voor Web ) .Dit is een krachtige module voor het beheren van de processen van documentoptimalisatie en -opslag, die automatisch selecteert optimale instellingen opgeslagen bestand. Deze module ondersteunt en werkt met de meest voorkomende bestandsformaten voor internet .jpg, .gif, .png.

De voordelen en het gemak van het gebruik van deze module zijn zulke nuttige en noodzakelijke functies als:

Selecteer meerdere weergavemodi terwijl u afbeeldingen optimaliseert voor internet

Het formaat selecteren waarin de afbeelding wordt opgeslagen

De kwaliteit en grootte van de opgeslagen afbeelding selecteren

het selecteren van de optimalisatiemethode, compressie en het bekijken van het gewicht van de geoptimaliseerde afbeelding.

Dit is waar de hele theorie eindigt, laten we verder gaan met de praktijk. Laten we eerst een afbeelding of foto openen die we voor internet bewaren. Ik ga met deze afbeelding werken:

Om verder te gaan met opslaan voor internet, gaat u naar bovenste menu Bestand/opslaan voor internet of gebruik sneltoetsen Ctrl+Alt+Shift+S.

Er zou een venster met instellingen voor ons moeten worden geopend, zoals weergegeven in de onderstaande schermafbeelding. Je hoeft niet bang te zijn grote hoeveelheid knoppen en instellingen, we zullen er slechts enkele gebruiken en hieronder in detailLaten we eens kijken waar ze voor zijn en hoe we ze kunnen gebruiken.

Beschrijving van opties:

1. Vier opties voor tabbladvoorbeelden.

- Origineel - dit is wanneer u uw originele afbeelding ziet

- Optimalisatie - dit is wanneer u alleen de geoptimaliseerde afbeelding in het voorbeeld ziet

- 2 Opties - dit is wanneer u uw originele afbeelding bovenaan ziet en de geoptimaliseerde afbeelding onderaan. Deze optie is het handigst en ik vind hem het leukst, daarom heb ik ervoor gekozen.

- 4 Opties - dit is wanneer je in de preview de originele afbeelding ziet, de afbeelding waarvoor je hebt geselecteerd, de afbeelding in kwaliteit 22 en de afbeelding in kwaliteit 11.

2. Opgeslagen bestandsformaat. In ons geval kiezen we voor JPEG.

-PNG — bestandsformaat voor het opslaan van webafbeeldingen. Er zijn twee typen: 8 bit - geïndexeerde afbeeldingen, 24 bit - "alle" kleuren. Meestal worden clipart en logo's op een transparante achtergrond in dit formaat opgeslagen.

- GIF - een verouderd bestandsformaat voor het opslaan van webafbeeldingen. Meestal worden bestanden met een beperkt aantal kleuren, tabellen, diagrammen en logo's in dit formaat opgeslagen; het formaat ondersteunt ook animatie en transparante achtergrond. Dit formaat wordt steeds minder gebruikt, omdat het steeds meer wordt beste formaat PNG.

- JPEG — Het meest populaire formaat. Perfect voor het opslaan van foto's en afbeeldingen met veel kleuren, tinten en effecten.

3. De betekenis van kwaliteit. Ik hou van "Hoog".

Gemiddeld

Hoog

Zeer hoog

De beste

4. Hier zetten we een vinkje in de waarde “ Optimalisatie « . Overweeg en focus op opties " Progressief " En " Ingebouwd profiel ", dat doen we niet omdat de meeste webbrowsers ze niet ondersteunen.

5. Vink het vakje aan om de optie “ Converteren naar sRGB «. Dit is nodig zodat onze afbeelding correct op de website wordt weergegeven en erin wordt opgeslagen kleur ruimte sRGB.

6. Wij exposeren juiste maat afbeeldingen. In mijn geval is het breedte 500 pixels, hoogte 281 pixels.

7. Grootte van de originele afbeelding.

8. Geoptimaliseerde afbeeldingsgrootte voor internet.

Ik denk dat je nu het onderwerp begrijpt Foto's voorbereiden voor internet in Photoshop en nu kun je het zelf doen. Onthoud dat de beste dankbaarheid voor de auteur bestaat uit likes en reposts sociale netwerken en reacties op de website Tot ziens in de volgende lessen!

Doel: het bestuderen van het bereidingsalgoritme grafische elementen webpagina's

Algemene suggesties voor het voorbereiden van afbeeldingen:

Grafische elementen moeten in het formaat worden gepresenteerd GIF of PNG.
Foto's moeten in het formaat worden ingediend JPEG.
Zorg voor afbeeldingen met een lage resolutie laden grote afbeeldingen.
Gebruik GIF-afbeeldingen met geïnterlinieerd formaat.
Specificeer attributen hoogte En breedte element afb.
Verminder de hoeveelheid animatie.
Gebruik waar mogelijk afbeeldingspictogrammen.
Zorg ervoor dat u "alternatieve" tekst maakt (attribuut alt)

Bij het plaatsen van een verloop op de achtergrond wordt een horizontaal of verticaal verloop geselecteerd en afhankelijk hiervan wordt slechts een dunne lijn van dit verloop uitgesneden. Wanneer ze in CSS worden geplaatst, worden de juiste achtergrondeigenschappen ingesteld ( zie afb. 1.1)

Rijst. 1.1. Achtergrondverloop in Photoshop

Voordat u een afbeeldingsbestand op een webpagina kunt gebruiken, moet u dit doen grafische editor maak het klaar voor plaatsing. Tegelijkertijd is het niet alleen belangrijk om te bepalen Photoshop-formaat afbeeldingen, maar bewaar ze ook correct: met behulp van dialoogvenster Bewaar voor internet en apparaten (zie afb. 1.2):

De dialoogvensterinstellingen instellen Bewaar voor internet en apparaten:

Optimalisatie en compressie voor gegeven maat bestand:

Rijst. 1.4. Optimalisatie en compressie tot een bepaalde bestandsgrootte

Laboratorium Photoshop-werk 1_1:

Open de afbeelding in Photoshop en selecteer "Bestand" ->.
In het dialoogvenster "Opslaan voor internet en apparaten" klik op tabblad "Geoptimaliseerd".
Op het menu "Stijl" selecteren « Lage kwaliteit JPEG".
Klik op tabblad "Beeldformaat".
Zorg ervoor dat de optie is ingesteld "Behoud proporties" en voer de breedte in. Geschikt formaat voor e-mail 400 pixels.
Klik op de knop "Redden". Voer een bestandsnaam en pad in om het bestand op te slaan. Zorg ervoor dat het menu "Formaat" optie geselecteerd "Alleen afbeeldingen". Klik op de knop "Redden".

JPEG-optimalisatieopties instellen

Voor plaatsing foto's van hoge kwaliteit, moet worden voorbereid Photoshop-afbeelding in JPEG-formaat:

Rijst. 1.5. JPEG-optimalisatieopties

Stel optimalisatieopties in voor GIF- en PNG-formaten

Rijst. 1.6. Optimalisatieopties voor GIF- en PNG-formaten

Photoshop Lab 1_2: JPEG-opslag

Openen in editor jpg-afbeelding formatteren (of downloaden) en roep het dialoogvenster op (Bewaar voor internet en apparaten) in het menu Bestand.
Selecteer een tabblad "Geoptimaliseerd" (Geoptimaliseerd)
Open de lijst "Optiesets" (Voorinstelling) en selecteer een van de 12 aangeboden opties - JPEG-medium(gemiddeld)
Evalueer de beeldkwaliteit en de uiteindelijke bestandsgrootte
Het kwaliteitsniveau kan grofweg worden ingesteld in het menu, of worden verfijnd met een schuifregelaar "Kwaliteit" (Kwaliteit): Verplaats de schuifregelaar naar 70 .
Optieselectievakje inschakelen "Geoptimaliseerd" (Geoptimaliseerd): hiermee kunt u de bestandsgrootte enigszins verkleinen in ruil voor beperkte compatibiliteit met oudere browsers.

Photoshop Lab 1_3: GIF opslaan

voor werk.
Van "lijst met formaten" selecteer artikel "GIF".
Selecteer (of typ) het aantal tinten in het veld "Kleuren" en zie hoe dit de afbeelding en de grootte van het uiteindelijke bestand beïnvloedt (set 90 )
Om het oorspronkelijke gamma van een afbeelding tot een bepaalde hoeveelheid te verkleinen, kunt u een van de 9 gebruiken beschikbare methoden kleurreductie. Selecteer een van de vier beste opties: installeren "Beperkend"
Kleuren mengen ( Dithering) compenseert gedeeltelijk de beperktheid van het kleurengamma door ontbrekende kleuren te ‘construeren’ uit een reeks beschikbare kleuren. Selecteer "Verspreiding" en verplaats de schuifregelaar Ditheren(mate van aantal halve tonen) per 80 .
Selecteer in de kleurentabel een van de kleuren (geel) door te dubbelklikken op de kleur en vervang deze door een andere tint. Om te selecteren kunt u gebruiken Pipet aan de linkerkant van het scherm.
Klik op de knop Klaar om optimalisatie-instellingen op te slaan in het originele document

Photoshop Lab 1_4: Gewogen optimalisatie

voor werk.
Open het bestand in een editor. Selecteer een fragment van de afbeelding (bloem) Rechte lasso of een ander hulpmiddel.
Sla de selectie op in een alfakanaal ( Selecteer → Selectie opslaan (Selectie → Selectie opslaan)). Geef het een naam (vul in het veld in Naam).
Open dialoog "Opslaan voor internet en apparaten", selecteer "JPEG" als uitvoerformaat en pas indien nodig het kwaliteitsniveau aan.
Klik op de knop "masker" naast het veld "Kwaliteit". Er wordt een dialoogvenster geopend.
Selecteer uit het menu "Kanaal" het alfakanaal dat u zojuist hebt opgeslagen. Instellen "Minimum" en/of "Maximum" waarden naar smaak en druk OK.

Photoshop Lab 1_5: Uitvoeropties instellen

In het dialoogvenster "Opslaan voor internet en apparaten" in het vervolgkeuzemenu "Optimalisatie" selecteer artikel "Wijzig uitvoerinstellingen" (Uitvoerinstellingen bewerken).
Vink het vakje aan XHTML-uitvoer: Export maakt webpagina's die voldoen aan de XHTML-standaard.
Klik op de knop Volgende en configureer de instellingen in de groep "Fragmenten".
Pas de achtergronduitvoer aan door te klikken Volgende.
Klik OK en sla het geoptimaliseerde bestand op.
Bekijk de HTML-code van het resulterende bestand.

Photoshop biedt een uitstekend hulpmiddel voor het optimaliseren van uw afbeeldingen en foto's: de opdracht (Opslaan voor web).

Beeldoptimalisatie is het vinden van de gulden middenweg tussen kwaliteit en bestandsgrootte die geschikt is voor het oplossen van de taak.

De meest populaire reden voor de noodzaak van optimalisatie is het voorbereiden van een afbeelding voor verzending via internet of voor plaatsing op een website. Websiteontwerpers en webontwikkelingsstudio's grafisch ontwerp, zoals http://brandbe.net, nemen na voorbereiding hun toevlucht tot het optimaliseren van de resulterende delen van de afbeelding om hun gewicht te verminderen (bijvoorbeeld snel laden afbeeldingen van de toekomstige site), maar zodat de kwaliteit van het beeld niet verslechtert.

Beschrijving van dialoogvensterelementen

(Klik om te vergroten)

Na het uitvoeren van de opdracht verschijnt de geladen afbeelding in het centrale deel van het dialoogvenster. Het venster is verdeeld in de volgende elementen:

aan de linkerkant is de werkbalk;
top – beeldweergaveparameters;
in het midden – kijkgebied;
aan de rechterkant staan tools voor optimalisatiebeheer;
hieronder – enkele serviceparameters;

Werkbalk

Een hulpmiddel gebruiken Hand navigatie door het beeldgebied wordt uitgevoerd. Klik met de linkermuisknop en beweeg uw hand zijwaarts om de afbeelding heen en weer te bewegen. Als er een ander gereedschap is geselecteerd, houdt u ingedrukt Ruimte om uw hand te activeren en het beeld te verplaatsen. Door met het muiswiel te scrollen beweegt de afbeelding op en neer.

Hulpmiddel Een fragment selecteren stelt u in staat om met individuele snijfragmenten te werken: combineren, verdelen, parameters wijzigen, verwijderen, enz. Lees meer over dit gereedschap en snijden.

Na het klikken op Schaal hulpmiddel en als u de cursor over de afbeelding beweegt, verschijnt er een vergrootglaspictogram. Elke muisklik zoomt in op de afbeelding (terwijl u de muisknop ingedrukt houdt). Alt-toetsen– vermindert). IN contextmenu, dat wordt geopend door met de rechtermuisknop te klikken, kunt u de gewenste schaal uit de lijst selecteren of de afbeelding in het hele venster of scherm weergeven. U kunt ook een deel van de afbeelding met een kader selecteren om dit fragment te vergroten.

Pipet In de afbeelding kunt u zien in welke kleur u geïnteresseerd bent. Deze tint wordt in het venster weergegeven Pipet kleur. Klik op deze kleur om de kleurkiezer te openen en de alfanumerieke code te achterhalen.

Als de afbeelding in afzonderlijke fragmenten is geknipt en u zich stoort aan de grenzen van dit uitknippen, klikt u op Weergave van snijfragmenten is uitgeschakeld om ze te verbergen. Als u er nogmaals op drukt, worden ze teruggezet.

Weergaveopties

De geüploade afbeelding wordt automatisch geoptimaliseerd met behulp van de standaardinstellingen. IN bovenste gebied dialoogvenstertabblad is geactiveerd Optimalisatie, weergeven verschijning, grootte en geschatte tijd voor het laden van de geoptimaliseerde afbeelding op de site.

Tab Origineel geeft het oorspronkelijke uiterlijk en de grootte van de afbeelding weer. Om het origineel visueel te vergelijken met de geoptimaliseerde afbeelding, kunt u naar het tabblad gaan 2 opties. Nog handiger tabblad 4 opties, waardoor de gebruiker niet één, maar drie optimalisatiemogelijkheden wordt geboden.

Optimalisatiebeheer

Correcties op de standaardoptimalisatie kunnen aan de rechterkant van het dialoogvenster worden aangebracht.

Allereerst moet u het formaat opgeven van het bestand dat moet worden geoptimaliseerd! De correctiehulpmiddelen die aan de gebruiker worden aangeboden, veranderen afhankelijk van het geselecteerde formaat.

De lijst "Set" en de sublijst ervan (onder JPEG) specificeren de kwaliteit van de geoptimaliseerde afbeelding. Het heeft 5 opties:

beste (standaard);
zeer hoog;
hoog;
gemiddeld;
laag.

Wanneer u de vermelde opties selecteert, wordt de parameterwaarde automatisch ingesteld Kwaliteiten respectievelijk op 100, 80, 60, 30 en 10. Keuze slechtere kwaliteit wordt uitgevoerd wanneer de afbeeldingsgrootte onaanvaardbaar groot is.

Parameterselectie Progressief bepaalt hoe de afbeelding in de browser wordt weergegeven. De lichte toename in bestandsgrootte wordt ruimschoots gecompenseerd door de snellere weergave van de foto voordat deze volledig is geladen. En de beweging van de schuifregelaar Vervagen rechts van de oorspronkelijke nulwaarde comprimeert het bestand verder, waardoor de grootte ervan wordt verkleind.

Op de lijst Mat/achtergrond Indien nodig kunt u de kleur van transparante pixels instellen. Verkrijgbaar in basiskleur, achtergrondkleur, pipet, wit en zwart.

Selectievakje Ingebouwd profiel geactiveerd om op te slaan in een geoptimaliseerd kleurprofielbestand. Ze worden in sommige browsers gebruikt voor kleurcorrectie.

GIF of PNG

De formaten werken met een beperkt kleurenpalet met een diepte van 8 bits. Tekeningen in deze formaten gebruiken maximaal 256 tinten, opgeslagen in een speciale kleurentabel die verschijnt bij het werken met GIF en PNG. Bij afwezigheid gewenste kleur dithering wordt uitgevoerd - de imitatie ervan door andere kleuren te mengen. Hoog percentage Met dithering kunt u meer details en kleuren behouden, maar wordt het bestand ook zwaarder. Dithering wordt aanbevolen voor verloopafbeeldingen.

IN bovenste lijst Kit zijn geselecteerd mogelijke opties optimalisatie met of zonder dithering. Hogere kleur- en ditherwaarden verbeteren de kwaliteit van het geoptimaliseerde beeld, maar vergroten ook de grootte ervan. Het aantal kleuren kunt u rechts in de lijst apart selecteren Kleuren.

In de lijst links ervan selecteert u de methode voor het maken van een kleurentabel met de volgende hoofdopties:

perceptueel - met een voorkeur voor de kleuren waarvoor het oog het meest gevoelig is;
selectief (standaard) – met extra voorkeur voor de kleuren van grote beeldfragmenten;
adaptief – met voorkeur voor kleuren uit het overheersende spectrum;
beperkt ( veilig palet Web) – met volledige uitsluiting van dithering.

In dezelfde lijst is er de mogelijkheid om te gebruiken kant-en-klare tafels kleuren of palet Aangepast aangemaakt door de gebruiker.

Selecteer in de volgende lijst een dither-algoritme uit drie opties:

willekeurig, waarbij een willekeurig patroon wordt gebruikt om te simuleren;
regelmatig, met een vierkant patroon;
"ruis" vrij van "naden" in het beeld.

Aanvullende aanpassingen zijn beschikbaar in verschillende lijsten aan de rechterkant. Op de lijst Dithering het percentage kan worden gewijzigd door de schuifregelaar soepel te verplaatsen. Op de lijst Webkleuren hun percentage kan op dezelfde manier worden aangepast.

Lijst Verliezen is alleen bedoeld voor het GIF-formaat. Hiermee kunt u de acceptabele drempel instellen voor het verwijderen van een deel van de afbeelding om de grootte van het geoptimaliseerde bestand te minimaliseren.

Serviceparameters onderaan het venster

Onderaan het dialoogvenster wordt de mogelijkheid om de afbeelding te schalen gedupliceerd. Rechtsonder kunt u de afbeeldingsgrootte in pixels of percentages wijzigen. Net daaronder bevinden zich de knoppen Opslaan en Voltooien. De mogelijkheid om periodiek de geoptimaliseerde afbeelding in de browser te bekijken, geïmplementeerd met een klik op de knop, is erg handig Weergave.

Een parameterset opslaan/verwijderen

De talrijke hierboven beschreven optimalisatie-instellingen kunnen worden opgeslagen als benoemde aangepaste sets die op andere afbeeldingen kunnen worden toegepast. Dit zal de tijd die nodig is om een groot aantal afbeeldingen te optimaliseren aanzienlijk verkorten.

Om uw set parameters op te slaan, moet u eerst een van de parameters wijzigen standaard sets. Bijvoorbeeld door een set te kiezen Hoge kwaliteit JPEG, zet een vinkje Progressief. Het actieve commando verschijnt nu in het menu Instellingen opslaan.

Nadat je je instellingen hebt opgeslagen, zijn ze beschikbaar in de setlijst:

Een gemaakte aangepaste set verwijderen:

op de lijst Kit selecteer zijn naam;
Open het menuvenster;
Selecteer een team Instellingen verwijderen.

Werken met beeldfragmenten

Bij het beoordelen van de werkbalk werd de mogelijkheid genoemd om een enkel fragment van een grote afbeelding te optimaliseren. Maar hiervoor moet het eerst in fragmenten worden verdeeld.

Voor een dergelijke scheiding wordt deze gebruikt vanuit de hoofdwerkbalk van Photoshop. Nadat u het hebt geselecteerd, moet u het gewenste fragment omlijnen met de pen die verschijnt. Grote afbeelding zal in verschillende fragmenten worden opgesplitst.

Na het uitvoeren van de opdracht Bewaar voor internet en apparaten U kunt doorgaan met het optimaliseren van een enkel fragment. Eerst moet u de weergave van configuratiefragmenten inschakelen met behulp van de onderste tool met dezelfde naam in het lokale paneel. Selecteer vervolgens het gewenste fragment met de tool Segmentselectie.

Als u een fout in de tekst opmerkt, selecteert u deze en drukt u op Ctrl + Enter. Bedankt!

Links bovenste hoek In het voorbeeldgebied ziet u een reeks van vier tabbladen. Standaard is het tabblad Geoptimaliseerd geselecteerd, wat betekent dat u de originele afbeelding niet ziet. In plaats daarvan wordt het getoond voorbeeld hoe het beeld eruit ziet huidige instellingen optimalisaties (die we later zullen bekijken):

Zoals webontwerpers adviseren, is het beter om een ander tabblad te gebruiken, waarbij twee afbeeldingen tegelijk in het voorbeeldvenster worden weergegeven, het origineel en het geoptimaliseerde, dit is het tabblad “2-Up”:

Met het tabblad "2 opties" actief, zien we nu twee afbeeldingen tegelijk, de originele versie aan de linkerkant en de geoptimaliseerde versie aan de rechterkant (als uw afbeelding is landschapsoriëntatie, d.w.z. de breedte groter is dan de hoogte, dan worden de afbeeldingen boven elkaar weergegeven):

Bestandsformaat

MET rechterkant Het dialoogvenster bevat opties voor beeldoptimalisatie.

Het eerste dat u moet doen, is kiezen juiste formaat bestand voor onze afbeelding. Wanneer u dit venster voor de eerste keer opent, is het standaardformaat GIF. Het formaat van het geselecteerde bestand bovenaan (direct onder het woord "Preset"). GIF wordt in sommige gevallen gebruikt om webafbeeldingen op te slaan, maar voor mijn fotografie is het beter geschikt JPEG-formaat dus ik verander de GIF naar JPEG:

Compressiekwaliteit van afbeeldingen

Direct onder de formaatoptie bevinden zich opties voor het kiezen van de beeldcompressiekwaliteit, d.w.z. uitvoerkwaliteit van de foto zelf.
Wij kunnen kiezen uit voor- gespecificeerde parameters kwaliteit (laag, gemiddeld, hoog en zeer hoog, en de beste, in het Engels - Laag, Gemiddeld, Hoog, Zeer Hoog en Maximaal) in de vervolgkeuzelijst aan de linkerkant, of we kunnen een bepaalde kwaliteitswaarde invoeren als een percentage aan de rechterkant.
Hoewel het verleidelijk is om de hoogste kwaliteit voor onze foto's in te stellen, betekent optimaliseren voor het web dat we de bestandsgrootte in megabytes zo klein mogelijk moeten houden, wat betekent dat we een gulden middenweg moeten vinden tussen beeldkwaliteit en bestandsgrootte. De kwaliteitswaarde "Hoog" is vrijwel altijd optimale keuze, het geeft ons aanvaardbare kwaliteit afbeeldingen relatief klein formaat bestand. Als u "Hoog" selecteert, wordt de kwaliteitswaarde automatisch ingesteld op 60%:

Nadat u de kwaliteitswaarde heeft geselecteerd, zorg er dan voor dat de optie "Geoptimaliseerd" is ingeschakeld, omdat... het kan helpen de bestandsgrootte nog wat verder te verkleinen. Het is niet nodig om de opties “Progressief” en “Kleurprofiel insluiten” in te schakelen, omdat De meeste webbrowsers ondersteunen sowieso geen kleurprofielen:

Kleur ruimte

Schakel ten slotte de optie "Converteren naar sRGB" in als deze nog niet actief is. Deze zorgt ervoor dat de foto in de sRGB-kleurruimte wordt opgeslagen, wat simpel gezegd betekent dat de kleuren in de foto correct worden weergegeven op de website:

Afbeeldingsgrootte
Het dialoogvenster geeft ons ook de mogelijkheid om de lineaire grootte van de afbeelding te wijzigen. Ik raad aan om het formaat van de afbeelding vooraf aan te passen voordat u het dialoogvenster Opslaan voor web inschakelt, zodat wanneer u opslaat voor het web, de lineaire pixelafmetingen al aanwezig zijn. Dit geldt vooral voor nieuwste versie Photoshop CC erbij
nieuw dialoogvenster Afbeeldingsgrootte. Het formaat van een afbeelding wijzigen wordt behandeld in Photoshop CC en in versies CS6 en lager.

Vergelijking van originele en geoptimaliseerde bestandsgroottes

Op op dit moment, we hebben alles gedaan wat we moesten doen om het bestand voor internet te optimaliseren, en laten we nu eens kijken naar de bestandsgrootte in bytes in de originele en geoptimaliseerde versies. In mijn geval de maat originele foto(links) was gelijk aan een kolossale waarde voor internet - 1,29 Mb, wat te groot is voor gebruikers, zelfs met gemiddelde internetsnelheid, en de geoptimaliseerde versie (rechts), die er bijna net zo goed uitziet als het origineel, bleek slechts 41,85 Kb:

Een afbeelding opslaan

Om een geoptimaliseerde versie van uw foto op te slaan, klikt u op de knop Opslaan onder aan het dialoogvenster. Photoshop opent een nieuw dialoogvenster Geoptimaliseerd opslaan als, waarin u de afbeelding indien nodig kunt hernoemen en selecteren de gewenste map op uw harde schijf om op te slaan. Wanneer u klaar bent, klikt u op de knop "Opslaan" om de afbeelding op te slaan en het dialoogvenster te sluiten:

Nou, dat is eigenlijk alles. De foto is nu volledig geoptimaliseerd en klaar om te bewerken e-mail of voor plaatsing op de website.