Perdida de calidad en la imagen del logo
Autor: Miguel L.
Visitado 1947,
Followers 1,
Compartido 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
Publicado en
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.
Autor
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.
Autor
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.
Autor
No se adjuntó la imagen. Vuelvo a ponerla
(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
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.
Autor
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!
Autor
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
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
.
Autor
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.
... 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:)
.
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.