Forum Mjukvara Programmering och digitalt skapande Tråd

Pixlig text på hemsida

1
Skriv svar
Permalänk
Medlem
●

Pixlig text på hemsida

Har gjort bilder att ha som rubriker på en hemsida som jag försöker göra, problemet är att texten blir pixlig i kanterna. Vad gör man för att undvika detta? Det är pngbilder med enbart text, har provat olika inställningar på texten i photoshop, men resultatet blir pixligt på hemsidan hur jag än gör.

Visa signatur

muufoto.se

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Det är inte så att du INTE visar bilderna i originalstorleken?

Redigera
Citera flera Citera
Permalänk
Medlem
●

jag skulle oxå gissa på att du har satt en bestämd bredd och/eller längd.
och om så inte är fallet så testa att spara den som ngt annat format i photoshop

Redigera
Citera flera Citera
Permalänk
Medlem
●

uppenbarligen en upplösningsfråga dvs bild / tvingad bildstorlek i koden.
Se till att undersöka så du inte använder en bestämd storlek i koden som ej stämmer överrens med bildernas storlek.

Visa signatur

Jag gillar datorspel!

Redigera
Citera flera Citera
Permalänk
Medlem
●

Har samma storlek på bilderna i koden som de är i orginal. Lyckades få bort pixligheten i ena rubriken genom att ändra från png8 till png24 (vad det nu är för skillnad...), och ändra från "bicubic" till "bilinear i bildkvalitet. De andra rubrikerna är fortfarande pixliga-trots samma behandling- när jag tittar på sidan via localhost, men inte om jag öppnar sidan i mappen som är sparad i biblioteket...

Provade även att ändra till gifformat, blev sämre då.

Visa signatur

muufoto.se

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Marie96:

Har samma storlek på bilderna i koden som de är i orginal. Lyckades få bort pixligheten i ena rubriken genom att ändra från png8 till png24 (vad det nu är för skillnad...), och ändra från "bicubic" till "bilinear i bildkvalitet. De andra rubrikerna är fortfarande pixliga-trots samma behandling- när jag tittar på sidan via localhost, men inte om jag öppnar sidan i mappen som är sparad i biblioteket...

Provade även att ändra till gifformat, blev sämre då.

Gå till inlägget

kanske länka till sidan/screenshot/kod?

Visa signatur

R5 2600 | RTX 2060 Super | SSD | 16 GB RAM | Gigabyte DS3H| 750 WATT

Redigera
Citera flera Citera
Permalänk
Medlem
●

Tror att jag ändå löste problemet, då det ser vettigt ut när jag öppnar sidan från andra datorer. Sidan ligger än så länge bara på min dator, så det blir ingen länk..

Tack för input!

Visa signatur

muufoto.se

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

gör bilderna i illustrator då slipper du att dom blir pixliga

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av xarl:

gör bilderna i illustrator då slipper du att dom blir pixliga

Gå till inlägget

Ok, intressant!
Har iofs aldrig använt illustrator, men det kanske är värt att prova.

Visa signatur

muufoto.se

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Marie96:

Har samma storlek på bilderna i koden som de är i orginal. Lyckades få bort pixligheten i ena rubriken genom att ändra från png8 till png24 (vad det nu är för skillnad...), och ändra från "bicubic" till "bilinear i bildkvalitet. De andra rubrikerna är fortfarande pixliga-trots samma behandling- när jag tittar på sidan via localhost, men inte om jag öppnar sidan i mappen som är sparad i biblioteket...

Provade även att ändra till gifformat, blev sämre då.

Gå till inlägget

Jag gissar på att du har genomskinlighet i dina bilder. Stämmer det? PNG8 har samma stöd som gamla GIF-bilder, dvs en färg av de 256 tillgängliga kan vara genomskinlig. PNG24 sparas med alfa-transparens, där varje pixel har ett alfavärde mellan 0 och 255: 0 är helt genomskinligt och 255 är helt solitt. Bicubic/bilinear är algoritmer som kan användas vid förstorning/förminskning av bilden och ingenting som har effekt efter att slutresultatet sparas.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Rekordmedlem ★
●

