Source: https://evaortiz.es/comprimir-fotos-cambiar-tamano-optimizar-imagenes-web/
Timestamp: 2019-09-18 18:32:26+00:00

Document:
Razones para optimizar las imágenes de tu web y cómo hacerlo fácilmente
06 Sep Razones para optimizar las imágenes de tu web y cómo conseguirlo fácilmente
Posted at 14:20h in Imagen / Fotografía by evaortiz 2 Comments
¿Cuántas veces has entrado a una página web y te ha sorprendido por la calidad de sus fotografías? Tu reacción ha sido: «Wow» ¿Y cuántas veces te has sentido defraudado al ver imágenes malas o que tardan en cargar? Has dicho: «Adiós».
La diferencia entre que un visitante permanezca en tu dominio o que lo abandone, puede depender de las fotos que le presentas y cómo se las presentas. Por eso es fundamental optimizar las imágenes de tu website. Verás en este artículo cómo puedes cambiar el tamaño y el peso de una imagen, sin perder calidad, y cuál es la resolución ideal y el formato que deben tener las fotografías en la web.
Y, si te quedas hasta el final del post, descubrirás un regalo que he hecho para ti, que te vendrá muy bien.
1 ¿Por qué hay que optimizar las imágenes de la web?
2 Fotografía de calidad con poco peso. ¡Es posible!
3 Formato de fotografía para webs, ¿cuál elijo?
3.1 Formato JPG
3.2 Formato GIF
3.3 Formato PNG
3.4 Formato SVG
4 El color de la imagen web: ¿RGB o CMYK?
4.1 Formato RGB
4.2 Formato CMYK
5 Dimensiones de las fotos para tu página web: ¿el tamaño importa?
5.1 ¿Cómo saber si están optimizadas las imágenes de una web?
5.2 Cambiar el tamaño de una imagen online
5.3 Tamaño ideal de fotos para blogger
6 Resolución de las fotografías para pantallas
7 Comprimir imágenes o fotos online
7.1 Plugins para reducir el peso de una foto en WordPress
7.2 Tiny PNG
7.3 Optimizilla
7.4 Image Optimizer
8 Revisa y previsualiza
8.1 Si quieres seguir leyendo te recomiendo:
¿Por qué hay que optimizar las imágenes de la web?
Ya tienes el dominio comprado, contratado el hosting y es el momento de empezar a diseñar. Para ello debes usar técnicas de copywriting y cuidar la parte visual. Necesitas fotos para tu web y esta selección no puedes dejarla al azar. Es uno de los elementos más importantes de tu portal; tanto para los usuarios, como para los motores de búsqueda (Google).
Aunque hoy en día hay teléfonos móviles que hacen instantáneas increíbles, la imagen siempre será superior si usas medios creados para tal fin. Invertir un poco de dinero en una réflex o en un fotógrafo profesional puede darte muchas alegrías.
La mejor forma de conseguir una fotografía de calidad es una cámara profesional.
Me dirás: «Pero Eva, cuanto mejor sea una foto más ocupa». Cierto, pero vas a aprender a reducir el peso de una imagen sin perder su calidad. Te diré más adelante cómo.
¿Y por qué te interesa que no pese mucho la foto? Porque tarda más en cargar y esto, los internautas, lo penalizamos con el abandono. Nadie va a esperar más de 5 segundos; debes ofrecer la mejor experiencia al usuario. Así que, no te queda más remedio que publicar fotos con el menor peso posible, sin descuidar su apariencia.
Si optimizas las imágenes de tu web, el tiempo de permanencia del visitante en tu página aumenta. Esto Google lo tiene en cuenta y lo premia ranqueando tu url hacia las primeras posiciones de las SERPs. Por lo tanto, para convencer tanto al usuario como a Google, es importante la calidad y la velocidad. Tus fotos deben ser buenas y cargarse rápido.
Presentar un producto o servicio sin fotos profesionales y no optimizadas te hará perder clientes.
Entonces, lo primero que debes hacer es escoger a conciencia las imágenes para tu web y después revisar ciertos valores. Has de tener en cuenta la resolución, el tamaño, el peso, el SEO, etc. Aunque parezcan muchos factores, en realidad verás conmigo que es sencillo.
Fotografía de calidad con poco peso. ¡Es posible!
Antes de repasar cada paso que debes dar, para optimizar las imágenes de tu web, veamos un caso práctico.
En este ejemplo, Nike transmite fielmente cómo es la zapatilla. Lo hacen siempre pensando en el comprador. Y ahí está la clave: ponerse en el lugar del cliente.
Quien quiere comprar un producto, lo que busca es una representación del mismo lo más real posible. Por eso la marca deportiva publica sus fotos con mucha precisión y detalle. Además se pueden visualizar sin tiempo de demora. ¡Genial! Es un ejemplo de una imagen buena y que no ralentiza la web. ¡Objetivo cumplido!
Ahora quiero que te hagas esta pregunta:
Si tuvieras que comprar este producto, ¿quedarías satisfecho con estas imágenes?
Al descargarme estas fotos para presentártelas en el artículo he comprobado que se han guardado a una resolución de 1920×1155 px y un peso de 1.048 MB. Eso quiere decir que se han preocupado por mantener la máxima calidad, para mostrar el producto a pantalla completa. Si tienes un ecommerce, puedes que necesites una gran capacidad de almacenamiento en tu hosting.
Para otras muchas webs estos parámetros no son tan necesarios. Así que podrás reducir el tamaño y el peso de las fotos y ganar en velocidad de carga.
Para ello debes tener en cuenta estos factores:
Elementos para optimizar una imagen en la web
FORMATO – COLOR – TAMAÑO/DIMENSIÓN – RESOLUCIÓN – PESO
Formato de fotografía para webs, ¿cuál elijo?
Para empezar a reducir el peso de tus fotografías deberás tener en cuenta los formatos de las mismas. Los ideales para la web son Jpg, Png y Gif. Estos pueden ser reproducidos en las pantallas con calidad y pesan menos que otros.
El JPG reproduce millones de colores y es el que se suele usar para fotografía. No pesa mucho porque está basado en píxeles. No te servirá para estos casos: ni animación, ni transparencia.
La mayoría de las imágenes de las webs están subidas en este formato. Ofrece calidad (siempre y cuando la instantánea haya sido tomada con un medio fotográfico profesional) y poco espacio.
El GIF es ideal para imágenes con colores planos y animaciones. Es muy habitual verlo en los blogs, para dar cierto dinamismo a los textos. Tienes una galería extensa en webs como:
Giphy: Los puedes descargar, embeber en la web o en las redes sociales o incluso hacer el tuyo propio fácilmente y en pocos minutos. Es mi preferida porque tiene los más actuales y los más populares del momento.
Gifmania: Permite buscarlos por categorías y copiar el código del GIF para no tener que descargarlo.
GifGifs: Tiene muchos ejemplos por categorías y lo bueno es que te indica el tamaño y el peso del archivo. En el apartado de herramientas puedes redimensionar, recortar o añadir texto.
Y aprovechando que estás en mi artículo voy a mostrar mi felicidad con este GIF:
PNG es el adecuado para transparencias y es mejor que los anteriores en cuanto a calidad, pero pesa más. Yo lo suelo usar para fotos a las que le he borrado el fondo o para fotos que me interesa que tengan mejor visualización como las de la landing page o el portfolio.
Al ser un formato vectorial se puede escalar sin perder calidad. Pesa poco y permite una definición alta en tamaños reducidos y aumentados. Es ideal para iconos o gráficas porque se basa en vectores, pero no para fotografías.
Te animo a ver este vídeo de un profesional que sigo en Instagram. En 7 minutos verás los diferentes formatos habituales y sus particularidades. Comprobarás cómo cambiar de uno a otro hace que la foto pese menos.
El color de la imagen web: ¿RGB o CMYK?
Es importante elegir el modo de salida del color de las imágenes que se mostrarán en un monitor. Hay dos: RGB y CMYK . Y como no, este factor también influye en el peso.
Es un sistema de color para ver en pantalla y reproduce millones de pigmentos. Esto es porque presenta más luminosidad cromática, al tener un espectro más amplio, pero en la mayoría de los casos esos colores no salen en el papel (por eso no se usa si vas a imprimir).
Este modelo tiene su base en los tres colores primarios rojo, verde y azul. Uniendo todos se consigue el blanco y combinándolos se puede representar cualquier tono.
CMYK está basado en la cuadricromía. Los colores a los que se refiere son cian, magenta, amarillo y negro. Este modelo trabaja de otra forma distinta al RGB, pero mezclando los cuatro tonos citados, podemos obtener también cualquier color del espectro visible.
Es el que se usa para imprimir, porque mantiene los colores más fieles a los que verás en la pantalla.
Cuando guardes tu fotografía debes elegir entre ambas opciones, aunque si exportas para sitio web te viene por defecto RGB. No obstante, desde Photoshop puedes cambiar de RGB a CMYK o viceversa desde esta ruta: Edición + Convertir en perfil.
Dimensiones de las fotos para tu página web: ¿el tamaño importa?
El tamaño importa, sí. No es lo mismo presentar una foto para la home, que para una parte pequeña de la web. La imagen deberá tener unas dimensiones u otras, según dónde vaya a ir situada.
Si tu foto ocupa toda la pantalla del ordenador y no tiene el tamaño adecuado puede verse con mala definición. Por el contrario, si vas a colocar una imagen en un espacio mediano de tu web, no tiene sentido que la subas muy grande, porque ocupará un espacio innecesario y te perjudicará para el SEO.
Tan malo es poner una imagen muy grande en un sitio muy pequeño (ocupa un espacio innecesario), como una imagen muy pequeña en un espacio muy grande (aparece pixelada).
Las pantallas de alta resolución tienen 2048px. Así pues, las medidas recomendadas serían:
1024px de ancho para media pantalla (o 2048px para la pantalla completa)
Un máximo de 200KB
Como no sabemos cómo es el monitor desde el que nos verán los internautas, la medida de las imágenes webs con las que acertarás seguro son: 1920 px de ancho y 1080 px de alto, para toda la pantalla.
¿Cómo saber si están optimizadas las imágenes de una web?
Si no sabes si las fotos de tu web están mal dimensionadas, puedes usar herramientas de análisis como GTMetrix. Aquí puedes hacer un diagnóstico de tu url. Te indica si las imágenes de tu página web están optimizadas o no: esto es, si son grandes para el sitio donde las has colocado. Si lo son deberás cambiar su tamaño con algún editor de fotografías. En el siguiente apartado te recomiendo algunos.
También puedes hacer uso de PageSpeed Insights. Es una herramienta de Google que te ayudará a conocer el estado de tu web en cuanto a la velocidad de carga. Te indica según colores qué está bien y qué debes cambiar (verde bien, naranja regular y rojo mal ). Uno de los puntos que analiza son las fotos de forma que, si lo ves en rojo, es momento de optimizar la parte visual de tu web.
Cambiar el tamaño de una imagen online
El editor por excelencia es Photoshop. Es el que yo uso. Puedes configurar todos los parámetros que te estoy explicando en este artículo. La única pega que tiene es que es de pago y tiene que estar instalado en tu ordenador.
Si eres fan del programa Paint, también puedes usarlo para el mismo fin.
Para reducir el tamaño de las imágenes en línea gratis te recomiendo Fixlr o BeFunky. Son editores, no tan completos como Photoshop, pero para un trabajo sencillo te sirven.
Con ambas puedes cambiar las dimensiones de una imagen y son muy intuitivas y fáciles de manejar. Si las pruebas, me encantaría que me dejaras un comentario más abajo, para decirme cuál te ha gustado más.
Y no puedo dejar de lado el editor de fotos de WordPress, donde puedes escalar de forma personalizada.
Tamaño ideal de fotos para blogger
Cuando escribes en un blog amenizas el texto con fotos, ilustraciones, infografías, etc. Presentar sólo palabras es un error, porque los lectores huirán de tu artículo.
El tamaño de las imágenes en un blog es proporcional a las dimensiones del mismo. Normalmente no suelen ocupar toda la pantalla de un ordenador, porque dejamos espacio lateral a los elementos del widget. De forma que, como te he dicho antes, no tiene sentido subir una foto de 1900 px, cuando se va a ver sólo en la mitad de la pantalla.
Mi recomendación es de unos 700px u 800 px; y, si vas a presentar un carrusel de fotos o alguna presentación, no te conviene que las fotos sean demasiado grandes, porque ralentizarán la animación.
Cuando insertas una fotografía para una web diseñada con WordPress te aparecen estas opciones por defecto:
En el tamaño puedes escoger la medida exacta, tal cual hayas subido la imagen, o elegir entre varias opciones que te da el CMS, para que aparezca más o menos grande, según el espacio donde irá publicada.
El problema de tener la opción de varias medidas es que, si subes una imagen a tu galería de medios, se guarda automáticamente en varios tamaños. Es decir, se crean 4 archivos de la misma imagen: con la medida original, la pequeña, la mediana y la grande.
Para evitar ocupar tanto espacio en el hosting te recomiendo que desde «Ajustes + Medios» dejes a cero los valores de los tamaños. De esta forma sólo habrá un archivo, pero eso sí, cuando lo publiques será con las dimensiones de la foto original y no podrás elegir entre estas tres opciones mencionadas.
Resolución de las fotografías para pantallas
El medio de visualización de una fotografía te dirá la resolución que necesita. No es lo mismo ver una imagen en una pantalla de ordenador o de un teléfono móvil, que verla impresa. Y como no, este factor también afecta al peso de la imagen.
Para imágenes online se necesita una resolución de 72 px. Un valor inferior que si la vas a imprimir, porque el detalle ha de ser menor. Lógicamente así ocupa menos y te ayuda al SEO. Recuerda: la imagen carga más rápido y no ralentiza el tiempo medio de carga de tu web. Y ya te he dicho antes que esto Google lo valora mucho.
72px: Esta es la resolución perfecta para Internet (dispositivos electrónicos en general). Si tiene más resolución de este valor supondrá exceso de peso para la web, lentitud y por tanto visitas que se irán.
300px: Esta es una resolución de imprenta, la que se utiliza para Diseño Gráfico.
Comprimir imágenes o fotos online
Llegados a este punto, te reitero que una cosa es el tamaño de la imagen y otra la resolución. Ya has visto que configuras la foto según las medidas idóneas para el espacio donde irá publicada, con un modo de color en RGB, un formato de bajo peso y con una resolución de 72px.
Si das todos los pasos que te he ido indicando, tu foto ocupará menos espacio. Pero puedes ir más allá y comprimir o reducir más el peso de una imagen sin perder calidad.
Hay herramientas online, aplicaciones y plugins que consiguen comprimir las fotografías sin que se perciba detrimento visual.
Normalmente el truco está en reducir el número de colores de la imagen. Y lo podrás hacer con ayuda de algunos programas.
Plugins para reducir el peso de una foto en WordPress
Si tienes el hosting con Webempresa, te recomiendo un plugin gratuito para WordPress llamado Optmizador.io. Lo que consigues instalándolo es comprimir tus imágenes automáticamente y todas al mismo tiempo.
Si tienes el hosting con cualquier otra plataforma, en el siguiente vídeo verás dos plugins adicionales: reSmush.it y LazyLoad.
Si en tu blog o sitio web no tienes muchas ilustraciones, pero las pocas que tienes las quieres optimizar, en lugar de plugin te conviene comprimir las imágenes online con estas herramientas:
Te permite trabajar desde el ordenador, sin tener instalado ningún programa. Puedes subir hasta 20 fotos a la vez, con un peso total de 5 MB, en la versión gratuita. Si quieres subir un número mayor al mismo tiempo, o que ocupen más megas, tienes la opción de pago: 25€ anuales.
Yo la uso mucho y te puedo asegurar que da buenos resultados. Es rápida y ofrece menos peso con casi la misma calidad.
También la puedes complementar con Photoshop para comprimir las imágenes desde este programa. Te da la posibilidad desde la interfaz de Adobe de escalar, previsualizar y guardar los archivos ya comprimidos. Es muy cómodo.
Una vez que comprimes los archivos te indica el peso inicial, el resultante y el porcentaje de reducción del tamaño. Te la descargas en tu ordenador, y ya está lista para ser publicada en tu web o en las redes sociales.
Con esta aplicación también puedes analizar tu url. Te indica si las imágenes de tu web están optimizadas o no.
Esta herramienta también te da la posibilidad de trabajar con hasta 20 imágenes a la vez.
Lo bueno en este caso es que puedes elegir el porcentaje de calidad que quieres perder con la compresión, a través del manejo de una barra lateral. Puedes hacer zoom y ver la diferencia entre ambos ejemplos, antes de procesar el cambio.
Su ventaja es que sirve para comprimir el archivo de imagen y a la vez cambiar el tamaño y la calidad (te da varias opciones para elegir).
Trabaja de modo online o, si lo prefieres, lo puedes instalar en el ordenador.
La única pega es que no tiene el protocolo de seguridad https. Así que si quieres preservar tus datos, esta web no te asegura que lo vayan a hacer.
Revisa y previsualiza
Si quieres tener a mano todos los pasos y los factores que te ayudan a reducir el peso de tus imágenes, te vendrá muy bien un checklist. Y tengo una buena noticia: ¡ya la tengo hecha para ti! Sí, sí. Todo lo que te he detallado en este post, pero de forma esquemática, para que no se te pase por alto ningún detalle, antes de publicar tu foto en tu web.
No te quedes sin ella, pídemela aquí:
Quiero una checklist para optimizar las imágenes de mi web
Una vez que hayas jugado con todos los elementos que te he explicado y hayas comprimido las fotografías, revisa cómo queda la imagen en tu página, antes de publicarla. La vista previa es fundamental en estos casos.
Si el resultado no es el esperado, quizás es que debas hacer una nueva fotografía con un medio más profesional. La diferencia entre presentar una web con imágenes optimizadas y con calidad es increíble. No debes subestimar el factor visual porque es lo primero que ven los usuarios.
Y tan importantes son estos consejos, como tener una presentación personal y única. Los bancos de imágenes te pueden ayudar en muchos momentos puntuales (sobre todo en el blog o en las redes sociales). Pero, si quieres mostrar una página web exclusiva, lo mejor es que tengas tus propias fotografías.
Tanto si tienes una tienda online como una página de servicios o de marca personal, puedes pedirme un presupuesto a través del formulario de contacto en el correo info@evaortiz.es.
Si te ha quedado alguna duda, estaré encantada de resolverla en los comentarios. O si puedes aportar alguna herramienta más o truco para optimizar las imágenes de la web, me vendría genial. Y como siempre: te pido que compartas este artículo en las redes sociales, si crees que puede ser de utilidad a más personas.
Si quieres seguir leyendo te recomiendo:
Cómo escoger la foto del perfil de las redes sociales. Ejemplos.
Posted at 15:46h, 10 septiembre Responder
¡Super útiles los tips! En especial para los que no nos llevamos demasiado bien con las imágenes y que tenemos tendencia a ignorarlas por eso 😛 ¡Gracias por ponerlo todo más fácil, Eva!
evaortiz
Posted at 17:44h, 10 septiembre Responder
Muchas gracias por tus palabras Kytu.
Me alegro que te haya servido, ese es mi objetivo.
Ahora es tu turno. Te toca optimizar al máximo las imágenes de tu web para subir posiciones en los buscadores. Ya me contarás qué tal te ha ido.
Imagen / Fotografía
Razones para optimizar las imágenes de tu web y cómo conseguirlo fácilmente
Breve historia de las redes sociales. (Evolución + cronología + infografía)
Qué es el marketing de contenidos y 7 razones para dejarlo en manos de un periodista
Cómo gestionar la comunicación en una situación de crisis. Casos reales.
¿Has visto mis fotos en Instragram?
¿Quieres ver lo que hago?
Ⓒ Eva Ortiz
Haz clic para aceptar las cookies. más información

References: resolución 
 Resolución 
 resolución 
 RESOLUCIÓN 
 resolución 

Resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución