Tamaño de imagen principal y optimización [duplicado]

Tamaño: ¿
Qué tamaño sería bueno para la imagen Hero en píxeles de longitud y peso tanto para la computadora portátil como para la computadora de escritorio?

Las imágenes de escritorio son más rectangulares y las imágenes cuadradas de dispositivos móviles, esto debe tenerse en cuenta. Digamos que el escritorio está diseñado con 1688 px de ancho o 1366 px de ancho, o 1920 px de ancho; algunos dicen que el tamaño más grande es necesario debido al gran monitor, ¿cuál es común, mejor?

¿Cuál sería una buena longitud?
No quiero que tenga una longitud tan grande, de modo que sea difícil ver lo que hay debajo del banner o requiera mucho desplazamiento. Tal vez sea bueno dejar algo que se muestre justo debajo del banner. ¿Cuál sería la proporción de la imagen del héroe que funcionaría?

Optimizar para el tiempo de carga
Eventualmente, será un gif o algún archivo que permita algún movimiento.

¿Alguna idea sobre cómo un codificador puede trabajar con el archivo para que se cargue más rápido?

¿Hay alguna forma de que un codificador especifique que la imagen sea estática a veces, según el dispositivo? sobre otros temas relevantes?

Es posible que desee que la imagen del banner sea estática en los teléfonos móviles, ya que el tiempo de carga debe ser rápido para que el movimiento sea visible en la versión de escritorio, ¿hay un código para hacer esto o cómo?

@Scott: creo que hizo un buen trabajo al editar esta pregunta bastante difícil de manejar, aunque todavía hay demasiadas cosas en ella.
No estoy en desacuerdo, @BillyKerr y voté para cerrar (la pregunta original) por esa misma razón.
@Scott: sí, el OP hubiera sido mejor editar la pregunta original y pedir que se reabriera en lugar de simplemente publicarla nuevamente.

Respuestas (1)

Esas son muchas preguntas, demasiadas de hecho, pero de todos modos daré un breve resumen de mis pensamientos.

  1. Diséñalo en el tamaño más grande que creas que necesitarás. Quizás 1920px de ancho sería un buen lugar para comenzar. Las imágenes de trama se pueden reducir fácilmente en tamaño, pero no se ven bien cuando se amplían. Comience con un tamaño más grande, y su desarrollador web debería poder tomar esa imagen y cambiar su tamaño para diferentes dispositivos y optimizar los tamaños de archivo para la web. Sin embargo, tenga en cuenta que el detalle de las líneas finas puede perderse en tamaños más pequeños.

  2. No hay un tamaño "mejor". "Mejor" es muy subjetivo. En estos días, el tamaño más común es probablemente un teléfono móvil, pero eso es irrelevante, ya que estoy seguro de que probablemente querrá que el sitio se vea bien en cualquier dispositivo en el que se vea.

  3. La relación de aspecto dependerá de la cantidad de pantalla que desee llenar. Sin ver el diseño, no puedo ver cómo se puede responder esto realmente con gran detalle. Tendrás que tomar tu propia decisión. Tal vez haga algunos bocetos o cree algunas maquetas aproximadas para ayudarlo a decidir.

  4. Los GIF no son adecuados para imágenes animadas muy grandes. El formato fue diseñado para pequeñas animaciones web. Tal vez un bucle de video sería más adecuado; pregúntele a su desarrollador web sobre cómo implementarlo.

  5. Las preguntas sobre codificación/desarrollo web generalmente están fuera de tema aquí. Sin embargo, existen técnicas que involucran la detección del tamaño/tipo de dispositivo que se está utilizando para que las imágenes del tamaño adecuado se puedan mostrar al navegador. Este es un trabajo para su desarrollador web.