Ska du lätt kunna ändra storlek på bilder utan att förändra kvaliten ska du anväda vektorgrafik, då lagras bilderna som "formler och adresser" istället för bildpunkter, man kan då räkna ut en bild i vilken storlek som helst, om den blir 1mm eller 1mil spelar ingen roll, upplösningen blir densamma.

Visa signatur

Ryzen 5 2400G, Asus ROG STRIX B350-F Gaming, 500GB Samsung 970EVO NVMe M.2 och en väldig massa masslagring. Seasonic Focus+ Gold 650W, Antec P 180 med Schyte o Sharkoon fläktar via en t-balancer, Tittar på en Acer ET430Kbmiippx 43" 4K
Främre ljudkanalerna återges via Behringer DCX2496, högtalare Truth B3031A, Truth B2092A Har också Oscilloskop, mätmikrofon och en Colorimeter.

Redigera
Citera flera Citera
Permalänk
Medlem
●

PNG8 betyder att bilden har 8bitars färgdjup, dvs du kan endast ha 256 olika färger i bilden.
PNG24 är då såklart 24bitars fjärgdjup vilket betyder ca 16 miljoner färger. Detta kan leda till att det blir pixligt om din orginalbild innehåller fler än 256 färger. Har du text så behövs det ytterligare färger för anti-aliasing.

Jag skulle inte rekommendera att köra med någon form av vektorgrafik på webben, stödet i webbläsarna är väldigt dåligt. Det är bättre att köra PNG24 eller JPEG (beroenden på hur bilden ser ut). Det kan dock vara värt att göra orginalet i något vectorbaserat program och sedan konvetera det till ett pixelbaserat format såsom PNG.

I det här fallet skulle jag nästan våga lova att det hade med omskalningsalgoritmen att göra. I photoshop så står det vilken algoritm som är bäst för vilken typ av skalning som görs. Tex så står det att "Bicubic Sharper" är bäst när man förminskar bilder. Det är inte alltid att det stämmer så det kan vara värt att prova några olika för att se vilken som blir bäst.

Det kanske låter bökigt med omskalningsalgoritmer men om man tänker efter så förstår man att det handlar om någon form av avrunding. Säg att du har en bild som är 100x100 pixlar och du vill skala om den till 70x70, då är det inte helt enkelt att räkna ut vilken färg varje pixel skall ha. Det är här dom olika algoritmerna kommer in. Wikipedia har sidor för många av algoritmerna, så det går att läsa mer om man vill veta den exakta skillnaden.

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Tjofras:

PNG8 betyder att bilden har 8bitars färgdjup, dvs du kan endast ha 256 olika färger i bilden.
PNG24 är då såklart 24bitars fjärgdjup vilket betyder ca 16 miljoner färger. Detta kan leda till att det blir pixligt om din orginalbild innehåller fler än 256 färger. Har du text så behövs det ytterligare färger för anti-aliasing.

Jag skulle inte rekommendera att köra med någon form av vektorgrafik på webben, stödet i webbläsarna är väldigt dåligt. Det är bättre att köra PNG24 eller JPEG (beroenden på hur bilden ser ut). Det kan dock vara värt att göra orginalet i något vectorbaserat program och sedan konvetera det till ett pixelbaserat format såsom PNG.

I det här fallet skulle jag nästan våga lova att det hade med omskalningsalgoritmen att göra. I photoshop så står det vilken algoritm som är bäst för vilken typ av skalning som görs. Tex så står det att "Bicubic Sharper" är bäst när man förminskar bilder. Det är inte alltid att det stämmer så det kan vara värt att prova några olika för att se vilken som blir bäst.

Det kanske låter bökigt med omskalningsalgoritmer men om man tänker efter så förstår man att det handlar om någon form av avrunding. Säg att du har en bild som är 100x100 pixlar och du vill skala om den till 70x70, då är det inte helt enkelt att räkna ut vilken färg varje pixel skall ha. Det är här dom olika algoritmerna kommer in. Wikipedia har sidor för många av algoritmerna, så det går att läsa mer om man vill veta den exakta skillnaden.

