Cómo centrar imagen grande en encabezado sin cargar excesivamente

  • Autor Autor RedxLus
  • Fecha de inicio Fecha de inicio
RedxLus

RedxLus

Dseda
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
El problema es que tengo que usar una imagen muy grande para que no quede mal y claro eso se nota en el peso, les dejo una captura para que lo vean:
Trate de editar el archivo style.css de la plantilla pero no conseguí que cambiara nada.
La diferencia de peso entre una y otra es abismal y retrasa la carga de mi web muchísimo

Sin título_opt (3).webp
 
Última edición:
madre mia, una imagen de 3508 X 2580 ufffff

para empezar edita esa imagen por ejemplo en photoshop. Guardala del doble de tamaño al que deseas que se muestre con resolucion de 150 y cuando la vas a guardar le dices al 50%, ahi tendras buena resolucion y un peso minimo.

Despues en el css, debes realizar los cambios en la #logo por lo que he visto, lo tienes en float: left y debes decirle que se centre ademas de width y heigt del 100%.

Es jugar un poco y puedes ir reduciendo el tamaño a tu gusto con el porcentaje.
 
A ver sí te funciona con :

display: flex;
justify-content:center;
 
asesor dijo:
madre mia, una imagen de 3508 X 2580 ufffff

para empezar edita esa imagen por ejemplo en photoshop. Guardala del doble de tamaño al que deseas que se muestre con resolucion de 150 y cuando la vas a guardar le dices al 50%, ahi tendras buena resolucion y un peso minimo.

Despues en el css, debes realizar los cambios en la #logo por lo que he visto, lo tienes en float: left y debes decirle que se centre ademas de width y heigt del 100%.

Es jugar un poco y puedes ir reduciendo el tamaño a tu gusto con el porcentaje.
Hacer clic para expandir...

JAJAJA la imagen pesa tanto por que la hice yo en Ps, voy a probar y ya si encuentro algún problema lo cuento.
 
krusty72 dijo:
A ver sí te funciona con :

display: flex;
justify-content:center;
Hacer clic para expandir...

si le explicas estas propiedas dejale constancia del webkit porque de lo contrario no lo va a saber ver correctamente.
 
Insertar CODE, HTML o PHP: 
.site-branding .image-logo { margin:0 auto;}
#logo a {
    float: center;
    color: #2A2A2A;
    font-weight: bold;
display: flex;
justify-content:center;
}
#logo a img { 
display: flex;
justify-content:center;
float: center 
}
No funciona [MENTION=125431]asesor[/MENTION] [MENTION=2092]krusty72[/MENTION]
 
tienes que hacerlo en css, simplfica tu logo. 🙂
 
Aun nada!
Sigo igual
 
Quita el float:center

De hecho float:center no existe.

Esto display: flex; justify-content:center; mételo en el .image-logo
 
Última edición:
Lo arregle con este código:

Insertar CODE, HTML o PHP: 
.site-branding .image-logo {   margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 250px;
    margin-left: 300px; }
#logo a img {  width: 70% }

Ahora me toca ajustarlo manualmente
 
RedxLus dijo:
Lo arregle con este código:

Insertar CODE, HTML o PHP: 
.site-branding .image-logo {   margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 250px;
    margin-left: 300px; }
#logo a img {  width: 70% }

Ahora me toca ajustarlo manualmente
Hacer clic para expandir...

Yo no lo veo arreglado, debes quitarle el float left que hay en esta clase .site-branding h1, .site-branding h2 ahi se te centrara

Screenshot by Lightshot
 
Muy raro lo que haces en ese código.. el enlace no es clickable en la parte derecha de la imagen
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba