Optimera dina bilder för webben med Photoshop

  • PUSHA

Bildoptimering för webben i Photoshop – BineroBildoptimering för webben är mycket viktigare än vad många faktiskt tror. På majoriteten av bloggar och andra webbplatser hittar man bilder som är på tok för stora och i många fall kommer de direkt ur kameran/mobiltelefonen. Trots att vi idag har snabba bredbandsuppkopplingar så måste man optimera sina bilder för webbanvändning innan man laddar upp dem. Inte bara för att besökarna ska få en bättre upplevelse när de besöker din sajt utan också för att en optimerad bild ser bättre ut än en originalbild tagen direkt ur kameran eller mobilen.

Vi på Binero tänkte i den här artikeln ge dig några enkla tips till bättre bilder för webben. Vi använder oss av Photoshop (CS och Elements går bra) eftersom det bildredigeringsprogrammet är industristandard sedan länge. Dock går det även att dra delvis nytta av våra tips om du använder dig av gratisprogrammet GIMP eller ett liknande bildbehandlingsprogram.

 

Innan vi börjar

I den här artikeln tar vi inte upp otimeringsprocesser som att välja rätt bildformat eller hur du optimerar dina bilder för SEO (så kallad sökmotoroptimering). Det kan du läsa om här. Istället ska vi koncentrera oss på hur du på ett enkelt och korrekt sätt reducerar bilderna i storlek så att de laddar så snabbt som möjligt när någon besöker din blogg/hemsida.

 

Optimera bilder för webben

Steg 1 – Öppna din bild

Gå till File–> Open (Ctrl/Command+O) och välj vilken bild du vill öppna i Photoshop (i vårt exempel använder vi en engelsk version av Photoshop men det ser likadant ut i den svenska).

Optimera bilder för webben i Photoshop – Binero Hosting, Peter From

Steg 2 – Starta Photoshop Actions

Nu använder vi funktionen Actions för att spela in allting vi gör så att vi slipper repetera alla steg nästa gång vi ska optimera en hop bilder.

Hämta upp panelen Actions via Windows -> Actions (Alt/Option+F9).

Inuti Actions-panelen clickar du på ikonen Create New Set. Ge den ett namn. I vårt exempel kallar vi det Bilder.

Sedan skapar du en Action som heter till exempel Bildoptimering och klickar på Record. Från och med nu spelas allting du gör in.

Optimera bilder för webben i Photoshop – Binero Hosting, Peter From

Steg 3 – Spara din bild för webben

Spara din bild för webben genom att gå till File -> Save for Web & Devices (Alt/Option+Shift+Ctrl/Command+S). När du får upp rutan för att spara bilden, ställer du in enligt nedan:

  • Preset: JPEG High (väljer formatet JPEG i kvalitet 60)
  • Optimized: Skall vara vald
  • Convert to sRGB: Skall vara vald
  • Image Size: Ändra enligt dina önskemål
  • Percent: 100%
  • Quality: Bicubic

Optimera bilder för webben i Photoshop – Binero Hosting, Peter From

Med de här inställningarna får du en väl optimerad bild. När du är klar, klickar du på Save. Stäng ned fönstret med din bild från arbetsytan i Photoshop. Gå till Actions-panelen och klicka på knappen Stop Playing/Recording. Nu har du spelat in hela förloppet inklusive nedstängningen av din bild.

Steg 4 – Använd Batch Process för att optimera dina bilder

Nu är det dags att använda vår nya bildoptimerings-action som vi har skapat. Vi ska använda den på flera bilder samtidigt, en så kallad Batch.

Gå till File -> Automate -> Batch och använd följande inställningar:

Optimera bilder för webben i Photoshop – Binero Hosting, Peter From

Se till att du har valt rätt Actions Set och den Action vi skapade nyss.

Välj mappar för källa och destination för dina bilder och se till att du har kryssat i Override Action “Save As”.

Nu är det bara att vänta så sköter din nya Action om bildoptimeringen för dig helt automatiskt.

Summering

Genom att använda ovan nämnda teknik får du väloptimerade bilder för webben som gör att dina sidor laddas snabbt och bilderna ser bra ut i alla skärmupplösningar. Dessutom spar du tid genom att du slipper behandla varje bild separat. Om du vill djupdyka i detta med bildoptimering för webben så kan du läsa mer om det i den här späckade artikeln på Six Revisions.

 

Har du tips om bildoptimering för webben? Berätta gärna i kommentarerna nedan.


Bäst i test två år i rad - Internetworld

Rekommenderas av InternetworldVi är prisade för vår goda support, höga funktionalitet och kontrollpanel.