WebSite X5Help Center

 
Miguel L.
Miguel L.
User

Perdida de calidad en la imagen del logo  es

Auteur : Miguel L.
Visité 1946, Followers 1, Partagé 0  

Buenas noches, estoy intentando añadir el logo a la cabecera de la web y me pierde demasiada calidad y se aprecia una diferencia de calidad bastante grande con el resto de letras de su alrededor. ¿Qué debo hacer para que la calidad no decaiga? Gracias

Posté le
12 RéPONSES - 1 CORRECT
Jorge M.
Jorge M.
Moderator

Hola Miguel L.

Puedes adjuntar más datos, por ejemplo el tipo de archivo (.jpg, .png, .gif, etc.) de tu logo, la resolución, una captura para comprender mejor.

Por lo general la imagen que adjuntes no debes de ampliarla en la cabecera, puedes minimizar una imagen pero no ampliarla, puedes adjuntar una imagen antes y después para que podamos comparar y ver como ayudarte.

Saludos

Jorge M.

Lire plus
Posté le de Jorge M.
Miguel L.
Miguel L.
User
Auteur

Pues probe con todos los formatos que acepta el programa. Los png, jpg, psd, etc. Las imágenes son todas de un tamaño grande y por lo tanto lo único que hago es reducirlas. Adjunto como deberia ser el logo. Al reducirlo para poderlo colocar en la cabecera de la web pierde bastante calidad.

Lire plus
Posté le de Miguel L.
Miguel L.
Miguel L.
User
Auteur

Y aquí pongo como queda cuando lo pongo en la web. Se aprecia como la calidad con las letras del título de la web o de los iconos que hay a la izquierda de la página o de los links de navegación de la página es bastante peor cuando la calidad de la imagen es alta. 

Lire plus
Posté le de Miguel L.
Miguel L.
Miguel L.
User
Auteur

No se adjuntó la imagen. Vuelvo a ponerla

Lire plus
Posté le de Miguel L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

(traducido por google): para obtener o mantener la más alta calidad de origen, sería posible usar  Obejto Código HTML:
>> mira tu PNG
>> ver vector

(IT) - per ottenere, oppure mantenere la massima qualità di origine, sarebbe possibile usare l'Oggetto Codice HTML.

ciao

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
CARLOS AMARAL
CARLOS AMARAL
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

Hola Miguel,

Muy buena la idea de KolAsim, que para explicarla un poquito mas, puedes convertir tu logo a formato vectorial con cualquier programa de diseño (Corel Draw, Adobe Ilustrator) o quiza ya lo tienes en ese formato, y desde ahi lo guardas en formato SVG. Ese formato es vectorial, por lo que no pierde calidad al agregarlo a la pagina, y para agregarlo simplemente lo pones dentro de un objeto HTML que cargue esa imagen.svg

Por otro lado, en realidad yo te recomendaria que ya importes el logo a la pagina, con el tamaño final que lo vas a usar para visualizacion en PC, con esto ademas de mejorar la calidad, haces que el archivo pese menos, por lo tanto la pagina cargará mas rapido (y a google le gusta eso, por lo que mejora la puntuacion del sitio).

Te recomendaria tambien, diseñar tus proyectos previsualizandolos por ahora en la resolucion mas standard que actualmente es 1920 x 1080 (FullHD), ya que si tu tienes un monitor mejor, que puede ser por ejemplo 4K, y diseñas los sitios viendolos ahi, con esos tamaños, cuando la mayoria de los usuarios del sitio luego lo vean en FullHD, se va a ver muy distinto a lo que tu veias al diseñar.

Espero que puedas solucionar tu consulta colega...

Saludos

Carlos A.

Lire plus
Posté le de CARLOS AMARAL
Miguel L.
Miguel L.
User
Auteur

Buenas Carlos, el logo lo diseñé siendo un .svg pero el programa no acepta ese formato. También intente modificarlas yo al tamaño deseado pero al cargarlas perdia igualmente calidad. Para ser más exactos las imagenes que he adjuntado ya están adaptadas a la imagen que cargo en la web. Probaré lo que dice KolAsim a ver que tal va. Os iré comentando los progresos. Gracias a los dos!

Lire plus
Posté le de Miguel L.
Miguel L.
Miguel L.
User
Auteur

Buenas de nuevo. Ya he insertado la imagen y he intentado ajustarla al tamaño que deseo mediante html y css pero nada. No consigo que se haga del tamaño que quiero. Os dejo aquí el código que uso y me decís. Incluso he probado de ponerle el tamaño que quiero con Illustrator y nada. No consigo que se haga del tamaño que quiero. A ver si podeis ayudarme. Gracias.

--- Código mediante css: 

<style type="text/css">
.logo{
width:350px;
height:205px;
}

</style>

<div>
<img class='logo' src="Logo minimalista v3.svg" alt="PiESA"/>
</div>

--- Código mediante html:

<img src="Logo minimalista v3.svg alt="PiESA" width: "350" height:"205"/>

También tengo el problema de que me salga dónde quiero. Pero prefiero primero saber como poner el tamaño que quiero. Gracias de antemano

Lire plus
Posté le de Miguel L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

Para entender, Debería ver el enlace de tu ejemplo.
Sin embargo, mi primer ejemplo es redimensionado automáticamente;
... en cambio este >> nuevo ejemplo  está dimensionado a una medida proporcional fija.
... el código, además de verlo directamente, puedes verlo en la fuente de la página en las líneas 7-17-27-37 ...
¡Hola

(IT) Per poter capire, dovrei vedere il link del tuo esempio.
Comunque, il mio primo esempio si ridimensiona automaticamente.
... invece questo nuovo esempio si dimensiona a misura fissa proporzionale.
... il codice, oltre a vederlo direttamente, lo puoi notare nel sorgente della pagina alle righe 7-17-27-37...
ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Miguel L.
Miguel L.
User
Auteur

Hola de nuevo. Eso que me explicas del width ya lo hice y en el programa no me lo dimensiona a ese tamaño. Si lo hago por libre si que me pone las dimensiones que pido. Por ese motivo no sé en que fallo. He puesto el código siguiente:

<img src="Logo minimalista v3.svg" width:"350" alt="PiESA"/>

Y me queda como verás en la imagen adjunta.

Lire plus
Posté le de Miguel L.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... lamentablemente sin LINK no puedo entender; ... tal vez no hay suficiente espacio vertical:
(IT - ... purtroppo senza LINK non riesco a capire; ...forse non c'è spazio verticale a sufficienza:)

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
CARLOS AMARAL
CARLOS AMARAL
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

Miguel, puedes probar tambien de jugar con el ancho y la cantidad de columnas, para que el logo te ocupe las dos columnas del centro, donde tienes QUI SOM y Contacte, luego de eso, si quieres mediante los margenes internos del objeto imagen puedes achicar un poco mas la imagen.

Prueba y nos comentas si te sirve como solucion te parece?

Saludos colega...

Carlos A.

Lire plus
Posté le de CARLOS AMARAL