Este es un problema de diseño común. Especifique ancho = 100% en su código.
Lo que hago es comenzar con mi pantalla panorámica conectada a mi escritorio. Para mí eso es 1920 x 1080. Esa será su dimensión máxima (no la resolución), pero desea reducirla tanto como sea posible para obtener tamaños de archivo más pequeños. Establezca su resolución en 72 ppp (300 ppp y superior es solo para imprimir no en la pantalla). Guarde la imagen en alrededor del 85% (cuando use jpgs en GIMP) y vea cuál es su tamaño de archivo.
Dependiendo de la imagen en sí, el tamaño del archivo variará. Si puede reducir el tamaño del archivo a 100K (una imagen que es todo un color sólido podría hacer esto), entonces ya está.
- ¿Por qué es tan difícil HTML?
- ¿Por qué Facebook convierte su código PHP a C ++?
- ¿Cuál es el mejor complemento o servicio de encuestas disponible para WordPress?
- ¿Qué está impidiendo que los programadores de Javascript pasen a Typecript dadas las mejoras realizadas?
- ¿Qué información debo ingresar al hacer un sitio web y luego venderlo?
De lo contrario, comienza a jugar trucos. ¿Puedes cambiar tu imagen a escala de grises? ¿Puedes alterar la imagen para reducir el tamaño? De lo contrario, reduzca el tamaño de la imagen de todos modos, escale a 1280 x 720 o algo así. Lo que sucederá es que para aquellas pocas personas que realmente usan monitores de pantalla ancha, lo verán un poco borroso. Olvídate de ellos. (Si realmente necesita una imagen de alta resolución de esa calidad, para un estudio científico o para una impresión de alta calidad, debe tener un enlace.
Entonces, ahora tiene su imagen con un ancho no mayor de 1280 y cualquier altura, con una compresión de 72 ppp y 85% jpg. Esa es la imagen que puede usar para sus navegadores de escritorio. Pero ahora considere los usuarios móviles.
En su CSS use consultas de medios y si está tratando con un teléfono celular, entonces usa una imagen completamente diferente, un tamaño específicamente para usuarios móviles. Busque tamaños de pantalla comunes de teléfonos móviles. Esto significa que su imagen debe ser una imagen de fondo para poder cambiarla cambiando el CSS. También podría considerar usar una plantilla móvil primero como Bootstrap, pero aún necesitará tener dos imágenes y especificar el tamaño en el que realizarán la transición.
Podría tener muchos tamaños de imagen diferentes para diferentes pantallas, pero eso es demasiado trabajo y no lo recomiendo. Quédate con computadoras de escritorio y dispositivos móviles. Definitivamente debe tener la imagen móvil, su sitio será demasiado lento sin ella.
De hecho, probablemente debería reconsiderar su diseño por completo, las imágenes de pantalla completa fueron populares por un corto tiempo cuando las computadoras portátiles de pantalla ancha y la conectividad de alta velocidad eran cosas geniales, pero pasaron de moda con la tecnología móvil (a menos que estén dimensionadas para dispositivos móviles).
