Just nu i M3-nätverket
Gå till innehåll

Lite råd om bilder och webbsida


Datamilla

Rekommendera Poster

Jag har gjort en sida med bilder som är länkade från imagecave.com för att få ner storleken på sidan (max 10Mb totalt). Varje bild är i verkligheten ca 750-800kB. Har sparat dem för webben i photoshop cs för att få ner storleken. Tyvärr så blir bildena "pixliga" vilket de inte är i verkligheten. Kan jag göra på något annat sätt. Vill gärna ha thumbnails som förstoras när man klickar på dem. Webbsidan har för tillfället inget annat syfte än för inlärning men kommentarer är välkomna (jag vet att koden är amatörmässig).

 

http://goto.glocalnet.net/putte_milla/

 

Tack

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Hej Milla

 

Tyvärr vet jag inte hur PS gör när dom sparar för webben, men jag kan ju se, när jag klickar på dina bilder, att dom är väldigt olika stora.

 

Dasset är 640 x 480 pixlar.

Hibiskusen är 1280 x 960 pixlar.

Kärleksörten är 1600 x 1200 pixlar.

 

Ändå visas dom som lika stora bilder!

 

Det står i FF högst upp vilken storlek dom har och om dom är skalade eller ej, vad det nu betyder i det här sammanhanget.

 

Är dom tagna med olika kameror som har olika upplösning? Är dom beskurna och sen uppförstorade för att få ett enhetligt format?

 

Jag har inga lösningar, men kanske några hintar om varför det blev som det blev.

 

Överlag fina bilder, tyckte jag i alla fall.

 

Länk till kommentar
Dela på andra webbplatser

Thomas Tydal

Jag rekommenderar att du inte använder såna "automatiska/användarvänliga" funktioner som "Spara för webben" i PS. I och med att du inte vet vad som händer då så vet du ju inte heller hur du ska fixa eventuella problem som uppstår.

 

Det man bör göra för att få ner filstorleken är först att bestämma vilken storlek det ska vara på bilden. Hur många pixlar på bredden och hur många på höjden. Om du inte vill att folk ska behöva skrolla när de tittar på den stora bilden bör du välja ungefär 980x735. Om du vill att folk ska kunna ha den som bakgrundsbild för du välja 1600x1200.

 

När du valt storlek (borde finnas något menyalternativ i PS för att ändra bildens storlek) så är det dags att bestämma hur hårt den ska komprimeras. I GIMP som jag använder (det är gratis: http://www.gimp.org/ ) så kan man se direkt på bilden vilken komprimeringsnivå man ska använda. Vet inte om det finns något liknande i PS, men annars är det ju bara att prova tills du är nöjd.

 

 

Länk till kommentar
Dela på andra webbplatser

Thomas Tydal

Om du tittar på himlen på den stora bilden "Äppelblom" så beror det på att den är för hårt komprimerad.

 

 

Länk till kommentar
Dela på andra webbplatser

Är dom tagna med olika kameror som har olika upplösning?

 

Ja de är tagna med olika kameror, 2 olika digital samt en gammal systemkamera.

 

Är dom beskurna och sen uppförstorade för att få ett enhetligt format?

 

De är i orginalstorlek bara omsparade för webben i PS CS

 

Överlag fina bilder, tyckte jag i alla fall.

 

Tackar, är lite nöjd själv :)

 

Om du inte vill att folk ska behöva skrolla när de tittar på den stora bilden bör du välja ungefär 980x735. Om du vill att folk ska kunna ha den som bakgrundsbild för du välja 1600x1200.

 

Förstör man inte upplösningen då? Testade detta lite också och de blev också underliga. Jag ska testa lite till med andra program också, tror dottern har paint shop pro på sin dator.

 

