image - page - ¿Es mejor usar imágenes o CSS para mantener el rendimiento de una página web o aplicación lo más alto posible?
img vs background image (3)
El diseñador creativo de mi proyecto y yo hemos tenido algunos desacuerdos amistosos en cuanto a si es mejor usar partes de su comp o confiar en el motor de renderizado del navegador para crear ciertos aspectos de la experiencia del usuario.
Un ejemplo específico es con una "barra" horizontal que ejecuta todo el ancho del widget. Creó un gradiente realmente elegante que involucra varias paradas de diferentes colores y opacidades, y siente que el tamaño pequeño de la imagen es preferible o al menos comparable a las líneas adicionales de código CSS necesarias para generar el gradiente de forma nativa.
Ya estamos usando la técnica CSS sprite para reducir el número de viajes de retorno desde el servidor, por lo que no es un problema para nosotros. En este momento, es simplemente el pro y con el uso de imágenes cortadas en lugar de renderizar con CSS y HTML.
¿Existe una regla definitiva sobre qué tan grande debe ser una imagen para ser la opción "peor" de las dos?
ACTUALIZACIÓN: Como algunas personas han mencionado la complejidad del gradiente como un factor, lo presentaré aquí:
-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));
¡Muy complejo! ;-)
¡Mídelo! Creo que no es la respuesta que le guste, pero realmente depende de lo complejo que será el CSS y, por lo tanto, del tiempo que demore en procesarse.
En la mayoría de los casos, será el tiempo de procesamiento (versión CSS) frente a los gastos generales de solicitud y el tiempo de transmisión (versión de imagen). Lo más probable es que veas los grandes números aquí. Dado que ya está utilizando sprites de imagen, está reduciendo al mínimo la sobrecarga de solicitud.
La compatibilidad con el navegador también debería ser algo que debería tener en cuenta. Aquí las imágenes a menudo ganarán sobre CSS cuando se trata de gradientes y algo así.
Un sitio CSS3 muy complejo para demostrar lo que quiero decir: http://lea.verou.me/css3patterns/ Este es un caso de estudio MUY bueno, pero increíblemente lento. Se demora al cargar. Se retrasa aún más cuando se desplaza. Y estoy seguro de que es mucho más lento que una solución que usa un sprite de imagen para todo eso.
¡No me trates mal! Me encanta CSS, pero las imágenes también están bien. A veces incluso más fino.
Resumen
¡Mídelo! Cuando no tenga tiempo de medir, calcule cuán complejo sería el CSS. Cuando tiende a complicarse, entonces usa imágenes. Cuando tengas problemas de compatibilidad, usa imágenes.
Creo que CSS es más reutilizable. Imagina que tienes que repetir la misma imagen una y otra vez en el mismo documento web. Un montón de solicitudes HTTP allí. Pero esa es mi opinión, corríjame si me equivoco. Creo que CSS es mucho más expresivo y con más estilo. Sin embargo, hay cosas que debes vigilar. Cosas como el prefijo específico del navegador eliminan páginas con demasiado CSS.
En general, si se puede hacer con CSS, definitivamente omita la imagen. Si por ninguna otra razón es más fácil de mantener.
SIN EMBARGO, es probable que haya un gradiente complejo donde cederé y arrojaré una imagen. Habiendo implementado recientemente algunos gradientes CSS, es un poco complicado ahora.
En última instancia, Fabian Barney tiene la respuesta correcta. Si es un problema de rendimiento, necesitas medir las cosas. En el gran esquema de las cosas, esto es probablemente bajo en los problemas de rendimiento a los que hay que detenerse.