Så kombinerar du bilder för din webbplats

Kombinera bilderna eller visa dem separat?

Ett kollage samlar flera bilder i en bildfil. Det kan ge en kompakt översikt på en projektsida eller visa ett motiv bredvid en användbar detalj. Bilderna bör besvara en gemensam fråga, till exempel hur det färdiga köket ser ut och hur förvaringen fungerar.

Visa bilderna separat när var och en behöver en egen förklaring, länk eller närmare granskning. I ett produktgalleri kan besökaren undersöka enskilda vyer i stället för att titta på ett litet rutnät.

Ett kollage behåller sin layout när det visas i mindre storlek. Separata bilder i webbplatsens redigerare kan hamna under varandra på en telefon; bilder i en gemensam fil ligger kvar på sina platser. Det gör layouten förutsägbar, men ger sidan mindre möjlighet att visa varje foto i en användbar storlek.

Välj bilder som tillför olika information

Två till fyra bilder är en praktisk utgångspunkt för en projektöversikt. Ge varje bild en uppgift: översikten visar sammanhanget, medan en närbild visar en egenskap som annars är svår att se. Två nästan likadana översiktsbilder berättar oftast mindre än en översikt och en användbar detalj.

Välj ljus och färger som fungerar tillsammans. I en före- och efterjämförelse gör liknande kameravinklar, utsnitt och skala förändringen lättare att bedöma. Undvik beskärningar som döljer en viktig skillnad. Vår guide om att välja bilder för webbplatsen beskriver vad varje bild bör förmedla.

Välj en layout som passar bilderna

I Pixilos layout för tre bilder ligger den första stor till vänster och de två nästa under varandra till höger. Ändra ordningen för att välja vilket foto som får mest plats. Ett vanligt rutnät fylls från vänster till höger och sedan uppifrån och ned. Om bilderna inte fyller alla rutor visas den valda bakgrunden i de tomma rutorna.

Anpassa kollagets form efter bildrutorna

Kollagets bredd och höjd avgör formen på rutorna inuti. Ett kvadratiskt kollage ger inte alltid kvadratiska rutor: två bilder bredvid varandra får varsin stående ruta. Ett rutnät med två rader och två kolumner ger ungefär kvadratiska rutor när mellanrum och marginaler är små.

För två stående foton bredvid varandra kan du prova ett högre kollage så att rutorna förblir stående. Ett brett och lågt kollage beskär mer upptill och nedtill när bilderna fyller rutorna. För två liggande foton i en rad kan ett bredare kollage behålla mer av varje vy.

Utgå från utrymmet på sidan och prova en layout och form som passar fotona. Om webbplatsen kräver en bestämd form, behåll den och ändra layouten eller bildvalet. Lås upp bildförhållandet i Pixilo för att ändra formen. Lås det igen när du vill ändra storleken utan att ändra proportionerna.

Visa hela bilden eller fylla rutan?

Visa hela bilden bevarar alla kanter men kan lämna tomt utrymme runt bilden. Det passar för logotyper, diagram eller produktfoton där en beskärning skulle ta bort viktig information.

Fyll rutan beskär bilden så att den fyller sin plats utan att förvrängas. Rutnätet får jämna kanter, men kontrollera vad som försvinner. Välj varje miniatyr och justera beskärningens position så att det viktiga motivet syns.

Om en ruta inte kan visa både ett ansikte och det som händer bredvid, prova en annan form eller layout, visa hela bilden eller välj ett annat foto. Att flytta beskärningen kan inte få alla delar av en bred vy att rymmas i en smal ruta. Använd först beskärningsverktyget om du vill välja ett mer exakt utsnitt av originalet, och kontrollera sedan hur det passar i kollaget.

Skilj bilderna åt med mellanrum

Ett litet mellanrum gör det lättare att skilja angränsande foton åt. En yttre marginal ramar in kollaget, men tar också plats från bilderna. Håll båda måttliga om kollaget ska ligga i en smal spalt. De krymper med bilden när den visas i mindre storlek.

Välj en bakgrund som passar fotona och sidan. Den syns i mellanrum, marginaler och utrymmet som lämnas av bilder som inte fyller sina rutor. En annan färg eller genomskinlighet tar inte bort en bakgrund som redan finns i ett foto.

Kombinera bilderna med Pixilo

1. Öppna verktyget för att kombinera bilder och välj dina JPG-, PNG- eller WebP-filer.
2. Välj layout och använd pilarna under miniatyrerna för att ändra ordningen.
3. Ställ in hela kollagets bredd och höjd, inklusive mellanrum och yttre marginal.
4. Visa varje bild helt eller fyll dess ruta. Vid beskärning väljer du varje miniatyr och justerar positionen. Reglagen är bara tillgängliga i de riktningar där bilden beskärs.
5. Ställ in mellanrum, yttre marginal och bakgrundsfärg eller genomskinlighet.
6. Ladda ned PNG-filen, kontrollera kvaliteten och förbered versionen som ska publiceras.

Med Lägg till bilder kan du komplettera utan att förlora ordning, beskärningar eller inställningar. Byt ut bilder ersätter de valda bilderna. Layouten med en stor och två små bilder kräver exakt tre bilder; en fjärde bild ändrar layouten till ett rutnät.

