meny
Rätt filformat för bilder på din webbplats

Rätt filformat för bilder på din webbplats

Bilder på webben ska väga så lite som möjligt, men samtidigt se bra ut. Det gäller därför att välja rätt filformat när man laddar upp bilder på webbplatsen. De två vanligaste filformaten på webben idag är JPG och PNG. Om man jämför samma bild som JPG eller PNG ser de oftast precis likadana ut. Tittar man på olika webbplatser ser man att PNG verkar användas lite oftare än JPG. Jag hör ofta från andra att de tror att det är PNG som ska användas på webben och statistik bekräftar också att många gör på det sättwet. Men är det verkligen rätt?

PNG eller JPG – vilket filformat ska man använda?

Det finns skillnader som är bra att känna till när du använder bilder på nätet, även fast JPG och PNG-bilder oftast ser likadana ut. Sökmotorer, som Google, rankar webbplatser som laddar in snabbare, högre än långsammare webbplatser. Bilder är en av de komponenter som påverkar hur snabb en webbplats är allra mest. Målet när man sparar bilder till webben hela tiden att få ner filstorleken så mycket som möjligt samtidigt som den synliga bildkvaliteten inte påverkas.

Förlustfri och förstörande kompression

Stora bilder tar plats på webbservern och gör så att webbsidan laddar in långsammare. För att minska filstorleken använder man komprimering. Syftet med att komprimera en bild är att spara utrymme, eftersom mindre bilder är lättare att överföra och lagra. Det finns två typer av komprimering, förlustfri och förstörande. JPG använder förstörande, PNG använder förlustfri komprimering.

Förlustfri komprimering

Bilder innehåller massor av information, en hel del som inte syns. Förlustfri komprimering tar bort data som inte syns ur bilden, men informerar också datorn om vilken data som var onödig och hur den kan återskapas vid behov. Sparar man bilder i filformatet PNG kan man alltså både äta kakan och ha den kvar.

Förstörande komprimering

JPG använder förstörande komprimering. Den tar bort bildinformation våra ögon inte kan se. Resultatet blir en bild med samma kvalitet som originalet, fast den väger betydligt mindre när man sparar som JPG. Nackdelen är att den information man tar bort inte kan återskapas. Varje gång en bild redigeras och/eller sparas en gång till, förlorar den ännu mer data, vilket minskar kvaliteten med tiden.

jpg filformat

Nu när vi vet att PNG använder förlustfri komprimering och JPG förstörande är väl valet enkelt? Självklart väljer man PNG alla dagar i veckan. Då kan man öppna och redigera bilden hur många gånger som helst utan att förlora kvalitetet. Men tyvärr är det är inte alls så enkelt. Istället är nästan alltid JPG det bästa valet.

JPG – bästa filformat till fotografier

Fördelen med PNG-filer, att man behåller all bildinformation, är också en stor nackdel. Om man jämför filstorleken mellan PNG och JPG ser man att PNG-filer oftast väger 3–5 ggr mer än JPG-filer. En av de största anledningarna till att redigera bilder för webben är att hålla nere filstorlekarna så mycket som möjligt. Därför väljer jag nästan alltid JPG som filformat till alla fotografier jag visar på webben.

jämförelse jpg och png

jpg filformat

JPG

JPG står för Joint Photographic Experts Group. Ibland ser du bilder med filändelsen JPEG också. JPG och JPEG är samma filformat och fungerar exakt likadant. Tidiga Windows-versioner kunde bara bearbeta filer med tre bokstäver, så JPEG kortades till JPG.
Det smarta med JPG är att filformatet tar hänsyn till hur det mänskliga ögat uppfattar ljus. Även om antalet färger i bilden minskas när en JPG-fil komprimeras upplever ändå våra ögon en bild i mycket hög kvalitet.

Sammanfattning JPG

  • Det rekommenderade valet för fotografier.
  • Bra val för skärmdum par av spel, filmer och liknande innehåll.
  • Om bilden sparats på en vit bakgrund.
  • Betydligt mindre filstorlekar av JPG.
  • Snabbare sidinläsning och användarupplevelse på webben
  • JPG använder förstörande komprimering, men du kan styra hur mycket bilden ska komprimeras.
  • Varje gång du öppnar, redigerar och sparar en JPG-bild komprimeras bilden ytterligare, vilket till slut kommer att synas i bildkvaliteten.

png filformat

PNG

PNG står för Portable Network Graphics. Fil ändelsen är PNG. Det finns flera olika varianter av PNG, men idag är det PNG-24 som gäller. Den stora fördelen med PNG-formatet, förutom att det är oförstörande, är att det stödjer genomskinlighet.

En sak vi inte tänker på så ofta är att alla bilder är rektangulära. Fotografier är oftast rektangulära och då passar JPG bäst som filformat. En bild på en oval logotyp är också rektangulär, men det som är utanför själva logotypen syns inte. Det är genomskinligt. Vi ser bara själva logotypen. Vill man använda bilder med genomskinlighet är därför PNG det bästa valet. När du ser en logotyp på en webbplats är det troligaste att du tittar på en PNG-fil.

Även fast jag rekommenderar att du använder JPG som filformat finns det tillfällen då PNG kan vara ett bättre val. PNG bevarar mer detaljer i en bild än JPG. Vet du att bilden ska förstoras i webbläsaren eller att detaljer är extra viktiga, kan PNG vara det bästa valet, trots filstorleken.

Är du inte riktigt säker på om du behöver redigera bilden på nytt kan du spara den som PNG. När du senare vet att du inte kommer att ändra mer i bilden kan du spara om den som JPG och ladda upp den på nytt. Har du text i bilder blir oftast kvaliteten betydligt bättre med PNG än med JPG.

