Problema qualita' immagine

[robot_dika]

Ciao a tutti, premesso che sono un novello nell'ambiente di xhtml e css (sto studiando), grazie al vostro aiuto ho creato questa pagina ancora in fase di ultimazione..le immagine caricare con il css sono tutte BMP, io ho provato a convertirle in GIF o JPG ma diventano veramente di una pessima qualita'.. come devo fare secondo voi per non rendere pesante la pagina?


grazie infinite...

[robot_dika]

mi sono dimenticato di postare il css..

body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Thaoma, Verdana, Arial, Sans-Serif;
text-align: center;
background: #787586;
}

#container{
background: #8F8669;
border-bottom : 1px solid black;
border-left : 1px solid black;
border-right : 1px solid black;
border-top : 1px solid black;
color : #8F8669;
margin : 20px auto;
text-align : left;
width : 766px;
height:560px;
}

#header {
text-align: center;
font: 10px/1.3 "Trebuchet MS", Verdana, Arial, Helvetica, Sans-serif;
height: 80px;
width: 766;
background: transparent url(images/I1.bmp);
position: relative;
}

#riquadro{
height: 125px;
width: 766;
background: url(images/foto.bmp);
margin-top: 10px;

}


#nav{
position: absolute;
top: 10px;
right: 0;
height:20px;
background: trasparent;
}

#nav a{
float: left;
height: 27px;
padding: 0 15px;
line-height: 20px;
font-weight: bold;
font-size: 1.1em;
text-decoration: underline;
}

#nav a:link, #nav a:visited{
color: #333333;
}

#nav a:hover{
color: #000;
text-decoration: none;
}

#nav ul {
margin:0;
padding:0;
list-style: none;
text-decoration: underline;
}


#nav li {
float:left;
margin:0;
padding:0;
text-decoration: underline;
}

#nav2{
position: absolute;
top: 50px;
right: 0;
height: 27px;
background: trasparent;
}

#nav2 a{
float: left;
height: 27px;
padding: 0 15px;
line-height: 27px;
font-weight: bold;
font-size: 1.3em;
text-decoration: none;
}

#nav2 a:link, #nav2 a:visited{
color: #333333;
}

#nav2 a:hover{
color: #000;
text-decoration: none;
}

#nav2 ul {
margin:0;
padding:0;
list-style:none;
text-decoration: none;
}


#nav2 li {
float:left;
margin:0;
padding:0;
text-decoration: none;
}

#menu {
float:left;
height: 345px;
width: 766;
background: transparent url(images/I3.bmp);
position: relative;
}

#menu1 {
float: left;
height: 260px;
width: 180px;
background: transparent url(images/menu1.bmp) no-repeat 0 0;
margin-top: 45px;
margin-left: 7px;
}

#menu2 {
float: left;
height: 260px;
width: 180px;
background: transparent url(images/menu2.bmp) no-repeat 0 0;
margin-top: 45px;
margin-left: 7px;
}

#menu3 {
float: left;
height: 260px;
width: 180px;
background: transparent url(images/menu3.bmp) no-repeat 0 0;
margin-top: 45px;
margin-left: 7px;
}

#menu4 {
float: left;
height: 260px;
width: 180px;
background: transparent url(images/menu4.bmp) no-repeat 0 0;
margin-top: 45px;
margin-left: 7px;
}

#logo{
float: left;
height: 79px;
width: 168px;
background: transparent url(images/logo.bmp) no-repeat 0 0;
margin-top: 0px;
margin-left: 7px;
}

[Valentina76]

ciao in attesa delle risposte di utenti esperti di css e hxtml, posso consigliarti di utilizzare qualche buon programma di grafica specifico, come Paint Shop/Photoshop, che hanno miriade di plug in e filtri, e ti danno la possibilità di ottimizzare le immagini lasciandole di buona qualità utilizzando la compressione delle immagini.
Quelle comunque che ho visto io sulla pagina che hai linkato, sono di buona qualità.

ah ps
il W3c raccomanda le PNG, ma in genere è anche vero che sono leggermente più pesanti delle GIF.
Personalmente uso le JPG con compressione massima a 30kb., e già così ottengo la riduzione del peso dell'immagine del 50 per cento

[webdemo]

Originariamente inviato da robot_dika
come devo fare secondo voi per non rendere pesante la pagina?

devi evitare di realizzare intere aree grafiche con una singola immagine.

ciaux

[robot_dika]

Originariamente inviato da webdemo
devi evitare di realizzare intere aree grafiche con una singola immagine.

ciaux

hai ragione, ma mi sembrava una scelta obbligata per questo tipo di design..in alcune aree ho usato immagine minuscole ripetute, in altre come ad esempio la cornice con le foto mi sembrava impossibile..vero?


grazie dei consigli, provvedero' a usare un nuovo programma di grafica..

[webdemo]

io parlo di queste:

background: transparent url(images/menu1.bmp) no-repeat 0 0;

si può tranq realizzare la stessa cosa praticamente senza img o quasi


ciaux

[robot_dika]

Originariamente inviato da webdemo
io parlo di queste:

background: transparent url(images/menu1.bmp) no-repeat 0 0;

si può tranq realizzare la stessa cosa praticamente senza img o quasi


ciaux

ok... provo subito.. grazie mille