Merlins Creative - Din personliga webbyrå

Bilder på webben

BLOGGEN

Bilder och filformat

Webbfoto: En guide till bilduppladdning på din hemsida

Innan du laddar upp dina bilder, ta en stund att förstå konsten av bra bildhantering.

1. Storleken är allt:

  • Optimering: Komprimera dina bilder utan att offra kvalitet. Använd verktyg som TinyPNG eller ImageOptim för att minska filstorleken.
  • Responsiv Design: Anpassa bildstorleken efter enhet. Ett gigantiskt foto som ser fantastiskt ut på en datorskärm kan överväldiga en mobilskärm.

2. Formatkriget:

  • JPEG (JPG): Idealisk för fotografier och bilder med många färger. Bra kompression utan att förlora för mycket kvalitet.
  • PNG: Perfekt för bilder med genomskinliga bakgrunder eller skarpa detaljer.
  • GIF: Lätt och perfekt för enklare grafik och animationer. Använd när du vill skapa något roligt och lätt.
  • AVIF: Bra val för både bilder och animerade bilder på grund av hög prestanda och royaltyfritt bildformat. Det erbjuder mycket bättre komprimering än PNG eller JPEG med stöd för högre färgdjup, animerade ramar, transparens, etc. Tänk på att när du använder AVIF bör du inkludera fallbacks till format med bättre webbläsarstöd (dvs använda <bild>-elementet).
  • SVG: Vektorbildformat; idealisk för användargränssnittselement, ikoner, diagram, etc., som måste ritas exakt i olika storlekar. Support: Chrome, Edge, Firefox, IE, Opera, Safari.
  • WebP: Utmärkt val för både bilder och animerade bilder. WebP erbjuder mycket bättre komprimering än PNG eller JPEG med stöd för högre färgdjup, animerade ramar, transparens etc. AVIF erbjuder något bättre komprimering, men stöds inte riktigt lika bra i webbläsare och stöder inte progressiv rendering. Support: Chrome, Edge, Firefox, Opera, Safari

3. Förlustfritt vs. Förlust:

  • Förlustfritt: PNG är förlustfri, vilket innebär att bildkvaliteten inte försämras vid komprimering. Bra för logotyper eller grafik med tydliga kanter.
  • Förlust: JPEG komprimerar genom att kasta bort viss information. Bra för fotografier, men inte idealiskt för text eller linjer.

4. Upplösning och PPI:

  • Upplösning: Mäts i pixlar per tum (PPI eller DPI). Standard för webb är 72 PPI. Högre upplösning (300 PPI) passar för utskrift, men är överflödig online.
  • Skala Bilder: Skala bilder till den verkliga storleken på din webbsida. Om en bild visas som 300×300 pixlar, ladda inte upp en 3000×3000 pixlar.

5. Bildnamn och Alt-text:

  • SEO-vänligt: Ge dina bilder meningsfulla filnamn och använd alt-text för att beskriva innehållet. Det hjälper inte bara SEO utan ger också tillgänglighet för användare med skärmläsare.

6. Laddningstid är nyckeln:

  • Cachning: Använd cachning för att lagra bilder lokalt på användarens enhet, vilket minimerar laddningstiden vid upprepade besök.
  • CDN (Content Delivery Network): Distribuera dina bilder på servrar runt om i världen för snabbare laddningstider.

7. Säkerhet är inte överskattad:

  • Vattenstämpel: Lägg till en vattenstämpel på dina bilder om du är oroande över obehörig användning.
  • Rättigheter och Licenser: Se till att du har rättigheterna eller licenserna för de bilder du använder för att undvika juridiska bekymmer.

Slutsats: En vacker bild säger mer än tusen ord, men bara om den presenteras på rätt sätt.

Vill du veta mer? Kontakta mig på kontakt@merlins.se.
Läs mer om mina tjänster här.

Med vänliga hälsningar

Tilda Källström

Dela inlägget:

Se fler inlägg

Lansering Väduren 2

Lansering av Väduren 2

Väduren 2 är en bostadsrättsförening i Stockholm som kontaktade Merlins Creative då de önskade en ny webbplats. På sin webbplats vill de ge värdefull information till sina medlemmar i föreningen.

Läs mer »
Lansering Fransi

Lansering: Fransi

Hundshopen Fransi är ett samarbete mellan Merlins Creative och Larsson Textil. Här produceras olika produkter för hund och förare som du enkelt kan köpa i webbshopen:
fransi.se

Läs mer »

Kontakta mig!

Webbdesign & Webbutveckling · Analys & Optimering · Content & SEO · Marknadsföring & SOME