¿Es posible subir e...
Avisos
Vaciar todo

¿Es posible subir el logotipo en formato svg para que no se vea pixelado al hacer zoom en la imagen?  

Página 2 / 2
 
Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Hola, muy buenas:

Después de contratar a un artista profesional para el rediseño del logotipo de nuestra web. Nos entregaron el logo en formato jpg y ai (adobe ilustrator). Ahora solo nos falta subirlo a la web de la forma más profesional posible.
Como la imagen jpg estaba en un tamaño muy grande (medidas) con photoshop redujimos la imagen (de manera proporcional) , subimos esta imagen a la web, pero notamos que si hacemos zoom en la pantalla, para ver más grande el logo, la imagen se ve pixelada ( pierde calidad, se distorsiona), lo intentamos también en formato png , queda algo mejor pero continúa el problema. Por último abrimos el archivo con formato ai ( adobe ilustrator ) en ilustrator, y lo convertimos a svg con la idea de subirlo en este formato ( vectorial ), pero parece que prestashop no lo admite o vuelve a transformar la imagen a jpg, ya que al inspeccionar el logo, nos muestra que está en jpg.
Nos gustaría dar con la solución, de manera que si se hace zoom en el navegador, para aumentar el tamaño de la pantalla, el logo continúe viéndose perfecto.
Ahora mismo no está del todo mal, pero intentamos cuidar al máximo cada detalle y transmitir en la web el cariño, esfuerzo y profesionalidad con la que hemos intentado trabajar en cada momento.
Fuera de la web, se puede ampliar el tamaño ( medidas) de la imagen, o reducir y no pierde calidad gráfica.
Gracias, saludos.

URL del sitio: Contenido solo visible a usuarios registrados

Citar
Respondido : 11/08/2017 6:34 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para establecer las dimensiones, esta tomando las que quedaron del logo que suibiste anteriormente, en tu código ubica todo este código :

{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}

Cambialo por

width="100" height="200"

Cambiando 100 y 200 por el valor que quieras para el ancho y también para el alto respectivamente.

Con respecto al tamaño de tu logo, efectivamente es muy pesado y tal como esta deberías descartar ponerlo como svg, o usar mejor una variación (cambiar el diseño) de tu logo que no tenga tantos puntos (en los vectores) es como si hubieran calcado una imagen y pasado a vectores simplemente, (no es un diseño en vectores desde cero), un logo en vectores con un diseño limpio y en dos colores no debería pesar tanto.

En tal caso si quieres mantener esta versión de tu logo lo mejor es ponerlo en formato .png a 256 colres , pero si te interesa mucho el tema de la resolución, o que el usuario pueda ampliar el navegador entonces la opción más simple es, exportar tu imagen en .png pero al doble de tamaño que finalmente se mostrará

Te adjunto tu imagen a 800x594, pero al mostrarla tienes que mostrala en 400x297

Otra opción más compleja es tener varias versiones de tu imagen, y usar srcset, pero esto es más para tener imagenes de calidad retina.

Saludos.

ResponderCitar
Respondido : 15/08/2017 6:28 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Woww, después de lo que ha sido casi una aventura, es una pena no poder usar el logo en svg. De todas maneras seguramente servirá este post a otras personas.

Entonces, ahora para proceder a la opción de subir el logo en png, ( el mismo archivo que me envías) y que se muestre más pequeño. Pregunto si lo siguiente es correcto, para intentar que esta vez sea más corto.

1-Vuelvo a dejar el archivo header.tpl , tal como estaba antes. ( el original, antes de esta modificación).
2- Lo mismo con el archivo global.css ( quito lo que agregué y lo dejo como estaba)
3- Subo la imagen png, por vía normal (panel de control, back office)
4- Aquí es donde te consulto, que debería modificar para que se muestre por ejemplo a 400x 297 tal cual me indicas.

Gracias, Saludos

ResponderCitar
Respondido : 15/08/2017 11:21 pm
Johnny Heredia Montiel
 Johnny Heredia Montiel
Miembro Moderator

Hola,

Verifico que tu web se encuentra en mantenimiento por lo que no podríamos revisar lo que comentas.

En todo caso el proceso se tendría que realizar desde la administración sin importar el tamaño. Puedes verificar si la siguiente guía te es de ayuda. https://www.webempresa.com/blog/cambia-el-logo-a-transparente-en-tu-tienda-prestashop.html