Exempel: fyra foton av ett färdigt kök

Ett renoveringsföretag vill ha en kompakt presentation på en projektsida. Det väljer en rumsöversikt, insidan av ett förvaringsskåp, en detalj av bänkskivan och belysningen ovanför den. Varje foto visar en annan del av samma färdiga arbete.

Företaget börjar med ett rutnät på 2 × 2 för att visa alla fyra delarna. Om rumsöversikten vore det främsta säljargumentet skulle layouten för tre bilder kunna ge den mer plats, med två detaljer bredvid och det fjärde fotot på en annan del av sidan.

Sidan visar kollaget som högst 600 pixlar brett. Exportera det i detta exempel som 1200 × 800 pixlar, med 16 pixlars mellanrum, 24 pixlars yttre marginal och vit bakgrund. Filen är dubbelt så bred som visningen för att ge mer detalj på skärmar med högre pixeltäthet. Det här är exempelinställningar, inte en föreskriven storlek för varje webbplats. Vår guide till bildstorlekar för webbplatser förklarar hur du väljer mått för din sida.

Fyll rutorna och placera översikten först, följd av skåpet, bänkskivan och belysningen. Justera varje beskärning så att fotot visar den egenskap det ska förklara.

Vid en visningsbredd på 360 pixlar på en telefon är varje foto här bara omkring 170 pixlar brett. Skåpet och lamporna går fortfarande att känna igen, men anta att bänkskivans skarv är för liten för att bedöma. Ta ut det fotot ur kollaget och visa det separat i större storlek. Ordna sedan de tre återstående fotona med översikten som huvudbild. Större exportmått skulle inte i sig ge skarven mer plats på sidan.

Kontrollera kollaget i sidans mobillayout

Förhandsgranska sidan i dator- och telefonbredd utan att zooma. Kontrollera vad besökaren verkligen kan förstå: går det att jämföra två ytbehandlingar, se förvaringen eller följa stegen? Det räcker inte att känna igen huvudmotivet om den användbara detaljen har försvunnit.

Kontrollera bilden på sidan, inte bara den nedladdade filen. Webbplatsens tema kan beskära den ytterligare för att passa en bestämd bildyta. Ändra ytan eller visningsinställningarna om delar av kollaget skärs bort.

Om layouten blir trång, förenkla den eller behåll bilderna separat. Om ditt webbverktyg stöder en annan mobilbild, gör en version med färre foton eller en lodrät layout. Vår guide till responsiva bilder förklarar det arbetssättet.

Behåll rubriker och viktiga beteckningar som text på sidan. Text inne i en bild krymper med bilden och är svårare att uppdatera. Lägg till förklarande bildtexter i webbplatsens redigerare.

Lägg till bildtext och användbar alternativtext

En bildtext kan namnge projektet och förklara ordningen. För kökets fyra foton kan den vara: ”Färdig köksrenovering. Medurs från övre vänstra hörnet: översikt, utdragbar förvaring, belysning över bänken och bänkskivans detalj.” Uppdatera texten så att den stämmer med slutlig layout om du flyttar eller tar bort ett foto.

Ett informativt kollage som exporteras till en fil behöver en alternativtext för hela bilden. I köksexemplet kan den vara: ”Renoverat kök med utdragbar förvaring, en jämn skarv i bänkskivan och lampor över bänken.” Beskriv det viktiga i stället för att bara skriva ”Kollage med fyra foton”.

Om bilderna förklarar en mer detaljerad jämförelse, beskriv de viktigaste skillnaderna i texten bredvid i stället för att försöka få in allt i alternativtexten. W3C:s vägledning för komplexa bilder förklarar hur en kort alternativtext kan kombineras med en längre beskrivning. Vår guide till alternativtext och filnamn hjälper dig att skriva beskrivningar som passar sidan.

Förbered filen för webbplatsen

Pixilo sparar kollaget som PNG, bevarar genomskinlighet och lägger inte till förstörande komprimering vid export. Det återställer inte detaljer som saknas i källfotona. En liten bild kan bli oskarp när den förstoras för att fylla rutan, särskilt efter en snäv beskärning. Granska varje foto i det nedladdade kollaget. Om ett är märkbart oskarpare än de andra, använd ett större original eller en mindre ruta.

Ett kollage som mest består av foton kan ge en stor PNG-fil. Använd PNG till WebP eller, om du inte behöver genomskinlighet, PNG till JPG för att göra en kopia till webbplatsen. Jämför filstorlek och synlig kvalitet med PNG-filen. Titta på fina detaljer och kanter när du ändrar kvalitetsinställningen: den minsta filen hjälper inte om egenskapen du vill visa inte längre syns.

Om sidans bakgrund ska synas genom bilden, behåll en version som bevarar genomskinlighet. JPG kan inte göra det. Vår guide till bildformat för webben går igenom alternativen närmare.

Ladda upp den valda versionen och kontrollera att sidan använder rätt fil och avsedda mått. Spara originalfotona för framtida ändringar: du kan inte ordna om fotona inne i den nedladdade PNG-filen.