Si realiza cambios a este sitio web donde se requiera agregar nuevas imágenes o reemplazar las existentes, aquí tiene un par de recomendaciones generales:
Imágenes¶
- Preferimos las imágenes SVG, pero si no existen podemos usar imágenes PNG. Además, para las imágenes de portada, preferimos que sean obtenidas de Unsplash y estén en formato WebP.
Los logotipos de empresa tienen un tamaño de lienzo de:
- 128x128px
- 384x128px
Optimización¶
PNG¶
Use la herramienta OptiPNG para optimizar las imágenes PNG:
optipng -o7 file.png
SVG¶
Inkscape¶
Explora todas las imágenes SVG.
En Inkscape:
- Archivo Guardar como...
- Establecer tipo a SVG optimizado (*.svg)
En la pestaña Opciones:
- Número de cifras significativas para las coordenadas > 5
- Activar Acortar valores de color
- Activar Convertir atributos CSS a atributos XML
- Activar Colapsar grupos
- Activar Crear grupos para atributos similares
- Desactivar Conservar datos del editor
- Desactivar Mantener definiciones no referenciadas
- Activar Solucionar errores del renderizador
En la pestaña Salida SVG bajo Opciones de documento:
- Desactivar Eliminar la declaración XML
- Activar Eliminar metadatos
- Activar Eliminar comentarios
- Activar Imágenes rasterizadas incrustadas
- Activar Activar viewboxing
En la salida SVG bajo Pretty-printing:
- Desactivar Formato de salida con saltos de línea y sangría
- Caracteres de sangría > Seleccionar Espacio
- Profundidad de sangría > 1
- Desactivar Eliminar el atributo "xml:space" del elemento SVG raíz
En la pestaña IDs:
- Activar Eliminar ID no utilizados
- Desactivar Acortar IDs
- Prefijo de IDs acortadas con >
dejar en blanco - Activar Conservar ID creados manualmente que no terminen con dígitos
- Conservar los siguientes IDs >
dejar en blanco - Conservar IDs que empiezan por >
dejar en blanco
CLI¶
Lo mismo puede conseguirse con el comando Scour:
scour --set-precision=5 \
--create-groups \
--renderer-workaround \
--remove-descriptive-elements \
--enable-comment-stripping \
--enable-viewboxing \
--indent=space \
--nindent=1 \
--no-line-breaks \
--enable-id-stripping \
--protect-ids-noninkscape \
input.svg output.svg
WebP¶
Use el comando cwebp para convertir los archivos de imagen PNG o JPEG a WebP:
cwebp -q 70 -m 6 input_file -o output.webp