Sammanfattning PNG

  • Bästa valet för illustrationer och ritad grafik
  • Används med fördel för detaljerade diagram och skärmbilder från datorprogram.
  • Till alla bilder som innehåller genomskinlighet
  • Stödjer genomskinlighet i flera nivåer, vilket gör det lämpligt för t.ex. skuggor
  • Ju färre färger som används, desto mindre filstorlekar
  • Förlustfri komprimering en fördel om du ska redigera bilden igen

gif filformat

GIF

Även om vi använder JPG och PNG till nästan alla våra bilder på webben kan det vara bra att känna till filformatet GIF. GIF står för Graphics Interchange Format. Tidigare var det ett vanligt förekommande filformat för bilder på webben, särskilt för illustrationer och bilder med genomskinlighet. Idag kan man säga att PNG ersatt GIF som filformat.

Det finns fortfarande ett undantag då vi fortfarande använder GIF och det är när vi vill animera bilder för webben och sociala medier. GIF stödjer visning av bildruteanimerade bilder och är det enklaste sättet att visa bilder med rörelse på webben.

Sammanfattning GIF

  • Enda filformatet som stödjer animering
  • Små filstorlekar, betydligt mindre än PNG
  • Kan bara innehålla 256 färger
  • Förlustfri komprimering

webp filformat

WebP – ett nytt filformat för webben

Idag är det fortfarande JPG och PNG som gäller på webben. Men snart är det kanske ändring på det?

WebP är ett modernt bildformat som utvecklas av Google som ger betydligt mindre filstorlekar, men samma bildkvalitet som JPG och PNG. Dessutom stödjer WebP också genomskinlighet och animering. Än så länge stödjer inte alla webbläsare och webbsystem det nya filformatet, men med tiden kommer kanske WebP att ersätta JPG, PNG och GIF.

När man sparar bilder i formatet WebP kan man välja om man vill använda förstörande eller oförstörande komprimering. Oförstörande bilder i WebP-formatet väger ca 25% mindre än jämförbara PNG-bilder. WebP-bilder som sparats med förstörande komprimering väger 25-34% mindre än jämförbara JPG-bilder.

Alla webbläsare har inte stöd för det nya WebP-formatet och försöker du ladda upp bilder i formatet till WordPress tillåts det inte ännu av säkerhetsskäl. Men det kommer att fungera i framtiden.

Vill du testa att konvertera dina bilder till det nya WebP-formatet kan du läsa mer om hur det går till på Googles egen sida för det nya bildformatet. Det är fortfarande under utveckling så det finns ännu inget färdigt program att ladda ner. Är du tekniskt intresserad kan du kanske lista ut hur man kan testa det här nya bildformatet för webben.


Vill du lära dig mer om Photoshop?

Bland vårt stora utbud av kurser har vi bl.a. en grundkurs och fortsättningskurs i Photoshop, både på distans och i klassrum. På distanskurserna kan du välja mellan Photoshop CS5, CS6 och CC. I klassrum har vi alltid den senaste versionen av Photoshop.

>> Photoshop Grund Distanskurs         >> Photoshop Grund Fortsättningskurs

> Photoshop Grund Klassrumskurs    >> Photoshop Fortsättning Klassrumskurs


Vill du lära dig mer om WordPress?

Vi har flera kurser, både i klassrum och på distans i WordPress.

WordPress Grund kurs Distanskurs | Klassrumskurs
WordPress Fortsättning kurs Distanskurs | Klassrumskurs
WordPress Webbutik kurs Distanskurs | Klassrumskurs
WordPress Temat Divi Distanskurs | Klassrumskurs

Om processfärger och dekorfärger

Om processfärger och dekorfärger

En av de vanligaste frågor jag får på mina kurser handlar om färger. Hur skapar och sparar man färger på rätt sätt? Varför blir det inte samma färg i min trycksak som det jag såg på skärmen? Kan man spara egna färger till panelen färgrutor? Frågorna är många och den fråga det kanske råder mest oklarhet kring är användandet av dekorfärger.

CMYK är vanligaste valet

Färger är en av de viktigaste komponenterna i ditt dokument när du skapar en trycksak. Ett dokument består inte bara av enhetliga, täckande färger, utan fotografier kan innehålla tiotusentals färgnyanser. Du kan avbilda ett brett spektrum av färger genom att kombinera cyan, magenta, gult och svart, alltså de fyra CMYK-färgerna. Färgerna som man skapar i InDesign eller Illustrator genom att man blandar de fyra CMYK-färgerna kallas också för processfärger.

Ett InDesign-dokument kan innehålla objekt med många olika färgmodeller, men när man ska spara dokumentet som ett tryckfärdigt pdf-dokument konverteras alla färger till färgmodellen CMYK. CMYK är också oftast det mest ekonomiska alternativet när man ska trycka ett dokument.

Det finns en del begränsningar med färgmodellen CMYK, som är vad man kallar för enhetsoberoende. Med det menas att färgmodellen används oavsett vilken typ av yta man trycker på. Det innebär att en färg man trycker på olika material inte blir exakt likadan, eftersom färg sugs upp, blandas och torkar olika mycket på olika typer av ytor. Det finns också en gräns för vilka färger som kan skrivas ut med färgmodellen CMYK. Färger som riktigt ljusorange, starkt lila eller kanske marinblått är nyanser som inte riktigt går att skriva ut med CMYK.

Processfärger och dekorfärger

I de tillfällen när man att tryckresultatet ska återge en mer exakt färgnyans eller om man vill trycka en färg som inte är möjlig att trycka med CMYK-färgmodellen använder man istället något som kallas för dekorfärger.

