Mejorar la carga de las imágenes en webs WordPress
Hago hincapié en WordPress porque es el gestor de contenidos que puede manejar cualquier persona para crear o editar contenido en una web (con unos mínimos conocimientos en su manejo).
Además, normalmente son personas que no prestan atención a ciertos detalles de este tipo, y están más interesados en escribir contenido de su propio interés.
No obstante, los programas y herramienta que recomiendo, son aplicables a cualquier tipo de página web. De hecho, el programa que más utilizo es Photoshop, combinado con la herramienta online TinyPNG.
Nota 1: En todo momento estamos hablando de imágenes para la web o un medio digital, nunca de imprimir.
Índice
- Detalles imágenes: tamaño, resolución, peso
- Ejemplos: cámara de fotos y tarifa de datos
- Programas, herramienta, consejo y plugins
– Programas edición imágenes (Mac/Windows): cambiar tamaño
– Herramienta online: para comprimir (reducir) peso
– Consejo de ‘AyudaWP’: reducir tamaño WordPress
– Plugins WordPress: para comprimir (reducir) peso imágenes - Videotutorial
- Opinión
Detalles imágenes: tamaño, resolución, peso
Nota 2: Este artículo es para aquel usuario que no comprende la importancia para la web, en cuestiones de galerías fotos.
Tamaño
960 x 720 píxeles (máx. recomendado).
Resolución web
72 dpi (acorde con tamaño píxeles).
Peso medio por imagen
Aproximadamente 150 KB (huir de MB) si es formato JPG (formato PNG pesa más pero tiene menos perdida de calidad y se usa para transparencias e imágenes planas, así como textos).
Ejemplos: cámara de fotos y tarifa de datos
Cámaras de fotos
Manejan en píxeles el tamaño y son de una resolución de 72 dpi:
– 12 Megapixels = 4000 x 3000 pixeles (hay que reducir este tamaño a 960 x 720 píxeles máx.) con un peso aprox. de 4 MB (reducir a 150 KB aprox.)
Tarifa de datos
Normalmente para dispositivos móviles o tablets, manejan cierto peso, expresado en:
– 1 GB = 1000 MB (tarifa de datos más barata).
Otras medidas de datos:
– 1 MB = 1000 KB (atentos a este peso KB, que veremos a continuación).
– 1 KB = 1000 B.
Tenemos que conseguir que nuestras fotos pesen menos de 1 MB. Lo ideal serían menos de 150 KB teniendo en cuenta el tamaño que pongo de ejemplo en este artículo: 960 x 720 px, la resolución: 72 dpi y el formato: JPG.
Programas, herramienta, consejo y plugins
Programas de edición
Para cambiar tamaño (pixeles) si fuera necesario.
Herramienta online
Para comprimir (reducir) aun más el peso y conservar calidad (formatos JPG, PNG).
Consejo ‘Ayuda WordPress’
Eliminar ciertos tamaños por defecto que establece WordPress.
Plugins WordPress
Destaco 3 tipos que son los más recomendados para comprimir (reducir) peso aunque sería cauto con ellos, porque los plugins que dan mayores problemas en WordPress son los de galerías de fotos y estos para optimizar imágenes.
Nota 3: Un buen sustituto de plugins de galerías de imágenes, sería la galería nativa de WordPress y si vuestro tema no posee ventanas emergentes para presentar las imágenes, hay un plugin que sí lo hace, Responsive Lightbox.
Programas edición imágenes (Mac/Windows): cambiar tamaño
Para cambiar tamaño (píxeles) si fuera necesario. Programas gratuitos.
Vista Previa (Mac).
– Cambiar dimensiones (tamaño) de la imagen:
Abrir cualquier foto con ‘Vista previa’ > Herramientas > Ajustar tamaño > Dimensiones de la imagen.
1º. Ajustar a: Personalizado (píxeles).
2º. Anchura: 960 / Altura: 720 (píxeles).
3º. Resolución (dpi): 72 (píxeles/pulgada).
4º. Ajustar tamaño proporcionalmente (sí).
5º. Muestrear imagen (sí).
6º. Aceptar.
– Guardar la imagen en JPG (JPEG), PNG, u otros formatos:
Archivo > Exportar > Exportar como (elige nombre) > Carpeta donde guardar (Escritorio) > Formato (el que quieras) > Guardar.
Gimp (Mac/Windows/Linux).
– Cambiar dimensiones (tamaño) de la imagen:
Abrir cualquier foto con ‘Gimp’ > Imagen > Escalar la imagen.
1º. Anchura: 720 / Altura: 960 (px).
2º. Resolución (dpi): 72 (píxeles/in).
3º. Interpolación: cúbica.
4º. Escala (Aceptar).
– Guardar la imagen en JPG (JPEG), PNG, u otros formatos:
Archivo > Exportar como > Nombre > Guardar en la carpeta: Desktop (Escritorio) > Seleccione el tipo de archivo (Extensiones: .jpg o .png) > Si hemos elegido PNG nos sale ventana emergente con una serie de opciones (marca Entrelazado) > Exportar.
Otros programas son recomendados por ‘Emezeta‘ (desconozco como van) para comprimir (reducir) peso de las imágenes.
Herramienta online: para comprimir (reducir) peso
TinyPNG (gratis)
Yo he utilizado ‘TinyPNG’ que es la que me ha dado resultados más óptimos. Hacer 2 matizaciones con el formato JPG y PNG.
– PNG: Elegid este para transparencias y colores planos (logotipos). También si contiene textos.
– JPG: Elegid este si es una foto con personas/paisajes/animales.
Nota 4: como curiosidad esta herramienta online, tiene un plugin para WordPress que veremos al final del artículo y también posee un plugin para Photoshop (de pago: 50$).
Hay otras herramientas pero no me han gustado en la medida que ésta, la cual sí posee una gran compresión (reducción) peso y calidad resultado.
No obstante, os voy a dar enlaces de otras 2 que recomienda ‘social4creative’:
– Webresizer (subida max. 10 MB y otros detalles).
– Compressor.io (JPEG – PNG – GIF – SVG).
Consejo de ‘AyudaWP’: reducir tamaño WordPress
Una manera sencilla de reducir el tamaño de tu WordPress.
Hay comportamientos por defecto de WordPress que contribuyen a sobrecargar tamaño de tu web. Cada vez que subes una imagen para incorporar a una entrada, WordPress crea automáticamente más tamaños.
Te encontrarás con 2 o 3 imágenes de más que no siempre utilizas.
¿Es necesario que WordPress cree esas copias?
Evitarlo es muy sencillo, ve a:
– Escritorio WP > Ajustes > Medios: y pon a “cero” el tamaño o tamaños que no quieras que WordPress cree automáticamente.
Personalizar tamaño imagen
Lo que no comentan en ‘AyudaWP’ ya que el artículo es de 2013, es una nueva opción que se incluyo creo que a partir de la versión 4.3 de WordPress.
Ahora si en nuestra entrada/página añadimos objeto, por ejemplo una imagen y hacemos clic sobre ella (en modo Visual) nos salen 6 iconos en la parte superior o inferior: Alineación izquierda, centrada, derecha, Sin alineación, Editar, Eliminar.
Si damos clic sobre ‘Editar’, tendremos a nuestra disposición ‘detalles de la imagen‘. Si queremos personalizar el tamaño, es muy fácil. Ir a ‘Ajustes de visualización’ > ‘Tamaño’: Tamaño personalizado (puedes meter el valor que quieras primero y se ajustará el otro valor automáticamente).
Plugins WordPress: para comprimir (reducir) peso imágenes
Destaco 3 tipos que son los más recomendados aunque sería cauto con ellos, porque los plugins que dan mayores problemas en WordPress son los de galerías de fotos y estos para optimizar imágenes.
Accedes desde la pestaña de medios, sigue los pasos que te indican y se encargara de bajar el peso de las imágenes que tengas en tu servidor.
Como es la versión gratuita tiene un tope de 1 MB por imagen, lo que significa que las que sean superiores a ese peso no las modifica, el resto veras como le baja el peso considerablemente.
Además, todas las nuevas imágenes que subas a tus artículos, el propio programa las optimizará.
– Fuente información: ‘social4creative’
Plugin útil y ligero, se utiliza tanto en imágenes alojadas dentro de biblioteca WordPress como las alojadas en algún CDN.
Realiza registro de imágenes que ya han sido optimizadas, para no tener que repetir la optimización cada vez que se utilice este plugin.
– Fuente información: ‘social4creative’
Compress JPEG & PNG images (TinyPNG)
Estuve tentado de instalar este plugin al ver tan buen resultado de su herramienta online, pero este texto me paro los pies (si bien es el único que se adelantó a la actualización para la versión 4.4 de WordPress y su soporte técnico en foros es muy bueno).
“Instala este plugin y obtén tu clave de API gratuita desde esta dirección. Con una cuenta gratuita puedes comprimir más o menos 100 imágenes por mes (basado en una instalación normal de WordPress). El número exacto depende de la cantidad de tamaños en miniatura que utilizas”.
“Puedes cambiar cualquiera de los tamaños miniatura generados una vez comprimidos, ya que cada uno de ellos cuenta como una compresión. Y si eres un usuario frecuente, puedes comprimir más imágenes por una pequeña tarifa adicional por imagen”.
Videotutorial
- WordPress: optimizar peso imágenes web
Vamos a ver detalles relacionados con el tamaño, resolución y peso de las imágenes, aptas para una página web. Unos ejemplos para que lo entendáis mejor. Y una serie de programas, herramienta, consejo y plugins.
Opinión
Creo que ésta es una de esas cosas que todos deberíamos aprender, para coger buenos hábitos y no depender tanto de plugins que faciliten esta tarea. Aunque comprendo que hay gente que no dispone de tiempo para hacer algunos procesos, se aconsejan.
¿Qué opinas?
Fuente imágenes
Ver apartado relacionado en mi Pinterest.
Soy diseñador web con WordPress. También hago uso del diseño gráfico (edición imágenes) e implementación de vídeos (puedo editar pero no grabar). Te ayudo a descubrir/potenciar la identidad de tu marca, otorgando distinción a tu sitio web. Hago buen uso del diseño visual y emocional. Estoy disponible para darte: servicio, formación, consultoría.