Imágenes
Formatos
En sitios Web, las imágenes tienen el objetivo de ser apoyos visuales al contenido. Estas pueden ser imágenes fotográficas, gráficos, logotipos e iconos. Son publicadas en diversos formatos, pero se recomienda siempre se busque la mejor relación de peso y calidad, para asegurar que las páginas Web se descarguen en un tiempo promedio de 2 a 3 segundos para mejorar su posicionamiento en los morores de búsqueda en Internet (SEO).
A continuación se enlistas los formatos permitidos, siendo el WEBP el formato principal a utilizar en los Micrositios del PJENL.gob.mx:
| Nombre | Descripción | Recomendación de uso |
|---|---|---|
| WEBP | Es un formato de imagen desarrollado por Google que está diseñado para ofrecer mejores compresiones que otros formatos populares como JPEG y PNG, sin perder mucha calidad visual. | Imágenes fotográficas y gráficos CON o SIN fondo transparente. |
| JPG o JPEG | Joint Photographic Experts Group - Es uno de los formatos de imagen más utilizados en la web debido a su capacidad para comprimir imágenes con pérdida, lo que reduce el tamaño del archivo sin sacrificar demasiado la calidad visual. | Imágenes fotográficas y gráficos SIN fondo transparente. |
| PNG | Portable Network Graphics - Es un estándar gráfico ampliamente utilizado debido a su capacidad de ofrecer imágenes de alta calidad con características de compresión sin pérdida de datos. | Imágenes fotográficas y gráficos CON fondo transparente. |
| SVG | Scalable Vector Graphics - Es un tipo de imagen basado en vectores, diseñado para ser escalable sin pérdida de calidad. | Gráficos como Logotipos e Iconografía CON fondo transparente. |
Resolución y Paleta de color
Toda imagen o gráfico que se publique en los Micrositios del PJENL.gob.mx es indispensable que tenga las siguientes características básicas:
| Resolución | Paleta de color |
|---|---|
| Recomendado: 72 DPI, Máximo permitido 150 DPI | RGB |
| A mayor resolución, mayor es el peso de la imagen. | Evitar usar CMYK, ya que es una paleta de color para impresión. |
Dimensiones
En los Micrositios del PJENL.gob.mx utilizamos las siguientes dimensiones base para las imágenes y gráficos:
| Banners Carrusel de Avisos | 1200x650 px |
|---|---|
| Hero background | 2000x1000 px |
| Imágenes contenido | 800x600 px |
| Iconografía contenido | 150x150 px |
| Imágenes HD Cards | 350x250 px |
| Imágenes pantalla completa horizontal | 1920x1080 px |
| Imágenes pantalla completa vertical | 1080x1920 px |
Estilos para imágenes en contenidos
Para las imágenes de apoyo a los contenidos podemos usar los siguientes estilos y efectos. La clase de esquinas redondeadas y sombra está incluído en Bootstrap 5 se localiza como rounded-3 y shadow respectivamente, las clases para el efecto de zoom y zoom con sombra se define más adelante en el apartado de CSS para Zoom y Zoom con Sombra, los cuales se deben incluir en el archivo pjenl.css de cada Micrositio:
Normal
Esquinas redondeadas con sombra
Efecto zoom en Hover
Efecto zoom en Hover con sombra
Código HTML:
<!-- Normal -->
<div class="col-md-3">
<img src="" alt="Imagen" class="img-fluid">
</div>
<!-- Esquinas redondeadas con sombra -->
<div class="col-md-3">
<img src="" alt="Imagen" class="img-fluid rounded-3 shadow">
</div>
<!-- Efecto zoom -->
<div class="col-md-3 zoom">
<img src="" alt="Imagen" class="img-fluid rounded-3">
</div>
<!-- Efecto zoom con sombra -->
<div class="col-md-3 zoom zoom-box-shadow">
<img src="" alt="Imagen" class="img-fluid rounded-3">
</div>
CSS para imágenes
Código CSS:
/*============================================================
IMAGE HOVER ZOOM Y SOMBRA
============================================================*/
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Zoom */
.zoom img {
max-width: 100%;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.zoom:hover img {
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
/* Zoom con sombra */
.zoom-box-shadow img {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.zoom-box-shadow:hover img {
-webkit-box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.8);
box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.8);
}
Última actualización: Abril 2, 2025