14 herramientas gratuitas de imagen y diseño que se ejecutan en tu navegador

El trabajo con imágenes tiene un problema específico: el trabajo suele ser pequeño y las herramientas que se ofrecen son enormes. Necesita eliminar 400 KB de una imagen principal, obtener un valor hexadecimal que mencionó su diseñador o generar un favicon que nadie ha creado todavía. Eso no requiere suscripción.

Las catorce herramientas siguientes cubren la preparación de imágenes, el trabajo con color, la generación de efectos CSS y los pequeños recursos de producción que pasan desapercibidos. Cada uno se ejecuta localmente, lo que es más importante para las imágenes que para el texto: la foto que acabas de comprimir suele ser una foto que aún no has publicado.

La mayoría de los problemas de imagen son en realidad problemas de peso. Una página que se siente lenta generalmente contiene imágenes que son más grandes que su tamaño de visualización, en el formato incorrecto y con una configuración de calidad que nadie jamás cuestionó.

¿Cuánto debes comprimir? La respuesta honesta es: hasta que parezca mal, retroceda un paso. Para una imagen fotográfica destacada, la calidad entre el 70 y el 80 por ciento suele ser indistinguible del original en un tamaño de visualización normal. Para un logotipo, una captura de pantalla o cualquier cosa con color plano y bordes duros, use PNG y comprima más fuerte; estos ganan más y pierden menos.

Una regla práctica: cualquier valor inferior a 200 KB está bien para una imagen principal, menos de 80 KB para una miniatura, y si no puede obtener menos de 300 KB, probablemente tenga un problema de dimensión en lugar de un problema de calidad.

Convertir una imagen a un URI de datos Base64 elimina una solicitud HTTP, lo que suena como una pura victoria. Generalmente no lo es. La cadena codificada es aproximadamente un tercio más grande que el archivo binario, no se puede almacenar en caché por separado y sobrecarga su CSS o HTML.

En línea solo cuando la imagen es pequeña (menos de unos pocos kilobytes), se usa una vez y es crítica. Un pequeño icono en una única plantilla de correo electrónico es el caso clásico. Para cualquier cosa que se repita en varias páginas o que supere unos pocos kilobytes, sírvala como un archivo y deje que el navegador lo almacene en caché.

Sea claro sobre lo que esto hace. Elimina u oscurece la marca visible. No puede reconstruir los píxeles subyacentes: la información sobre la que se pintó desaparece y ningún filtro la recupera. Los resultados varían desde invisible, cuando la marca se asienta sobre un fondo liso, hasta una mancha obvia cuando se asienta sobre detalles.

Una cosa más que vale la pena decir claramente: eliminar la marca de agua de otra persona y publicar el resultado es un problema de derechos de autor en la mayoría de las jurisdicciones y una violación de la licencia, independientemente de si lo atraparán. El objetivo de esta herramienta es eliminar marcas de sus propias imágenes o de las que tiene bajo licencia.

El color es donde los pequeños errores se vuelven muy visibles. Una relación de contraste que no es accesible, un valor hexadecimal que en realidad es un triple HSL, una paleta que parece coherente en el monitor y turbia en un proyector.

Una advertencia sobre las herramientas de color: todas asumen que su monitor está calibrado y que la persona que ve su página tiene ojos que funcionan. Ninguna suposición es segura. Ésa es una razón para preferir las combinaciones contrastadas a las subjetivas.

Escribir a mano un degradado o una sombra en capas es una tarea realmente desagradable. La sintaxis es complicada, no puedes ver lo que estás produciendo y la diferencia entre una buena sombra y una mala son unos pocos píxeles de desenfoque.

El truco para los cuatro es la moderación. Dos sombras, una oscura y estrecha y otra amplia y suave, se leen como elevación física. Una sombra parece un sitio web de hace quince años. Genere, copie y luego elimine hasta que no sepa que está allí.

Aquí está todo el grupo haciendo un trabajo real. Una página necesita un héroe con una imagen de fondo, un título y un botón, y nada de eso se ha creado todavía.

Cinco herramientas, ningún paquete de diseño y cada resultado es un valor que puede pegar directamente en el código.

¿Se cargan mis imágenes en algún lugar? No. La compresión, el cambio de tamaño y la conversión Base64 se realizan en su navegador, razón por la cual no hay límite de tamaño de archivo ni cola de carga.

¿Comprimir una imagen perderá calidad? Siempre, por definición. La pregunta es si es visible. Con una calidad del 70 al 80 por ciento y dimensiones correctas, normalmente no lo es.

¿Por qué mi imagen redimensionada todavía parece grande? Nueve de cada diez veces la comprimiste antes de cambiar el tamaño, o la guardas como PNG cuando una foto es mejor como JPEG.

¿Puedo usarlos para el trabajo del cliente? Sí, sin atribución ni restricción comercial.

¿Funcionan en un teléfono? Sí, aunque cambiar el tamaño y comprimir fotos grandes en un teléfono depende de la memoria de su dispositivo y no de un servidor.

Cambie el tamaño antes de comprimir, verifique el contraste antes de discutir sobre el color, mantenga las sombras sutiles y nunca olvide el favicon. De todos modos, eso es la mayor parte de lo que una suite de diseño estaba haciendo por usted.