Gå till inlägget

Tack för den utförliga förklaringen!

En följdfråga, när ska man använda de olika formaten? Har använt png till text, där jag vill ha en genomskinlig bakgrund, och gif till vanliga bilder. Men det kanske är bättre att använda jpeg då?

Visa signatur

muufoto.se

Redigera
Citera flera Citera
Permalänk
Avstängd
●

Prova att använda vektorbaserad grafik, SVG. Finns ett sjukt bra gratisprogram som heter Inkscape om du inte har illustrator. Landsflaggor på wikipedia är ofta gjorda i Scalable Vector Graphics.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Tjofras:

PNG8 betyder att bilden har 8bitars färgdjup, dvs du kan endast ha 256 olika färger i bilden.
PNG24 är då såklart 24bitars fjärgdjup vilket betyder ca 16 miljoner färger. Detta kan leda till att det blir pixligt om din orginalbild innehåller fler än 256 färger. Har du text så behövs det ytterligare färger för anti-aliasing.

Jag skulle inte rekommendera att köra med någon form av vektorgrafik på webben, stödet i webbläsarna är väldigt dåligt. Det är bättre att köra PNG24 eller JPEG (beroenden på hur bilden ser ut). Det kan dock vara värt att göra orginalet i något vectorbaserat program och sedan konvetera det till ett pixelbaserat format såsom PNG.

I det här fallet skulle jag nästan våga lova att det hade med omskalningsalgoritmen att göra. I photoshop så står det vilken algoritm som är bäst för vilken typ av skalning som görs. Tex så står det att "Bicubic Sharper" är bäst när man förminskar bilder. Det är inte alltid att det stämmer så det kan vara värt att prova några olika för att se vilken som blir bäst.

Det kanske låter bökigt med omskalningsalgoritmer men om man tänker efter så förstår man att det handlar om någon form av avrunding. Säg att du har en bild som är 100x100 pixlar och du vill skala om den till 70x70, då är det inte helt enkelt att räkna ut vilken färg varje pixel skall ha. Det är här dom olika algoritmerna kommer in. Wikipedia har sidor för många av algoritmerna, så det går att läsa mer om man vill veta den exakta skillnaden.

Gå till inlägget
Skrivet av Marie96:

Tack för den utförliga förklaringen!

En följdfråga, när ska man använda de olika formaten? Har använt png till text, där jag vill ha en genomskinlig bakgrund, och gif till vanliga bilder. Men det kanske är bättre att använda jpeg då?

Gå till inlägget

Jag kan lova att det inte har med omskalningsfunktionen att göra. Om texten är pixlig i kanterna beror det på att den sparats med bristfällig transparens som jag skrev ovan..

Det är inte bättre att använda JPEG; om något är att det är sämre då JPEG helt saknar stöd för genomskinlighet och dessutom försämrar kvaliteten på materialet.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem
●

Ett tips är ju att använda save-to-web funktionen!
Då ser du ju direkt på bilden hur den förändras med olika typer av kvaliteter osv!

Det var det första vi fick lära oss i webbdesignen i skolan iaf.

Visa signatur

Spelburk: Fractal Design R4 * AMD Ryzen 1600X kyld av H80i V1 * ASUS GTX770 DCII * Corsair Vengeance LPX 16GB DDR4 2666MHz * ASUS PRIME B350-PLUS * EVGA Supernova G2 750W * 1TB HDD * Samsung EVO 250GB SSD
Tillbehör: Steelseries Rival 300 * SweC Qpad Musmatta * BenQ XL2411T 144hz * BenQ 24" * Qpad MK-50 * Hyper X Cloud *

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av lucifer579:

Ett tips är ju att använda save-to-web funktionen!
Då ser du ju direkt på bilden hur den förändras med olika typer av kvaliteter osv!

Det var det första vi fick lära oss i webbdesignen i skolan iaf.

Gå till inlägget

Jag använder den! Svårt att se hur det blir på riktigt iaf..
Skiljer sig ganska mkt när det väl kommer upp i webbläsaren.

Visa signatur

muufoto.se

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara