Alternativa a Tinyjpg
Guardar imágenes para la web siempre ha sido un poco misterioso para muchos. Subir imágenes que son pesadas (tamaño original de la imagen a 5000px de ancho, imágenes no optimizadas) no sólo creará problemas con la experiencia del usuario en su sitio, sino que también afectará a su estrategia de SEO (velocidad de carga, tasa de rebote, ranking, etc).
Por último, proporcionaremos algunos consejos de SEO de imágenes sobre cómo titular sus imágenes correctamente al guardarlas y por qué el uso de etiquetas ALT mejorará su SEO. Para las imágenes ya subidas a su sitio, le mostraremos cómo identificar las imágenes que son demasiado grandes y están ralentizando su sitio. Comencemos.
Nota: cuando hablamos de tamaño de imagen nos referimos a la dimensión de la imagen en píxeles. Siga las directrices sobre el tamaño de las imágenes del sitio web que se indican a continuación para mejorar el rendimiento de su sitio y ofrecer una gran experiencia al usuario.
A la hora de subir imágenes a la web hay que tener en cuenta una serie de cosas, como para qué se utiliza la imagen, qué tamaño debe tener el archivo y qué tipo de imagen debe utilizarse para las diferentes áreas de su sitio.
¿Cómo puedo optimizar un JPEG para la web?
Optimizar como JPEG
Abra una imagen y elija Archivo > Guardar para Web. Elija JPEG en el menú de formato de optimización. Para optimizar a un tamaño de archivo específico, haga clic en la flecha a la derecha del menú Preajuste y, a continuación, haga clic en Optimizar a tamaño de archivo.
¿Qué calidad de JPEG es mejor para la web?
Asegúrese de que su Formato de Imagen está configurado como JPEG. Esta es la opción más fácil de usar en la web. La calidad no debe ser inferior a 65. Normalmente la establecemos en 75.
¿Cómo se optimizan las imágenes para la web y el rendimiento?
La clave del éxito de la optimización de imágenes para el rendimiento web es encontrar el equilibrio perfecto entre el menor tamaño de archivo y una calidad de imagen aceptable. Las tres cosas que juegan un papel importante en la optimización de imágenes son Formato de archivo de imagen (JPEG vs PNG vs GIF) Compresión (mayor compresión = menor tamaño de archivo)
Redimensionar la imagen para la web
Para que te hagas una idea de cuánta compresión es posible, hemos puesto a prueba algunas herramientas de optimización de imágenes online. Trabajando con dos imágenes -una JPG (tamaño de archivo 238 KB aprox.) y otra PNG (118 KB aprox.)- esto es lo que hemos encontrado:
La mayoría de nosotros debería estar bien con la compresión por defecto de 65, aunque el sitio web puede comprimir las imágenes en cualquier lugar entre 0-99. Utilizando sólo la configuración por defecto, pude reducir el tamaño del archivo en un 66%.
Si quieres, también puedes ver los datos EXIF (hora, fecha y marca de la cámara) y cambiar el tamaño de las imágenes. Y luego pasar a añadir efectos como subtítulos, bordes o sombras. Una vez que la herramienta comprime la imagen, puedes descargarla y utilizarla en cualquier lugar que necesites.
El paquete Pro cuesta a partir de 5 dólares al mes y ofrece también funciones adicionales. Puede recoger archivos de imagen de múltiples fuentes, como una lista de URLs o un archivo zip. Eso no es todo, puede devolver las imágenes optimizadas en un archivo zip, tomar todas las imágenes de su sitio web, organizarlas en carpetas, cambiar el tamaño de las imágenes, almacenarlas en la nube de Kraken y mantener las estadísticas de sus optimizaciones. Un plugin gratuito lo hace todo más fácil para los usuarios de WordPress.
¿Cuál es la configuración más eficaz para optimizar un JPEG?
La vista previa con el ajuste de calidad 30 tiene algunos artefactos, pero también tiene un tamaño de archivo razonable de 23,02KB. Basándonos en esta información, la vista previa con el ajuste de calidad 30 es el mejor punto de partida para optimizar esta imagen.
¿Cuál es el mejor tamaño de archivo de imagen para la web?
El tamaño de archivo óptimo para las imágenes de un sitio web es de no más de 200 KB, y para las imágenes de fondo de pantalla completa, entre 1500 y 25000 píxeles de ancho, y para la mayoría de las demás imágenes un ancho máximo de 800 píxeles. Mantener las imágenes entre estos perímetros garantizará que se carguen correctamente en ordenadores y pantallas de móviles.
¿Qué resolución deben tener las imágenes para la web?
La resolución estándar para las imágenes web es de 72 PPI (a menudo llamada «resolución de pantalla»). A ese tamaño, los píxeles que se ven en la pantalla son todos los que hay; una imagen de 4″ de largo a 72 PPI ocupará aproximadamente 4″ de tu monitor.
Comprimir la imagen
Las imágenes suelen representar la mayor parte de los bytes descargados en una página. Por ello, la optimización de las imágenes puede suponer uno de los mayores ahorros de bytes y mejoras de rendimiento: cuantos menos bytes tenga que descargar el navegador, menos competencia habrá por el ancho de banda del cliente y más rápido podrá descargar y representar el contenido en la pantalla.
Encontrar el formato y la estrategia de optimización óptimos para sus activos de imagen requiere un análisis cuidadoso en muchas dimensiones: tipo de datos que se codifican, capacidades del formato de imagen, ajustes de calidad, resolución y más. Además, hay que tener en cuenta si algunas imágenes se sirven mejor en un formato vectorial, si los efectos deseados pueden conseguirse a través de CSS, y cómo ofrecer activos con la escala adecuada para cada tipo de dispositivo.
Los formatos GIF, PNG y JPEG representan el 96% de todo el tráfico de imágenes de Internet. Debido a su popularidad, PageSpeed Insights ofrece recomendaciones de optimización específicas. Para su comodidad, puede descargar las imágenes optimizadas directamente desde PageSpeed Insights (que utiliza la biblioteca de optimización de imágenes de modpagespeed.com).
¿Qué es el JPG optimizado?
Un JPEG optimizado es simplemente un archivo JPEG que incluye tablas Huffman personalizadas creadas tras un análisis estadístico del contenido único de la imagen.
¿Qué es mejor para la web, PNG o JPG?
El formato PNG es un formato de archivo de compresión sin pérdidas, lo que lo convierte en una opción habitual para su uso en la Web. … JPG es una opción común para su uso en la Web porque está comprimido. Para almacenar dibujos lineales, texto y gráficos icónicos con un tamaño de archivo menor, GIF o PNG son mejores opciones porque no tienen pérdidas.
¿Cómo puedo hacer que una imagen cargue lentamente en mi sitio web?
Lazy Loading Techniques for images. Images on a webpage can be loaded in two ways – using the <img> tag, or using the CSS `background` property. Let’s first look at the more common of the two, the <img> tag, and then move on to CSS background images.
Comprimir jpeg en línea
Las imágenes grandes y poco optimizadas reducen la velocidad del sitio y alejan a la gente de su tienda. Los estudios demuestran que si un sitio de comercio electrónico se carga más lentamente de lo esperado, más del 45% de los visitantes admiten que es menos probable que realicen una compra.
Las imágenes son las que más contribuyen al tamaño total de la página, lo que hace que las páginas sean lentas de cargar. Los datos de HTTP Archive revelan que las imágenes no optimizadas representan, de media, el 75% del peso total de una página web. Esto puede tener un impacto negativo en el rendimiento de su sitio web.
La optimización de imágenes para web y móvil existe para que las páginas web se carguen más rápido. Crean una mejor experiencia de navegación para los compradores. Si hay un retraso de apenas dos segundos en la velocidad de su página, su tasa de rebote puede aumentar en un 103%.
La velocidad de la página es importante para la experiencia del visitante. La gente puede detectar retrasos de tan solo una décima de segundo. Cualquier cosa más larga que eso no parece «instantánea». Los retrasos de un segundo son suficientes para interrumpir el proceso de pensamiento de una persona.
Las páginas con un tiempo de carga más largo tienden a tener tasas de rebote más altas y un tiempo medio en la página más bajo. Reducir los tiempos de carga de las páginas incluso en un segundo mejorará la experiencia de su usuario. La mejora de la experiencia del usuario y las interacciones con su sitio tienen un impacto positivo en la clasificación en los motores de búsqueda, lo que puede mejorar el compromiso, las conversiones y la retención de clientes.