I InDesign och Illustrator finns det två färgtyper, processfärger och dekorfärger. En processfärg är en färg som kommer till genom att man trycker de fyra CMYK-färgerna ovanpå varandra. På så sätt blandas färgerna på papperet och skapar alla de nyanser som vi ser som olika färger. Dekorfärger är färdigblandade färger man trycker som en enda färg. Genom att färgerna är färdiga innan de trycks utan att blandas på papperet får man mer förutsägbara resultat.

Många har aldrig hört uttrycket dekorfärg tidigare, men nickar igenkännande när de hör Pantone-färger.

dekorfärgerPantone är inte samma sak som dekorfärg, utan ett färgsystem för dekorfärger, skapat av det amerikanska företaget Pantone. Många sätter likhetstecken mellan Pantonefärger och dekorfärger, men det är lika felaktigt som att vi ofta säger att vi ska köpa en Wettex-duk. Egentligen menar vi diskduk, där Wettex är ett av de varumärken som tillverkar diskdukar. Det finns med andra ord fler färgsystem som är dekorfärger, exempelvis HKS, Toyo eller TRUMATCH.

Pantone – ett av många färgsystem för dekorfärger

Pantone är alltså inte det enda färgsystemet som är en dekorfärg, utan ett av många färgsystem. Men det är utan tvivel det absolut vanligaste färgsystemet för dekorfärger, så vanligt att det nästan blivit synonymt med uttrycket.

Har du sett Pantones vackra färgböcker? För att välja rätt färgnyans behöver man en referens och det får man med de här färgböckerna. Där kan man se alla färger som finns i ett bestämt färgsystem. Varje färg har ett eget nummer, t.ex. PANTONE 807 C. Färgnumret används av tryckeriet för att de ska veta exakt vilken färg som ska tryckas. Pantone skapar recept och tryckreferenser för hur olika färger ska blandas, så att man får exakt samma nyans oavsett var man trycker ett dokument.

Om du vill kan du köpa färgböcker med Pantones färgsystem och själv välja färger därifrån. De här böckerna är ganska dyra så vårda dom omsorgsfullt. Lägg exempelvis inte böckerna öppna i solljus då det bleker färgerna och då får du inte längre se hur färgnyanserna kommer att bli när de trycks.

Vad är det för skillnad på bestruket och obestruket?

dekorfärger

Bestruket papper är papper som belagts med ett bestrykningsskikt för att förbättra tryckegenskaperna. Skiktet består av en blandning av lera, krita och bindemedel. Ett bestruket papper kan vara lättbestruket, mediumbestruket eller högbestruket.

Obestruket papper är motsatsen till bestruket. Färgen tränger ner i papprets fibrer vilket medför att färgen blir mer motståndskraftig mot repor m.m. Om du vill ha bästa möjliga färg- och detaljåtergivning för bilder väljer du ett bestruket papper. Vid stora textmängder där läsbarheten är viktig är det obestrukna pappret oftast det bättre valet.

Dekorfärger är enhetsberoende till skillnad från CMYK som är enhetsoberoende. Det betyder att varje färgsystem tar hänsyn till vilken yta som färgen ska tryckas på. Därför finns det en hel rad olika färgsystem inom Pantone-världen. De två vanligaste är PANTONE+ Solid Coated och PANTONE+ Solid Uncoated, där Coated står för bestruket och Uncoated för obestruket.

Anledningen till att man har olika färgbibliotek beror på att färger blir en aning ljusare på bestruket papper eftersom färgen inte absorberas lika mycket som på obestruket. På obestruket papper som t.ex. tidningspapper kommer färger att vara mattare och ofta mörkare.

InDesign har flera färgbibliotek med dekorfärger

När vi gör nya färgrutor i InDesign eller Illustrator kan vi välja mellan olika färgbibliotek, bl.a. Pantones bibliotek för bestruket eller obestruket. Den bestrukna färgen heter t.ex. PANTONE 807 C, där C:et står för Coated. Den obestrukna färgen heter PANTONE 807 U, där U står för uncoated.

Det är viktigt att förstå skillnaden mellan de två biblioteken där, om vi jämför samma färgnummer, ser olika färgnyanser. Det vi ser är inte två olika färger utan hur samma färg kommer att se ut när man trycker den på bestruket eller obestruket papper. Om du däremot konverterar samma färg från de två olika biblioteken till CMYK-färger kommer du att få två olika CMYK-nyanser.

Det är inte heller säkert att den färgnyans du ser som PANTONE-färg ryms inom de tryckbara CMYK-färgerna. Det kan därför ske en viss färgskiftning om du konverterar färgerna.

Konvertera PANTONE till CMYK

Något som man ofta råkar ut för är att man har ett dokument som innehåller Pantone-färger, men ska trycka dokumentet som ett CMYK-dokument. Det finns flera sätt att konvertera dekorfärger till processfärger i Indesign.

Om du vet att du inte längre behöver Pantone-färgerna kan du gå till panelen Färgrutor och dubbelklicka på Pantone-färgerna. Där växlar du färgmodell från Pantone till CMYK och färgtyp från process till dekor. Då konverteras alla Pantone-färger i dokumentet till CMYK-färger.

Om du vill bevara Pantone-färgerna i dokumentet, men tillfälligt ska trycka dokumentet i CMYK kan du tillfälligt konvertera färgerna. Gå till panelen Färgrutor och klicka på menyknappen i panelens övre högra hörn. Nästan längst ner klickar du på Tryckfärgshanteraren. Om dokumentet innehåller Pantone-färger kan du bocka för Alla dekorfärger till processfärger. Bocka också för Använd Standard-LAB-värden för dekor. Eftersom dekorfärger i grunden bygger på LAB-värden blir de synliga resultaten mycket närmare de riktiga färger som finns.

