cuántos píxeles por pulgada son los mejores para las imágenes web? Disipe los conceptos erróneos comunes sobre la resolución de imágenes para la web con esta guía de .

«pero espera,» te escuchamos burlarse, » ¿por qué la resolución de la imagen no importa para la web? ¿Se supone que debo publicar fotos irregulares y borrosas en mi sitio web profesional y llamarlo un día?»

No tan rápido!, La calidad de imagen para fotos, gráficos e iconos en línea es esencial para proporcionar una experiencia de usuario satisfactoria a cualquier persona que visite su sitio web. Sin embargo, la resolución de imagen es un término que tiene más significado en impresión que en línea. Profundicemos en los detalles de la resolución de la imagen y determinemos qué es realmente importante para las imágenes vívidas en la web.

¿Qué es la resolución de imagen?

un término sobrante de la industria de la impresión, la resolución de imagen es la densidad de los puntos o píxeles que componen la imagen. La resolución de imagen es, en otras palabras, la cantidad de información visual que contiene una imagen. En este contexto, tiene mucho sentido que desee que sus imágenes tengan la mayor resolución posible, para que aparezcan nítidas, nítidas y vibrantes.

medimos la resolución de la imagen en DPI o PPI. En la industria de la impresión, la resolución de la imagen se mide en puntos por pulgada, o DPI., Traducido a digital, la resolución de la imagen se mide en píxeles por pulgada, o PPI. A menudo verás que estos Términos se usan indistintamente, pero DPI está reservado para impresión mientras que PPI se usa para imágenes digitales. Una imagen con un PPI más alto tiende a ser de mayor calidad debido a su densidad de píxeles.

pero, si ppi aparentemente tiene una conexión con la calidad, ¿por qué nosotros, el equipo, insistimos en que la resolución de imágenes en línea no es un gran problema? Vamos a desviarnos rápidamente al pasado largamente olvidado – la década de 1980-y aplicar lo que aprendimos al estado actual de la calidad de imagen.,

resolución de Imagen web estándar

históricamente, los diseñadores web consideraron 72 PPI la definición «estándar» para las imágenes destinadas a la web. ¿La razón? Es posible que escuche que la mayoría de las pantallas se ajustan automáticamente a 72 píxeles por pulgada. Por lo tanto, en esta resolución, la imagen es tan detallada como puede obtener. Pero la historia completa es más complicada.

Cuando Apple lanzó sus primeros ordenadores Macintosh en los años 80, se pegaron a una pantalla de nueve pulgadas con una resolución de imagen de 72 PPI., Esta decisión fue práctica: sus impresoras ImageWriter imprimían imágenes a 144 DPI, y esta relación 2:1 hacía que las imágenes escalables fueran sencillas y sencillas.

La tecnología de pantalla ha avanzado rápidamente en los treinta y seis años desde que se lanzó el Macintosh, y ahora pocos ordenadores tienen una resolución de pantalla de 72 PPI. Al exportar imágenes desde Photoshop y otro software de edición de imágenes, puede establecer automáticamente la resolución de la imagen en 72 PPI, después de años de refuerzo. Sin embargo, las pantallas varían drásticamente en resolución.

Si ese es el caso, no hay un estándar?, ¿Cómo nos aseguramos de que nuestras imágenes se muestren maravillosamente en línea, en todos los dispositivos?

¿Qué afecta a la visualización de imágenes en la Web?

en términos de resolución de imagen para la web, es mejor pensar estrictamente en dimensiones de píxel y tamaño de archivo.

• dimensiones en píxeles: se refiere a cuántos píxeles constituyen la imagen, en longitud y anchura. Por ejemplo, una imagen cuadrada de medición 360×360 píxeles tiene 360 píxeles en cada fila y 360 píxeles en cada columna., Si la pantalla de su computadora tiene una resolución de 72 PPI, esta imagen medirá cinco pulgadas en cada lado cuando se muestre a tamaño completo en su monitor. ¡Esa es una imagen bastante grande!

cuanto más grandes sean las dimensiones de su imagen, más profesional se verá su imagen. Si las dimensiones de una fotografía son 2000×1500 píxeles, la imagen se verá genial como un banner o como una foto pequeña en el lado de su sitio web., Sin embargo, si usas una imagen que mide 200×150 píxeles, solo se verá profesional en su tamaño nativo más pequeño. Soplar esta imagen para usarla como Imagen de héroe dará como resultado un aspecto granulado y descuidado que nadie que visite su sitio web apreciará.

• Tamaño del archivo – la calidad de la imagen aumentará a medida que el tamaño del archivo se haga más grande y la cantidad de compresión de la imagen esté sujeta a disminuciones. El tamaño de su archivo de imagen es simplemente el número de bytes que la imagen ocupa en su computadora o sitio web., Las dimensiones de su imagen determinarán el tamaño del archivo, pero el tipo de archivo que utilice para sus imágenes también será un factor significativo. Para decidir entre JPEG, PNGs o incluso GIF, lea nuestras recomendaciones para los mejores formatos de imagen para la web.

al decidir qué tipo de archivo usar y el nivel de calidad de sus imágenes, tenga en cuenta que la velocidad de la página disminuye a medida que aumenta el tamaño total del archivo., Desea elegir la calidad de imagen que se vea mejor, manteniendo cada archivo de imagen pequeño y manejable. Cuando tu página es lenta y está llena de fallos, la experiencia del Usuario se ve afectada. El cincuenta y tres por ciento de los usuarios móviles abandonan las páginas web que tardan más de tres segundos en cargarse. Aumentando el tamaño del archivo puede resultar en una mejor imagen, pero podría afectar negativamente el rendimiento del sitio.

cuando la resolución de la imagen importa

la resolución de la imagen puede no ser relevante en la mayoría de las aplicaciones digitales, pero en la impresión, la resolución de la imagen es el rey., El DPI afectará drásticamente cómo se imprime una imagen y es de primordial importancia al exportar imágenes desde el software de diseño y edición, si no está cargando las fotos en línea.

en la impresión profesional, sus fotos deben tener una resolución de imagen de al menos 300 DPI. El ojo humano generalmente no puede diferenciar imágenes por encima de 200 DPI, pero es una práctica estándar usar 300 DPI y por encima para una claridad óptima. Compruebe siempre la configuración de su impresora antes de elegir una resolución de imagen para imprimir., Muchas impresoras no pueden manejar resoluciones superiores a 300 DPI, y el uso de una configuración de este tipo puede crear extraños artefactos visuales.

para el contexto: si desea imprimir una imagen de cuatro pulgadas por seis pulgadas a 300 ppp, debe medir 1200×1800 píxeles antes de imprimir. Cuando se toman fotos con una cámara, los fotógrafos deben disparar a una resolución más alta de lo que necesitarán para imprimir. Luego pueden afilar y reducir las imágenes en el software de edición de fotos.

al editar imágenes para imprimir, es mejor usar formatos de archivo TIFF o EPS., Estos tipos de archivos no tienen pérdidas, lo que significa que no comprimirá ni comprometerá la imagen al guardar y volver a abrir. Sin embargo, estos archivos son grandes y engorrosos.

imagen de portada a través de Who is Danny. Imagen de pantalla vía Galyna Andrushko.,

Descubra más consejos sobre cómo diseñar su sitio web con estos artículos:

• Las mejores imágenes listas para el sitio web para lanzar su presencia en línea
• Cómo diseñar un sitio web: 10 reglas de oro para principiantes
• consejos simples de diseño de sitios web que cualquiera puede seguir
• Cómo cambiar el tamaño de las imágenes para la Web sin perder calidad
• Una guía práctica para el diseño Visual del sitio web