Documentos de Académico
Documentos de Profesional
Documentos de Cultura
1. Introducción ................................................................................. 3
2. ¿En qué consiste la optimización de imágenes web?............ 3
3. Mejores formatos de imagen para una web ............................. 4
4. ¿Cuál es el mejor formato de imagen para una web? ............ 4
5. ¿Cómo redimensionar las imágenes al tamaño ideal? .......... 5
5.1. Herramientas para redimensionar imágenes
masivamente ......................................................................... 6
6. Optimizar imágenes para web con Adobe Photoshop ........... 7
6.1. Tipos de formatos de imagen en Adobe Photoshop ............ 7
6.2. Optimizar tamaño de imagen en Adobe Photoshop ............ 8
6.3. Optimizar perfil de color de imagen en
Adobe Photoshop .................................................................. 9
6.4. Optimizar imagen al guardar como JPEG en
Adobe Photoshop ................................................................ 11
6.5. Optimizar imagen al guardar como PNG en
Adobe Photoshop ................................................................ 13
6.6. Optimizar imagen al guardar como web manualmente
JPEG con Adobe Photoshop .............................................. 15
6.7. Optimizar imagen al guardar como web manualmente
PNG con Adobe Photoshop ................................................ 17
6.8. Optimizar imagen al guardar como web automáticamente
en Adobe Photoshop........................................................... 19
7. Herramientas online para reducir el tamaño y comprimir
imágenes..................................................................................... 22
8. Plugins WordPress para optimizar imágenes........................ 26
9. Resumen ..................................................................................... 30
1. Introducción
Tener un sitio web no se basa únicamente en la subida sin control
de contenido, hay que cuidad la estructura de la web incluido cada
elemento que albergamos en ella. Hay que tener en cuenta que se
accede a través de conexiones de Internet y que, aunque en
muchos sitios se goza de altas velocidades, en otros aún se
encuentran algo rezagados. Todo ello sin contar con la importancia
del tema smarphone y tabletas con el gasto de megas que ello
supone.
GIF
El formato GIF es muy antiguo, pero muchas personas no lo
consideraban importante hasta hace poco, cuando se volvió muy
famoso y prácticamente lo podemos encontrar en todos lados.
Prácticamente es usado siempre para imágenes en movimiento y
soporta paletas de 256 colores, al igual que transparencias.
PNG
PNG o Portable Network Graphics es una opción alternativa a GIF
que además de soportar transparencias, las imágenes son
excelentes, pero con un alto peso debido a su algoritmo
de compresión sin pérdida.
JPG
JPG es uno de los formatos más encontrados en todas las web, de
hecho, es el formato estándar para las fotografías. Lo mejor de este
formato es que cuenta con una compresión con pérdida, por lo cual
se puede sacrificar algo de la calidad para obtener un peso
sumamente bajo.
4
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Caso práctico:
Esto quiere decir que aunque suba una imagen más grande se verá
a 250 px de ancho, por lo cual estoy desaprovechando el resto y lo
único que consigo aumentar el tamaño de la página.
5
Alfredo Herraiz Naranjo
Una vez que sepas las dimensiones las puedes redimensionar con
programas como Paint, Photoshop o Gimp.
JPEG Resizer
6
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
7
Alfredo Herraiz Naranjo
Formato JPEG
Formato PNG-8
Formato PNG-24
Formato GIF
8
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Una vez diferenciados ambos aspectos hay que reseñar que dos
imágenes pueden tener el mismo tamaño pero distinta resolución y
proporciones. Si son imágenes para web se recomienda tratar los
tamaños en tamaño de píxeles. Para acceder a ello ve a Imagen /
Tamaño de imagen o presiona la siguiente combinación.
Nota
9
Alfredo Herraiz Naranjo
Paso 1:
Paso 2:
10
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Paso 1:
11
Alfredo Herraiz Naranjo
Paso 2:
Opciones de imagen
12
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Opciones de formato
Nota
Para exportar como PNG tenemos que hacer el mismo primer paso
que con los otros formatos, ir a Menú Archivo/ Guardar como y
seleccionar en este caso PNG.
13
Alfredo Herraiz Naranjo
Paso 2:
Compresión
Entrelazar
14
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
15
Alfredo Herraiz Naranjo
Paso 2:
Calidad de imagen
Progresivo
Entrelazado
Halo
16
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Convertir en sRGB
Paso 2:
17
Alfredo Herraiz Naranjo
Transparencia
Ajuste a Web
18
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Paso 2:
19
Alfredo Herraiz Naranjo
Paso 3:
20
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Paso 4:
Paso 5:
21
Alfredo Herraiz Naranjo
22
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Kraken.io
Desventajas:
23
Alfredo Herraiz Naranjo
TinyPNG
Desventajas:
24
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
Compress Jpeg
• Es completamente gratuita.
PunyPNG
Ventajas
Desventajas
WP Smush
26
CÓMO OPTIMIZAR LAS IMÁGENES PARA LA WEB
27
Alfredo Herraiz Naranjo
29
Alfredo Herraiz Naranjo
9. Resumen
Espero que con lo que te he explicado en este post ya sepas cómo
optimizar imágenes para web.
30