Compresión y optimización de archivos JPEG para la World Wide Web

Soy diseñador gráfico y trabajo con múltiples imágenes y formatos de imagen todos los días. Una de las cosas que hago implica trabajar con archivos de imagen grandes y editarlos. Uno de los formatos de archivo más utilizados es JPEG. Ahora, quiero aprender más sobre cómo optimizar y comprimir JPEG Especialmente para la web. ¿Me puedes ayudar con eso?

~ Anónimo diseñador gráfico

Parte I: IntroducciónParte II: evite que ahorre en un ciento por ciento (100%)Parte III: Opciones para la compresiónParte IV: Una variedad de tipos de medios para la webParte V: Herramienta para comprimir imágenes JPEGParte VI: Conclusión

Parte I: Introducción

La compresión de imágenes es un concepto muy popular hoy en día. Se usa en casi todos los aspectos de la vida, ya que las imágenes han sido un papel vital en los negocios, el trabajo e incluso en nuestras vidas personales. La compresión de la imagen se puede realizar en diferentes formatos de archivo, como GIF, JPEG y PNG.

La diferencia entre estos formatos de archivo de imagen radica en cómo se realiza la compresión y se muestra en la pantalla. Hay muchas guías que te dicen cómo publicar grandes medios en Internet. Sin embargo, muchos diseñadores aún no comprenden los fundamentos cuando se trata de imágenes y medios en general.

En este artículo, le informaremos y le daremos ideas cuando se trata de implementar correctamente la compresión de archivos JPEG. Debería optimizar y comprimir sus imágenes para acelerar los tiempos de carga de sus páginas web mientras mantiene un cierto nivel de calidad para sus imágenes.

El truco aquí es encontrar el equilibrio entre el tamaño del archivo y su representación en la pantalla. No hay una solución real que sea perfecta. Se necesita bastante práctica para acostumbrarse. Pero una vez que sepas más sobre compresión de archivos JPEG, el desarrollo de sitios web será más fácil a largo plazo.

Parte II: evite que ahorre en un ciento por ciento (100%)

Evite guardar sus imágenes JPEG con una calidad del cien por cien (100%). Por supuesto, esto no resultará en una imagen que está optimizada. Cuanto mayor sea la calidad de la imagen, mayor será el tamaño del archivo.

Comprobar algo. Si intenta guardar la imagen en calidad 90% a 95%, notará que el tamaño del archivo se reducirá significativamente. Hay ocasiones en las que tiene que guardar sus imágenes con una calidad inferior a 90%.

Si usas Photoshop, estás de suerte. Si intenta revisar el cuadro de diálogo "Guardar para Web", puede ver que Photoshop realmente le permite seleccionar entre varios valores preestablecidos diferentes. Los valores posibles para JPEG se pueden ver a continuación:

* La calidad máxima está en 100%.

* Muy alta calidad está en 80%.

* Alta calidad está en 60%.

* La calidad media está en 30%.

* Finalmente, la calidad baja está en 10%.

Adobe Photoshop incluso considera 60% como una imagen con alta calidad. Para los desarrolladores web, es mejor atenerse a aproximadamente 50% hacia 70%. Este es un rango seguro que puede responder al desarrollar sus sitios web.

Entonces, ¿cuál es el valor real en el que realmente puede indicar que la calidad de la imagen es realmente baja? Bueno, el valor que realmente usa para la optimización depende del proyecto o imagen real en el que esté trabajando.

Debe tener en cuenta los diferentes tipos de gráficos que resultarán en los tamaños de archivo más grandes. Estas imágenes necesitarán la mayor compresión posible. Sugerimos que cualquier cosa por debajo de 30% resultaría en una imagen de baja calidad. Otros diseñadores y desarrolladores solo establecerían su límite en 50% porque realmente no quieren comprometer la calidad.

¿Pero cuál es el mejor consejo? Bueno, realmente tienes que probar la mejor configuración para ti. Pruebe un par de niveles de optimización o compresión y verifique cuáles se ven mejor en términos de calidad y en relación con el tamaño del archivo. Se sorprenderá al descubrir que algunos ajustes aquí y allá pueden ayudarlo a optimizar sus archivos JPEG a su tasa de compresión máxima sin la necesidad de comprometer su apariencia.

Parte III: Opciones para la compresión

Primero, nos gustaría que usted sepa más sobre la calidad y la compresión. Estos dos términos están correlacionados inversamente entre sí. Esto significa que si guarda una imagen JPEG en particular a una tasa de compresión de 30%, obtendrá un resultado de la calidad de 70%. Si una imagen no está comprimida, tiene una calidad 100%.

Estas son en realidad opciones que puede usar y que son una de las más básicas. Y, de hecho, debería ser más que suficiente cuando se guarda para la World Wide Web. La mayoría de los usuarios no profundizan en una variedad de personalizaciones. El submuestreo mete a las personas en problemas que son mucho más complicados donde, por ejemplo, estás en el proceso de conversión del de imágenes RGB al de YCbCr (Chroma Red, Chroma Blue y Luminance).