GIMP som jag använder (det är gratis: http://www.gimp.org/ ) så kan man se direkt på bilden vilken komprimeringsnivå man ska använda.

 

Säger programmet till ? Ska kolla in det programmet också.

 

Tack för hjälpen och poäng utdelas. Fler förslag är välkomna.

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Thomas Tydal

> Förstör man inte upplösningen då?

 

Jo, men att minska filstorleken handlar om "förstöra", dvs ta bort information ur bilden som man inte tror betraktaren behöver. Med rätt program och erfarenhet kan man göra det på ett snyggt sätt så det inte märks.

 

Om du vill får du gärna maila en originalbild till dev@tydal.nu så kan jag skicka tillbaka den i en lagom filstorlek för webben så får du se hur det ser ut.

 

 

> Säger programmet till ?

 

GIMP låter dig se bilden och dess filstorlek medan du ställer in kvalitetsnivån.

 

 

Länk till kommentar
Dela på andra webbplatser

Testar att skicka en fil :thumbsup:

Tack

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Hej igen Milla

 

Om bilderna är tagna med olika digitalkameror kan det ju vara skillnad på kvaliten redan i kamerorna.

 

Det som är taget med en systemkamera är väl inskannat och även där kan man ju bestämma vilken "täthet" bilderna ska ha.

 

Du ska nog börja med att göra om bilderna så att det blir samma pixeltäthet på alla bilderna. 100 pixlar/inch räcker gott för webben.

 

Sen får du anpassa så att alla bilder blir lika stora.

 

OBS Jobba alltid med kopior av originalbilden och spara inte bilderna som jpeg förrän på slutet.

 

 

 

Länk till kommentar
Dela på andra webbplatser

Thomas Tydal

> Du ska nog börja med att göra om bilderna så att det blir samma

> pixeltäthet på alla bilderna. 100 pixlar/inch räcker gott för webben.

 

Nej, en bild har ingen pixeltäthet. En bild har bara pixlar. Hur tätt de hamnar beror på var man tittar på bilden. Tittar man på en skärm med 96 DPI hamnar det alltså 96 pixlar på varje tum. En bild som är 1600 pixlar bred tar alltså upp 1600/96 = 16,7 tum, vilket omräknat till centimeter ( * 2,54) blir 42. Bilden blir alltså 42 centimeter bred på skärmen. På en skrivare med 600 DPI blir den 1600/600 = 2,7 tum eller 6,7 centimeter.

 

Om man anger korrekt DPI i sitt bildbehandlingsprogram så kan man även mäta avstånd i bilderna i centimeter i stället för bara pixlar.

 

http://www.tydal.nu/article/upplosning,-bildpunkter-och-dpi/

 

Länk till kommentar
Dela på andra webbplatser

Det som är taget med en systemkamera är väl inskannat och även där kan man ju bestämma vilken "täthet" bilderna ska ha.

 

Bilderna är framkallade av fujifilm och skickade till mig per CD. Jag har en uråldrig scanner som jag bara använder i nödfall, inte till sådana här projekt.

 

OBS Jobba alltid med kopior av originalbilden och spara inte bilderna som jpeg förrän på slutet.

 

Jag arbetar alltid med kopior, vill inte sabba orginalen.

 

Tack Tydal för omgjorda bilden, den var jättebra. Nu har jag något att arbeta efter.

 

Nu ska jag fixa middag, har hjälpt en kompis att bli av med errorSafe, puh återkommer med resultat framöver..

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Nej, en bild har ingen pixeltäthet. En bild har bara pixlar. Hur tätt de hamnar beror på var man tittar på bilden

 

Men bildbehandlingsprogrammen har ju en inställning som är pixels/inch. Vad jag menade var att det är ETT sätt att få alla bilder lika stora.

 

Det måttet kan ju sen översättas hur du vill, till antal pixlar eller antal centimeter.

 

Jag bifogar en bild av hur det ser ut i PSP v 9.

 

[bild bifogad 2006-07-29 18:36:02 av bmhson]

852118_thumb.jpg

Länk till kommentar
Dela på andra webbplatser

Thomas Tydal

> Men bildbehandlingsprogrammen har ju en inställning som är pixels/inch.

 

Jo, den är till för när man jobbar med format som inte har pixlar, exempelvis papper. Men den här tråden har ju gällt bildskärmar, och då har man pixlar.

 

 

Länk till kommentar
Dela på andra webbplatser

Tack Thomas Tydal och bmhson för hjälpen, skall för ordningens skull säga att jag fick godkänt av Thomas Tydal på en testbild som han var vänlig att kolla åt mig. Bifogar bilden så ni kan jämföra med hemsidans bild. Nu har jag lite pyssel framför mig att redigera och ladda om alla bilder. :) Poäng är utdelade till vedebörande som tack.

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

[bild bifogad 2006-07-29 19:56:59 av Datamilla]

852129_thumb.jpg

Länk till kommentar
Dela på andra webbplatser

Nu har jag ändrat bilderna och uppdaterat sidan. De bilder som är små kan jag inte förstora till samma storlek som de andra utan att det tar på kvaliten så de får vara. Jag kom på att de är nog mobilkamerabilder de som är små men är inte riktigt säker, orginal är de i alla fall..

Tacksam för en ååsikt eller två..:)

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Thomas Tydal

> Nu har jag ändrat bilderna och uppdaterat sidan.

 

Jo, nu tycker jag det ser bättre ut! Vad tycker du själv? Är du nöjd med kvaliteten och filstorleken?

 

 

Länk till kommentar
Dela på andra webbplatser

Är du nöjd med kvaliteten och filstorleken?

 

Jag tycker det ser mycket bättre ut nu, tack.. Filstorleken är bättre också.

 

Jag har lite plats kvar nu att lägga upp nya alster också, då dessa nya tog mindre plats. Skall så småningom försöka hitta en större "förvaringsplats" för bilder så man slipper förvanska dem så mycket.

 

Skall först lära mig att koda html lite bättre.. något att syssla med mörka dagar i vinter. Jag har kunnat men det har kommit mycket nytt och jag har glömt...

 

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Thomas Tydal

> Jag har kunnat men det har kommit mycket nytt och jag har glömt...

 

