Diseño
• La primera portada daña los ojos
• Es importante elegir bien nuestros recursos de imagen, la web es nuestra imagen
• Importante seleccionar bien tema en función de nuestros recursos
@BeatrizLavela
Básico
• Importante: seleccionar correctamente el formato.
• Formatos principales
– JPEG: fotografías e imágenes en general
– PNG: normalmente usado para capturas de pantalla e imágenes con transparencia -> casi siempre logos
– GIF: imágenes animadas
• Piensa en todos los dispositivos: el móvil pequeño, el monitor gigante, la tele de casa.
@BeatrizLavela
SEO
• Nombre de imagen: separado por guiones
• Atributo Alt: indispensable (title y longdesc interesante también).
• Contexto
• Linkbuilding: también para las imágenes.
• Marca de agua
• Infografía
@BeatrizLavela
Optimización
• Tamaño de las imágenes: – Alto – ancho
– Resolución
– Optimización
• Compresión – Herramientas escritorio:Compressor.io
– Smush.it
• Fuentes iconos Font Awesome, jetpack, Genericons
@BeatrizLavela
Optimización
• Servidor ficheros multimedia
– Si es una web en funcionamiento, no olvidar las redirecciones
• CDN:
– Depende del público objetivo de la web
@BeatrizLavela
Programación
• Dispositivos retina
– @media (-webkit-min-device-pixel-ratio: 2)
– WP Retina 2X
• Favicon:
– Muestra tu imagen de marca, no el cms
– Para los 404
• Sprites
• Lazy load
@BeatrizLavela
Programación
• Definir los tamaños de imagen a usar:
– Ajustes -> medios
– add_image_size (): nos permite definir tamaños de imagen a generar
Sólo sirve para las nuevas subidas, no genera los tamaños para las existentes
• Regenerate thumbnails: si añadimos tamaños de imagen. Al cambiar un tema.
@BeatrizLavela
Programación
• Galerías:
– Mostrar imagen pequeña con lightbox a la grande
– NextGen Gallery
@BeatrizLavela