El ajuste de brillo se llama la luminancia. Durante la compresión de imágenes JPEG, la luminancia siempre se establece dentro del valor que posiblemente sea el más alto. El valor de brillo se coloca dentro de un canal separado. Y debido a esto, los valores individuales de color (por ejemplo, Azul y Rojo) se vuelven más fáciles de optimizar. Esto se conoce como el proceso de submuestreo de croma. A los diseñadores que son muy meticulosos les encantaría saber más sobre este tipo de algoritmo de compresión.

Sin embargo, es posible que no lo sepa, pero Adobe Photoshop generalmente no utiliza el submuestreo como método de compresión. Si usa Adobe Photoshop y elige Guardar para la Web, las imágenes guardadas con esta función utilizarán un submuestreo de croma que está por debajo del valor de calidad de 50%.

Parte IV: Una variedad de tipos de medios para la web

La World Wide Web es muy diversa. Está lleno de una variedad de medios de imagen. Por ejemplo, tiene los iconos, credenciales, botones, fotografías y otros tipos de archivos gráficos. Pero es posible que desee considerar esto: la comparación de la calidad de dos tipos diferentes de gráficos (por ejemplo, un botón frente a una imagen del producto) no es realmente tan significativa.

Es posible que desee probar la vinculación hacia un archivo JPEG separado que esté menos comprimido cuando se utilizan imágenes o fotografías detalladas. Después de lo cual, la configuración de miniaturas que tiene una relación de compresión relativamente más alta y un tamaño de archivo muy reducido se puede hacer dentro de su sitio.

¿Cuál es la desventaja de esto? Bueno, será necesario que le des dos conjuntos diferentes de estas imágenes para tu galería multimedia. Debe tener en cuenta todos los archivos gráficos que haya colocado en su sitio web. Después de lo cual, debe configurar qué técnicas de compresión u optimización debe implementar para cada archivo.

Es mejor para usted implementar un sistema organizado de archivos que le permita buscar fácilmente a través de los archivos. Hay un webmaster que opta por alojar sus imágenes fuera de sus servidores web, como en Picasa o Flickr.

Incluso si este es el caso, podría ser mejor para usted utilizar una herramienta de compresión para minimizar el tamaño de las imágenes. Sin embargo, la forma en que realmente muestre estas imágenes comprimidas dentro de su sitio seguirá variando. Esto es cierto en la actualidad debido al uso cada vez mayor de dispositivos móviles que ayuda a las personas a acceder a Internet desde cualquier lugar del mundo.

Parte V: Herramienta para comprimir imágenes JPEG

La herramienta de compresión de imágenes que recomendamos para comprimir imágenes es Compresor de fotos en línea gratuito de FoneDog. Dicha herramienta tiene las siguientes ventajas:

* Le permite comprimir archivos de imagen (p. Ej., JPEG o PNG) que resultarán en una reducción de tamaño sin perder gran parte de la calidad de la imagen.

* Te permite ahorrar más espacio en tu dispositivo. Por lo tanto, puede utilizar este espacio para otras fotos, videos y documentos importantes.

* Da como resultado que la imagen use menos ancho de banda, especialmente si desea usarla dentro de un sitio web. Por lo tanto, puede ahorrar una gran cantidad de ancho de banda y dar cabida a más usuarios, especialmente si el paquete de alojamiento web que tiene disponible tiene una cantidad limitada de transferencia de datos disponible.

* Da como resultado tiempos de carga más rápidos dentro de los dispositivos y para los proveedores de servicios de alojamiento web. Los usuarios de su sitio web no se aburrirán por los tiempos de carga lentos. Debido a que sus imágenes ocupan menos espacio, se cargarán más rápido y brindarán una mejor experiencia de usuario.

A continuación le indicamos cómo usar el Compresor de fotos en línea gratuito de FoneDog paso a paso:

Step 01 - Ve a la página de Photo Compressor en el sitio web de FoneDog aquí.

Paso 02 - Sube tu imagen o imágenes. Puede cargar un máximo de imágenes 20 con aproximadamente 5MB por imagen en tamaño máximo.

Paso 03 - Después de comprimir las fotos, descargue el archivo de imagen comprimido dentro de dicha plataforma.

Parte VI: Conclusión

La compresión de imágenes JPEG puede ser complicada. Esto se debe a que necesita equilibrar la calidad con la de la sustancia. A pesar de que las personas tienen una conexión rápida a Internet hoy en día, todavía es necesario reducir el tamaño de las imágenes. Esto se debe a que las personas se están volviendo cada vez más impacientes.

Hay una gran cantidad de herramientas de compresión u optimización JPEG por ahí. Una herramienta que puedes usar es Compresor de fotos en línea gratuito de FoneDog. Dicha herramienta puede ayudarlo a reducir el tamaño de sus imágenes sin comprometer gran parte de su calidad.