Genom att ändra inställningen Alla dekorfärger till processfärger kommer alla dekorfärger att konverteras till processfärger när du sparar en pdf för tryck. Glöm bara inte att stänga av den här inställningen ifall du vid ett senare tillfälle vill trycka dokumentet med dina Pantone-färger.

Räkna med att om Pantonefärgen är utanför den färgrymd som är tryckbar med CMYK kan det ske en viss färgskiftning när du konverterar från dekor till processfärg. Känner du dig osäker på hur stora färgskiftningarna kommer att bli, be tryckeriet om ett provtryck. Ofta blir skiftningarna något mindre om du trycker digitalt än på traditionell tryckpress.

Pantone Color Bridge

dekorfärgerDet finns något som heter Pantone Color Bridge som ger en sida-vid-sida-jämförelse mellan Pantones dekorfärger och hur de närmast jämförbara färgerna för CMYK, Hex och RGB. Tanken med Pantone Color Bridge är att du själv ska kunna översätta Pantone-färger till CMYK när du behöver. Om du tittar och jämför färgerna i Pantone Color Bridge ser man att färgerna inte alltid är exakt samma nyanser, vilket inte är så konstigt, eftersom särskilt CMYK är en begränsad färgrymd.

Titta också på de CMYK-värden som står i Pantone Color Bridge och jämför med de värden som du själv får fram om du konverterar en Pantone-färg till CMYK i InDesign. Då kommer du se att det inte är exakt samma mix av CMYK-färger som föreslås av Pantone och det du själv får fram i InDesign. Min erfarenhet är att det ibland blir bättre konvertering om man gör det själv genom att konvertera färger i InDesign. Så innan du slaviskt konverterar färger efter Pantones förslag, testa själv i InDesign och se vilken metod som ger bästa resultat för dig.

Tänk på att vissa dekorfärger som metall eller pastellfärger kommer satt skifta en hel del vid konvertering. Guld blir gråbrunt, silver blir grått o.s.v. Det går inte att komma undan när du byter färgmodell. Du måste ha realistiska förväntningar och vara beredd på att det tryckta resultatet inte blir riktigt samma sak som du såg på skärmen.

Samma färger i olika program

Något som är viktigt är att vi ser samma färger i alla Adobes program. Börja med att ställa in färginställningarna och se till att du har samma färginställningar i alla program. Antingen går du till Redigera-menyn i respektive program och väljer Färginställningar eller så kan du öppna programmet Adobe Bridge och göra färginställningar för alla program på en gång. Även i Adobe Bridge hittar du färginställningarna i Redigera-menyn.

Adobes program har en rad förinställningar för färger. Om ditt företag inte har egna färginställningar kan du använda någon av de förinställningar som finns. I Europa är den vanligaste inställningen den som heter Prepress Europa 3. Välj den, säg OK och du har valt vilka färginställningar du ska använda. Om du gör det här i Adobe Bridge får du samma färginställningar i alla Adobes program.

För ännu bättre färgåtergivning kan du också öppna panelen Färgrutor, gå till meny-knappen i övre högra hörnet, välja Tryckfärgshanteraren och bocka för Använd Standard-LAB-värden för dekor.

För ännu bättre färgåtergivning kan du gå till Visa >> Förhandsvisa övertryck. Det är särskilt viktigt om du använder blandningslägen i dokumentet tillsammans med dekorfärger.

När ska man bevara dekorfärger eller konvertera till processfärger

Bevara dekorfärger:

  • Använd dekorfärger om du har färger som är särskilt viktiga att de återges med exakthet och du vet att tryckeriet trycker dekorfärger.
  • Om dokumentet ska skrivas ut digitalt och du vill komma så nära en viss dekorfärg som möjligt ska du välja dekorfärger. Om du själv konverterar dekorfärger till processfärger slänger du bort en del mättade färgnyanser som faktiskt kan återges med digitaltryck. Låt tryckeriet konvertera färgerna åt dig. Det kanske inte blir exakt likadant som dekorfärgen, men troligen betydligt bättre än om du gör det själv i InDesign.
  • Välj också att bevara dekorfärger om du inte vet ifall dokumentet ska tryckas med dekorfärger eller inte. Då kan tryckeriet sköta färgkonverteringen ifall dokumentet ska tryckas enbart med CMYK-färger.

Konvertera till processfärger:

  • Om tryckeriet vill att du skickar färdiga CMYK-dokument som inte innehåller processfärger. De har helt enkelt inte lust att göra konverteringen åt dig.
  • Vet du att dokumentet ska tryckas med CMYK-färgmodellen är det bättre att du kan kontrollera färgernas återgivning direkt i InDesign istället för att du blir överraskad när du får trycksaken i handen.

Och sist, men inte minst. Tänk på att tryckeriet är experter på färger så tveka inte att kontakta dom och fråga. Det är inget fel att erkänna att man kanske inte förstår och att ta hjälp av någon som vet bättre. Kanske råkar du på en och annan besserwisser som ska skriva dig på näsan hur duktig han eller hon är på färger? Men det kan det vara värt för att få de färger du önskar i dina trycksaker.

Vill du lära dig mer om InDesign?

>> Vill du gå på klassrumskurs har vi både grundkurs och fortsättningskurs i Stockholm.

>> För dig som inte kan komma till oss så har vi både grundkurs och fortsättningskurs på distans

Är WordPress säkert

Är WordPress säkert

WordPress är överlägset det mest populära sättet att bygga en webbplats. Tyvärr betyder det också att WordPress är ett populärt mål för hackers och hundratusentals webbplatser blir hackade varje år. Därför ställer sig många frågan hur det ligger till med WordPress och säkerhet. Nu finns det data som berättar hur många webbplatser med WordPress blir hackade och varför de blivit det och resultatet visar att det ytterst sällan beror på WordPress utan ofta handlar om otillräckliga rutiner och dåligt uppdaterade tillägg. WordPress i sig självt är säker programvara.

Så här blir webbplatser hackade

Vi kan alltså konstatera att många WordPress-webbplatser blir hackade varje år. Men frågan är hur det går till? Är det ett problem med WordPress eller blir webbplatser hackade för att de har dåliga och bristfälliga rutiner. Nu finns det data från säkerhetsföretaget Sucuri som ger oss svaren.

Först och främst har de jämfört WordPress med andra CMS-system och där är WordPress det CMS som blir allra mest hackat. Men det som man ska ta med i beräkningen är att WordPress också står för den största andelen webbplatser totalt. Jämför man andelen hackade webbplatser med den totala marknadsandelen kan man se att WordPress, Joomla och Drupal står för huvuddelen av hackade webbplatser. WordPress har en något högre andel jämfört med marknadsandelar (83-60%) , Drupal har en betydligt lägre andel (4,0-1,6 %) och Joomla (13,1-6%) mer än dubbelt så hög andel. Med tanke på hur få som använder Magento som är ett ehandelssystem har de en anmärkningsvärt hög andel (6,5-2,4%). (första siffran andel hackade webbplatser, andra siffran marknadsandelar CMS)

PHP-versioner WordPress och säkerhet

Andel hackade webbplatser bland CMS

Ej uppdaterad mjukvara

När vi nu vet att många webbplatser med WordPress blir hackade är det dags att titta på varför. Tittar man på data från hackade webbplatser, både WordPress och andra CMS kan man se att en stor andel hackade webbplatser är de som inte har uppdaterats till senaste versionen av mjukvaran. Intressant att se är dock att andelen för WordPress är betydligt lägre än på andra plattformar. Kan det bero på att det är enklare att uppdatera WordPress?

PHP-versioner WordPress och säkerhet

Andel hackade webbplatser som inte uppdaterats till senaste versionen

Gräver man ännu djupare i statistiken kring WordPress upptäcker man att merparten av hackade WordPress-webbplatser använder versioner av WordPress 3.X. Med andra ord, de är inte uppdaterade på väldigt länge.

PHP-versioner WordPress och säkerhet

WordPress-versioner för hackade webbplatser

Statistik visar att 38% av alla webbplatser med WordPress inte har uppdaterat till senaste versionen och att det är de webbplatserna som står för huvuddelen av alla hackade webbplatser.

Sammanfattat kan man säga att de som utvecklar WordPress är duktiga på att snabbt agera om någon upptäcker ett säkerhetsproblem med WordPress. Om man på en gång tillämpar de säkerhetsuppdateringar som WordPress släpper är det mycket osannolikt att webbplatsen kommer att bli hackad till följd av problem med WordPress kärna. Men struntar du i att uppdatera WordPress utsätter du dig alltid för en risk eftersom hackare alltid letar efter svagheter i koden och det är de svagheterna man åtgärdar med uppdateringarna.

Ej uppdaterade tillägg eller teman

En av orsakerna till WordPress popularitet är det stora utbudet av tillägg och teman. Idag finns det mer än 55 000 tillägg och 10 000 teman att välja bland. Men det stora utbudet av tillägg och teman utgör också en säkerhetsrisk. De flesta utvecklare följer kodstandarder och uppdaterar tillägg och teman kontinuerligt. Men det finns också tillägg och teman som överges av utvecklare och som därför aldrig uppdateras. Så frågan är hur stort är problemet? En undersökning från säkerhetsföretaget WordFence visar att över 60% av de webbplatser som vet hur de blivit hackade vet att det beror på en sårbarhet i ett tillägg eller tema.

PHP-versioner WordPress och säkerhet

Ska man peka ut några särskilda tillägg så visar undersökningar att tre tillägg står för mer än 15% av alla hackade webbplatser med WordPress. Det är tilläggen Revolution Slider, Timthumb och Gravity Forms. Men är de tilläggen särskilt sårbara eller dåliga på att skicka ut uppdateringar? Inte alls, samma undersökning visar att webbplatser som använt de tilläggen och blivit hackade inte har installerat tilläggens uppdateringar. Återigen pekar data på att om man installerat utvecklarnas uppdateringar hade webbplatserna aldrig blivit hackade.

Se upp för okända utvecklare

Nätet kryllar med tillägg och teman som man kan ladda ner från olika webbplatser. En del är gratis, andra kostar några kronor. Men man ska se upp när man laddar ner eller köper tillägg och teman från utvecklare man inte riktigt vet vilka de är. När man köper ett tillägg från en tredjepartsutvecklare måste man också lita på att de fångar upp eventuella säkerhetsproblem och åtgärdar dom med uppdateringar. Så köp aldrig något från utvecklare du inte litar på och vet att de kontinuerligt uppdaterar sin mjukvara.

Användarnamn och lösenord för WordPress och säkerhet

Ett väldigt vanligt sätt att hacka en webbplats är att gissa användarnamnet och lösenordet. Oftast är det inte en fysisk person som gör det utan det handlar om maskiner som testar olika kombinationer av användarnamn och lösenord. En undersökning visar att 16% av alla hackade webbplatser har blivit det p.g.a. användaruppgifter som hackaren listat ut. Det handlar inte heller bara om inloggningsuppgifter till WordPress adminpanel utan kan lika gärna vara en arbetsdator som lämnats inloggad eller att man tagit sig in via ett ftp-konto.