ResponderCitar
Respondido : 16/08/2017 3:04 am

Cursos Gratuitos WordPress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Hola, he vuelto a colocar los archivos header.tpl y global.css originales.
Además desde el back office he subido el logo en formato png, con una medida grande, con la intención de que si se hace zoom en el navegador, al ampliarse el logo no se vea pixelado.

Solo me falta modificar el código para que al mostrar la web, de manera normal, el logo se vea más pequeño, ya que ahora mismo se muestra grande, con la medida con la cual lo he subido.

Al inspeccionar el logo, desde la web, se puede ver esto:

Intuyo que debo modificar el archivo header.tpl , justamente estas líneas

Intento poner 372 de ancho por 250 de alto. Pero no se como meter estas medidas de manera correcta en el código. Podrías, por favor, devolverme el código con estas medidas agregadas?
Entiendo que debe ser en width (ancho) y height (altura) pero no se si debo quitar todo lo que está entre comillas y poner la medida, o como debo hacerlo. Lo he intentado así pero no me ha funcionado.

Gracias

Esta publicación ha sido modificada el hace 1 año por antonio
ResponderCitar
Respondido : 16/08/2017 7:19 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Si no quieres complicarte simplemente

Saludos,

Esta publicación ha sido modificada el hace 1 año por antonio
ResponderCitar
Respondido : 16/08/2017 8:55 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Hola, puse el código tal cual me indicaste, posteriormente he vaciado la cache de varnish, la cache en avanzadas( back office), he borrado la cache del navegador, pero el logo continúa viéndose grande.

En el código que me enviaste he visto que has quitado lo que estaba a continuación de esto: escape:'html':'UTF-8'}"

yo lo he puesto tal cual me lo enviaste. ¿estará todo correcto?

Saludos

ResponderCitar
Respondido : 16/08/2017 11:25 pm
Rafael
 Rafael
Miembro Moderator

Hola Rodrigo, buenos días,

Para poder ayudarte es muy importante que dejes abierto tu tienda para que podamos revisar el código que te ha generado el elemento del logo y ver por qué no se ha adaptado al tamaño específico

Avísanos cuando dejes la tienda activa 🙂

No obstante recuerda que cualquier ancho o alto debe seguir de su unidad de medida, es decir, tienes que colocarle la unidad del px (píxel) por ejemplo.

width="372px" height="250px" />

Un saludo

ResponderCitar
Respondido : 17/08/2017 12:10 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Muchas gracias, era eso que me indicas, faltaba poner px a las medidas.

Ahora lo único que me queda por arreglar es que he detectado que por ejemplo los e-mails que genera la web, cuando un usuario hace un pedido, continúa enviando el logo con tamaño grande. Lo mismo ocurre en la página de modo mantenimiento.
Supongo que quizás se deba a haber quitado parte del código en el archivo header.tpl , me refiero a lo siguiente, así estaba originalmente:

Y de acuerdo a las instrucciones quité esta parte:
"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"
{/if}/>

y al final agregué width="372px" height="250px" /> quedando el código así

Esta publicación ha sido modificada el hace 1 año por antonio
ResponderCitar
Respondido : 17/08/2017 1:56 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Para que esta modificacion que estas haciendo en tu web no interfiera con la otra funcionalidad de mails, etc.

Lo mejor es lo que te sugierí en un inicio, es decir sube tu logo con el tamaño adecuado desde el backend, luego en la plantilla has referencia a otro logo (tal como hicieste con el .svg), el logo al que hagas referencia será más grande con extensión .png. Es decir cambíaras : src="{$logo_url}"

Saludos.

ResponderCitar
Respondido : 17/08/2017 6:36 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Rodrigo Martín
 Rodrigo Martín
Usuario eminente

Gracias Jhon Marreros Guzman.
Quedó funcionando, los correos automáticos se entregan con un logo pequeño, y en la web está el otro logo, el de tamaño grande.
Saludos !

ResponderCitar
Respondido : 17/08/2017 10:41 pm
Jhon
 Jhon
Soporte CMS Webempresa Moderator

Hola

Que bueno que lo solucionaste :).

Saludos.

ResponderCitar
Respondido : 17/08/2017 10:48 pm

Cursos Gratuitos WordPress

Página 2 / 2