Det nya som har kommit är CSS. HTML har det inte hänt så mycket med. Det är fort farande <p> för stycken, <h1> för huvudrubrik, <h2> för underrubrik samt <img> och <a>. Utöver det använder man inte så många taggar... jo, <ul>,<ol> och <li> för listor. Och så den nya taggen <div> som du använder för ett identifiera ett särskilt område, exempelvis en textruta eller en spalt.

 

Med HTML talar man bara om vad som är vad. Med CSS talar man om hur det ser ut. Alla HTML-taggar kan kopplas mot ett utseende i CSS:

 

<style type="text/css">
 h1
 {
   font-weight: bold;
   font-size: 20pt;
 }
 a
 {
   text-decoration: none;
   color: #3322ee;
 }
 a:hover
 {
   text-decoration: underline;
 }
</style>

 

Sen när det gäller hur man placerar ut spalter, textboxar och olika element på sidan så börjar det bli lite mer avancerat...

 

Du kan ju titta på koden till min hemsida http://www.tydal.nu/

Tillhörande CSS-fil finns på: http://www.tydal.nu/xhtml/main.css

 

 

Länk till kommentar
Dela på andra webbplatser

Kan inflika att "Spara för webben..." i Photoshop är ett UTMÄRKT verktyg för att just spara på webben. Annars finns det "Actions" för att automatisera saker, "Automate --> Batches" för att göra samma sak på många filer, "Automate --> Web gallery" för att skapa ett webbgalleri med bilder.

 

Personligen brukar jag först skala bilderna, kopiera orginallagret, sätta ner opacity till 15-20%, sätter lagerblandningen på "Overlay" och sedan köra "Filter->Other->High Pass" med en inställning på 0.5px. Sedan köra kurvor/nivåer (curves/levels) för att optimera kontrast, vitpunkt, svartpunkt, ljushet/mellandagrar och kanske lägga till eller ta bort mättnad om det behövs.

 

Självklart detta utan att använda överdrivet komprimerade bilder eller usla bilder från mobiler.

 

Därefter sparar jag som PNG och använder PngCrush för att ta ner storleken, men behålla kvalitén. Photoshop sparar ju i 99% av fallen som fel PNG-inställning.

 

Det finns lite exempel, kolla mgtkompetens.se.

 

[inlägget ändrat 2006-07-30 11:04:34 av echo]

Länk till kommentar
Dela på andra webbplatser

Här kan det även vara intressant att lägga in:

img { border:none; }

 

Sen så är det inte helt optimalt att lägga alla bilder i en tabell. Det blir så mycket kod, tar lång tid. Lägg istället dem såhär:

<ul class="bildgalleri"><li><img ... /></li>
<li><img .../></li>
...
</ul>

 

och skriv i din .css fil:

ul.bildgalleri li { float: left; } 

så flyter alla bilder rätt. haf.se/cv, under intressen innehåller ett exempel på detta, där jag har några få bilder jag har tagit.

[inlägget ändrat 2006-07-30 11:13:48 av echo]

Länk till kommentar
Dela på andra webbplatser

Hej Milla

 

Det ser betydligt bättre ut nu. PS-funktionen "save for web" verkar inget vidare.

 

Nu är t ex ros 3 bantad till drygt en tiondel av den gamla varianten och det syns inte på resultatet.

 

Länk till kommentar
Dela på andra webbplatser

Tack alla. Jag ska titta på det ni föreslår så får jag återkomma med resultat sedan. :)

 

Har en lunta som jag fick av dottern också som håller på med en "speldungeon" för rollspel på nätet.

 

Det är tydligen php??kod.

 

Farligt när barnen går om en ..:)

 

Tack!!!

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Kan inflika att "Spara för webben..." i Photoshop är ett UTMÄRKT verktyg för att just spara på webben.
För att utvecka lite, så är "Spara för webben" en funktion där man på ett och samma ställe kan ändra olika inställningar (format, grad av komprimering, palett och andra parametrar -- beroende på format) och direkt se hur det påverkar bildkvaliteten och filstorleken.

 

Det har länge funnits önskemål om nåt liknande för GIMP (http://bugzilla.gnome.org/show_bug.cgi?id=98017), och det är en kille som jobbar på det under årets Summer of Code (http://code.google.com/soc/gimp/appinfo.html?csaid=F7779C948689C4A), så vi får se om det blir nåt vettigt av det. Tanken är alltså att man har allt samlat och ser resultatet direkt och kan jämföra olika varianter.

 

Länk till kommentar
Dela på andra webbplatser

Denna tråd var väldigt bra !, håller själv på att skapa något liknande.

En poäng till skaparen

 

-

 

Länk till kommentar
Dela på andra webbplatser

Denna tråd var väldigt bra !, håller själv på att skapa något liknande.

En poäng till skaparen

 

Tackar för den :thumbsup:

 

Milla

 

Den som uppfann arbetet måste inte ha haft någonting att göra.

 

Länk till kommentar
Dela på andra webbplatser

Arkiverat

Det här ämnet är nu arkiverat och är stängt för ytterligare svar.

×
×
  • Skapa nytt...