När en hacker har hittat nyckeln till en webbplats spelar det ingen roll hur mycket du uppdaterat WordPress, teman och tillägg.
När du installerar WordPress föreslår man ett svårt lösenord, men du som användare kan ändå välja ett enkelt. Så det är alltid fortfarande upp till användarna att hålla alla inloggningsuppgifter säkra och även använda starka lösenord på webbhotell och FTP. Idag finns det också möjligheten att använda tvåfaktorsautentisering för att logga in i WordPress.

Supply chain attacks

På senare tid har det upptäckts ett par fall av Supply Chain Attacks. Det är när en hackare köper ett tidigare populärt tillägg, lägger till skadlig kod till tillägget och sen när tillägget uppdateras kommer också den skadliga koden följa med in på webbplatsen.
Den här typen av attacker är svåra att försvara sig mot eftersom de utnyttjar det faktum att det är viktigt att uppdatera all mjukvara. Ett sätt att försvara sig mot det här är att försöka hålla ögonen på om de tillägg man använder försvinner från WordPress bibliotek. WordPress upptäcker oftast den här typen av försök och tar då bort tillägget från biblioteket. Problemet är att den som redan har tillägget kan få den skadliga koden via uppdateringar som inte skickas ut via WordPress bibliotek.
En bra strategi för säkerhetskopiering kan hjälpa dig att återställa webbplatsen utan någon permanent skada.

Webbhotell och gammal teknologi

Även webbhotellet och den teknik de använder spelar roll för säkerheten. PHP 7 innehåller många säkerhetsmässiga förbättringar jämför med PHP 5. Ändå så är det bara 33% av alla webbplatser som använder PHP 7 eller bättre. Det här är ju inget du som användare kan styra utan det är webbhotellet som bestämmer.
WordPress har satt en nedre gräns för PHP-version till 5.6. Ändå så är det fortfarande hela 28% av alla WordPress-webbplatser som använder en PHP-version lägre än 5.6.

PHP-versioner WordPress och säkerhet

Andra saker som webbhotellet kan säkra är en fungerande brandvägg, automatiska säkerhetsuppdateringar, tvåfaktorautentisering och automatiska säkerhetskopieringar. En sak du kan kontrollera med webbhotellet är hur de hanterar en hackad webbplats. Konstaterar dom bara faktum eller kommer du få hjälp att återställa webbplatsen.

Vem ansvarar för webbplatsens säkerhet

Med allt det vi vet om WordPress och säkerhet, vilka slutsatser kan vi då dra? Vi vet att 83% av alla WordPress-webbplatser har någon funktion som gör webbplatsen sårbar. WordPress arbetar aktivt med säkerheten och har ca 50 personer som enbart arbetar med det. Ungefär hälften är anställda av Automattic som utvecklar WordPress och den andra hälften kommer från de största säkerhetsföretagen.
När teamet har hittat ett säkerhetshål och åtgärdat det med en buggfix går de också ut med ett meddelande om att de åtgärdat problemet. Det de inte arbetar med är att se över teman och tillägg. Det är istället frivilliga WordPress-användare som försöker hålla koll på de delarna av WordPress. De gör ett bra jobb, men med så många teman och tillägg att välja bland är det ändå svårt att hålla ordning på samtliga.

Är WordPress säkert – sammanfattning?

Det viktigaste är att aldrig resonera som vissa gör kring uppdateringar. Varför väcka den björn som sover, varför uppdatera en webbplats som fungerar? Men tänker man på det sättet kommer man förr eller senare få webbplatsen hackad.

Inget CMS-system är 100% säkert, men om vi tittar på WordPress finns det en säkerhetsapparat kring själva WordPress kärna som gör det svårt att hacka WordPress den vägen. Om webbansvariga följer de rekommendationer för säkerhet som finns är WordPress finns det inget som säger att det skulle vara mer osäkert än andra CMS, snarare tvärtom.

Tänk på det här för en säker webbplats:

  • Se till att hålla WordPress, tillägg och teman uppdaterade
  • Välj tillägg och teman från välrenommerade utvecklare och källor du litar på
  • Kan du välja mellan FTP och SFTP, välj alltid SFTP som är säkrare
  • Använd starka lösenord för din WordPress inloggning och FTP-anslutning
  • Fundera över tvåfaktorsautentisiering
  • Använd SSL på webbplatsen så krypteras alla dataöverföring
  • Välj ett webbhotell med säker miljö och senaste teknik som PHP 7+

Så vi ser att problemet sällan handlar om WordPress och säkerhet utan att man inte följer de råd och rekommendationer som finns. Om du följer råden ovan är din webbplats säker och otroligt svår att hacka och du kan sova lugnt på nätterna.

>> Vill du läsa hela Sucuris rapport?


Vill du lära dig mer om WordPress?

Vi har kurser både på distans och i klassrum

>> WordPress Grund distanskurs >> WordPress Fortsättning distanskurs

>> WordPress Grund klassrumskurs. >> WordPress Fortsättning klassrumskurs

Gutenberg – nytt gränssnitt i WordPress

Gutenberg – nytt gränssnitt i WordPress

Inom kort är det dags för en uppdatering av WordPress och den här gången är versionen WordPress 5.0. Till skillnad från förra gången WordPress uppdaterade versionsnumret med ett heltal, då förändringarna inte var särskilt revolutionerande, kommer det med 5.0 verkligen att märkas att det handlar om en ny version. Det beror på det nya redigeringsgränssnittet, Gutenberg.

GutenbergWordPress-gemenskapen har varit delad i två delar, för och emot. Men det spelar ingen roll vad man tycker om att WordPress kommer att ändra redigeringsgränssnittet. Det kommer att hända vare sig man tycker om det eller inte. Det man också ska tänka på är att många redan idag arbetar i ett helt annat redigeringsgränssnitt i form av en page builder, sidbyggare. Så många är redan vana vid att arbeta på ett annat sätt än i WordPress traditionella redigerare.

