Cuida tu imagen en

WordPress

• WordCamp Marbella 2016

• @BeatrizLavela

Transversal

• Diseño

• Seo

• Optimización

• Programación

• Plugins @BeatrizLavela

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

¡Gracias por tu

atención!

wadda bea@wadda.es

@BeatrizLavela