Ett WordPress i förändring

Det nya gränssnittet som kallas för Gutenberg är uppkallat efter boktryckarkonstens fader Johannes Gutenberg, som levde på 1400-talet. Men den här gången handlar det om webbpublicering och 2000-talet. Nackdelen med det nya gränssnittet är att alla som arbetar med WordPress måste lära sig ett helt nytt sätt att redigera text och bilder. Fördelen är att vi får många fler redigeringsmöjligheter än tidigare.

I det tidigare gränssnittet har vi arbetat med text och bilder ungefär som i ett traditionellt Worddokument. Men när det handlar om att bygga inlägg och sidor med bilder, multimedia, inbäddat innehåll från sociala medier, omröstningar och andra element har det ibland krävts en mix av metoder som inte alltid var intuitiva. I Gutenberg kommer vi att arbeta med innehållet på ett helt nytt sätt som kallas för blocks. Vad översättningen blir på svenska vet vi inte ännu, men block eller sektioner passar bra.

Gutenberg bygger på block

Med Gutenberg delar man in innehållet i block. Varje stycke text blir ett eget block, varje bild blir ett eget block o.s.v. Varje block kan man formatera på olika sätt, oberoende av varandra. Man kan flytta om ordningen på blocken som man vill. Vi hittar fortfarande de vanliga delarna i redigeraren som Publicera-funktionen, kategorier och taggar, utvald bild o.s.v. Men det finns också en del nya funktioner som gör arbetat med sidor och inlägg bättre.

Gutenberg kommer i tre faser

GutenbergGutenberg är fortfarande i betaversion som ett tillägg man kan testa. För varje ny uppdatering faller bit för bit på plats och förhoppningsvis kan vi förvänta oss en positiv upplevelse när vi ska redigera i WordPress i framtiden. Och redan nu, innan Gutenberg är helt färdigt, har det börjat komma tillägg som kan bygga ut funktionerna ytterligare. Utvecklingen av Gutenberg sker i tre stadier. Den första är den version som kommer att komma med i WordPress 5.0. I nästa fas kommer man inkludera sidmallar och i den sista fasen kommer Gutenberg bli helt komplett.

Det blir kanske något bökigare att arbeta i redigeringsgränssnittet än tidigare, men samtidigt får vi också betydligt fler möjligheter. Det som är positivt är att det nya gränssnittet fortfarande ger möjligheter för den som inte behärskar eller vill arbeta med kod att göra ännu mera i WordPress än tidigare. Så nu är det bara att vänta och se vad vi kommer att tycka när Gutenberg är färdigt att presentera i uppdateringen till WordPress 5.0.

Läs mer om Gutenberg

 

Vill du lära dig mer om WordPress?

WordPress Grund kurs Distanskurs | Klassrumskurs
WordPress Fortsättning kurs Distanskurs | Klassrumskurs
WordPress Webbutik kurs Distanskurs | Klassrumskurs
WordPress Temat Divi Distanskurs | Klassrumskurs

Fler penslar till Photoshop – ladda ner och installera

Fler penslar till Photoshop – ladda ner och installera

Penslar till Photoshop är egentligen bara former med struktur som du använder för att sprida färger i en bild. De flesta som använder Photoshop till bildbehandling kommer kanske i kontakt med den runda penseln och ändrar den penselns kanter. Men penslar handlar ju långt mer än att bara göra linjer. Vi kan använda penslar för belysning, textur, digital målning och mycket mer. Det finns en del förinstallerade penslar i Photoshop, men du kan också ladda ner fler penslar och installera dom till Photoshop. Det ger dig fler alternativ med målningsverktygen, men eftersom även andra verktyg använder penslar har du nytta av fler penslar i många olika situationer.

Sök efter penslar till Photoshop att ladda ner

Börja med att söka efter penslar till Photoshop genom att skriva ”brushes for Photoshop” i en sökmotor. Det finns både dom som kostar en slant och andra som är helt gratis. Här är ett exempel på en sida som listar upp var du kan hämta gratis Photoshop-penslar. Gå till sidan som har de penslar du vill ha och ladda ner dom. Oftast hamnar de som en zip-fil i mappen Hämtade filer. I det här fallet heter zipfilen ”PaintLines_by_env1ro.abr.zip”, men namnet beror ju på vilka penslar du laddat ner och varifrån du laddat ner dom.

Du behöver filen som ligger inuti zipfilen så öppna upp zip-filen med det program du brukar använda för det. Har du Mac brukar man kunna dubbelklicka på zipfilen. Använder man Windows öppnar sig en Extrahera-funktion om man klickar på en zip-fil och så packar man upp den därifrån. När du är klar har du en fil med ändelsen .abr. En fil med ändelsen ABR är en penselfil för Photoshop.

Installera penslar

För att få in de nya penslarna öppnar du Photoshop och markerar penselverktyget.

Klicka sen på penseln som du ser uppe i kontrollpanelen.

Till höger om de olika penselinställningar och utseenden som finns hittar du också en symbol som ser ut som ett kugghjul. Där kan du komma åt inställningarna för pensel. Klicka på kugghjulet.

            

I menyn som öppnar sig klickar du på Importera penslar. Leta upp dina nedladdade penslar i Windows/Finder, markera filen och klicka på Öppna.

Då hamnar penslarna längst ner i listan med alla penslar. När jag installerade penslarna jag laddade ner för den här texten hamnade dom i en egen mapp, under de förinstallerade penslarna.

Man kan också ladda in nya penslar i panelen Penslar som man hittar under Fönster >> Penslar. Resultatet blir likadant.

Bra att veta om penslar till Photoshop

  • Om man vill kan man ladda in flera penselfiler samtidigt till biblioteket för penslar.
  • Man kan dra och släppa penslarna, ut ur mappen så att de hamnar i samma rad av penslar som de förinstallerade.
  • Man kan också skapa egna penselgrupper och dra och släppa ner penslarna i de olika grupperna om man vill få mer ordning på sina penslar.

Som du ser är det enkelt att fylla på Photoshop med nya roliga varianter av penslar.


Vill du lära dig mer om Photoshop?

Bland vårt stora utbud av kurser har vi bl.a. en grundkurs och fortsättningskurs i Photoshop, både på distans och i klassrum. På distanskurserna kan du välja mellan Photoshop CS5, CS6 och CC. I klassrum har vi alltid den senaste versionen av Photoshop.

>> Photoshop Grund Distanskurs         >> Photoshop Grund Fortsättningskurs

>> Photoshop Grund Klassrumskurs    >> Photoshop Fortsättning Klassrumskurs

Objektformat – Ange storlek och position i InDesign

Objektformat – Ange storlek och position i InDesign

De flesta InDesign-användare använder nog Styckeformat relativt ofta. Är man lite mer erfaren har man säkert också börjat dra nytta av Teckenformat. Arbetar man med tabeller har man förhoppningsvis hittat Cell- och Tabellformat. Men förvånansvärt få använder Objektformat trots att man kan spara otroligt mycket tid på den funktionen. Och nu har Objektformat blivit ännu kraftfullare genom att man kan ange storlek och position med Objektformat i InDesign.

objektformatDet enklaste sättet att använda format i InDesign, oavsett om det handlar om Stycke- Tecken- Cell-, Tabell- eller Objektformat är att först manuellt formatera det man vill spara som ett format och sen låta InDesign ”suga upp” alla egenskaper när man gör själva formatet.

Så säg att man har ett dokument där man vill att en symbol ska ligga högst upp till vänster, men det ska vara olika symboler på olika sidor. Då passar det alldeles utmärkt att använda funktionen som låter en spara position och storlek i ett objektformat.

objektformatSkapa ett nytt dokument

Man börjar med att skapa ett dokument i de dimensioner som man ska ha. Eftersom inställningen i objektformatet kommer att basera sig på x och y-positionen i dokumentet spelar det roll hur stort dokumentet är och vilka inställningar man gör för exempelvis marginaler.

Efter det kan man börja bygga mallar och sidor i den ordning man vill. Men här ska vi bara fokusera på objektformatet för placering av symbolerna. Så det enda man behöver göra då är att montera in en symbol i dokumentet och placera den symbolen på exakt den plats där man vill ha symbolerna på varje sida.

objektformat

När symbolen ligger på plats markerar man den där man vill ha den och öppnar panelen Objektformat. Eftersom symbolen är markerad kommer objektformatet att ”suga upp” alla inställningar för hur objektet ser ut. I det här fallet har objektet inget särskilt utseende som linjefärg eller fyllning, men det här fungerar för alla typer av objekt som bildrutor, textrutor och vanliga former med färgfyllningar, linjer och skuggor.

objektformat

Skapa ett nytt objektformat

I panelen Objektformat klickar man på menyknappen uppe i högra hörnet och väljer ”Nytt objektformat”. Högst upp till vänster står det ”Alternativ för storlek och position”. Klicka där så ser man att inställningarna för storlek och position inte är aktiverade. Eftersom vi vill att symbolerna ska vara lika stora och ligga på exakt samma plats på alla sidor aktiverar vi både inställningarna för storlek och position.

För att sätta på funktionen för storlek klickar vi där det står ”Inget” och väljer något av alternativen. Som du ser kan du välja mellan bredd, höjd eller båda. Efter det gör vi samma sak med position och här kan man välja mellan x och y eller båda. X står för position i sidled och Y i höjdled.

objektformat

Anpassa innehållet proportionellt

Chansen är också stor att man vill anpassa innehållet efter bildramen. Jag har testat att lägga till alternativet Passningsalternativ för ram tillsammans med den här funktionen för storlek och position, men inte fått det att fungera till 100%. Kanske en bugg eller inte? Så jag sparade det här Objektformatet för storlek och position och sen gjorde jag ett nytt Objektformat för Passningsalternativet. Där väljer man ”Anpassa innehållet proportionerligt”, så att symbolen storleksmässigt anpassar sig till ramen. När man är klar med inställningarna kan man döpa objektformatet och sen spara det. Och då fungerar allt som det är tänkt.

objektformat

Objektformatet färdigt att användas

Då är det dags att testa objektformatet och för att göra det monterar vi in de symboler som ska ligga i dokumentet, en symbol på varje sida. Efter det är det bara att markera en symbol med markeringsverktyget (svarta pilen) och sen klicka på objektformatet. Då placerar sig bildramen med symbolen på rätt plats, i rätt storlek och med rätt anpassning till ramen, och det fungerar varje gång man använder objektformatet. Och fantastiskt nog klarar också den här funktionen av att hålla reda på vänster- och högersidor.

objektformat

Det kanske inte är varje dag man får nytta av den här uppdateringen av objektformaten. Men jag kan i alla fall komma på 4-5 arbetsuppgifter som jag gjort genom åren där jag hade kunnat spara mycket tid om de här inställningarna funnits då.

Vill du lära dig mer om InDesign?

> Vi har både grundkurs och fortsättningskurs på distans

> Vill du hellre gå en kurs i klassrum har Mediakurser både grundkurs och fortsättningskurs i Stockholm.

Pin It on Pinterest

Share This