¿Cuánto esfuerzo debo poner para optimizar (recortar) imágenes para la web?

A menudo recibo diseños de nuestros artistas que contienen imágenes grandes y complicadas que se pueden convertir en un color de fondo, algunos mosaicos e imágenes más pequeñas superpuestas. El problema es que hacer esto a menudo toma bastante tiempo y agrega complejidad a la estructura html. ¿Cómo debo decidir si vale la pena hacerlo?

Por ejemplo, lo siguiente es un botón / mouseover:

Botón Ratón sobre

Todos los botones de un atlas ocupan la friolera de 232 kb*.

Puedo reducir esto a 40kb usando un color de fondo y superponiendo lo siguiente:

  • gradiente superior (horizontal)
  • gradiente inferior (vertical)
  • texto
  • foto
  • contorno
  • brillo para pasar el mouse

Pero luego, en lugar de 1 elemento html, el botón ocuparía varios. Además, tendría que pasar varias horas más para cortar todo y hacer el html/css.

Entonces, como nuevo desarrollador web, ¿existen pautas sobre cuándo dividir las imágenes en lugar de usar todo? ¿Basado en el tamaño/la diferencia, el tiempo empleado y la complejidad DOM adicional añadida?

En este caso específico, al menos extraer el brillo parece una decisión obvia, ya que solo agrega un elemento y reduce a la mitad el número de imágenes.

*Soy bastante nuevo en el desarrollo web de la programación no web y puede que esté equivocado, pero más de 200 kb parecen enormes solo para algunos de los recursos artísticos.

Respuestas (3)

Le pediría al diseñador que trabaje con usted para repensar el botón en términos de código en lugar de gráficos exportables. Merece absolutamente la pena el esfuerzo de hacer que los gráficos de los botones sean más claros (en tamaño). Para su punto, hay mucho más que se cargará en la página: el resto de los gráficos, CSS, HTML, javascript y quién sabe qué más. ¿Por qué desperdiciar espacio debido a un proceso de diseño descuidado?

Los degradados y el color de fondo se pueden hacer en CSS, lo que hace que el botón sea más ligero al cargar y más fácil de actualizar. También significa que tiene un estilo que se puede aplicar (con los ajustes necesarios) en una variedad de botones sin problemas de coherencia.

Como máximo tienes dos gráficos:

  1. El tipo y el arte de línea blanca (con una superposición de color CSS en este último antes del desplazamiento)
  2. El bote de basura fotográfico

Podría reducir eso usando texto en vivo para las etiquetas.

Sí, me refiero a dividir las cosas css'able también, no solo usar imágenes. Entonces, con respecto a la complejidad de dom, está diciendo que vale la pena reemplazar una etiqueta <img> con algo como esto jsfiddle.net/NrEXK , ¿verdad? (marcado solo para mostrar la complejidad del ejemplo)
También tenga en cuenta que Fireworks creará el CSS por usted y lo exportará a una hoja de estilo separada o lo copiará al portapapeles.
@carpat Lo siento, un poco lento volver a este. Su HTML me parece demasiado complejo, pero a primera vista parece que aún sería más rápido que lo que envió su diseñador. Lo recortaría hasta el basurero y el arte lineal en un gráfico. Luego, como señaló otro cartel, solo use pseudoclases para manejar el resto. Debería poder lograr el efecto con un solo gradiente (múltiples paradas) que cambia al pasar el mouse. El tipo debe hacerse con webfonts.
Solo como una nota al margen: los degradados basados ​​​​en CSS y las sombras de cuadro tardan bastante tiempo (en milisegundos :) en renderizarse. Es mejor usarlos con moderación, nunca, y/o promocionar los elementos en cuestión a la capa GPU.
Los degradados pueden ser lentos, pero por lo general no son tan lentos como la latencia del servidor cuando se llaman imágenes. Simplemente los limitaría porque rara vez agregan valor (^_-)

No estoy seguro de entender el problema.

... 23.6k usando configuraciones jpg "altas".

imagen

y usando puertas corredizas CSS......

jsFiddle demo

23k es ciertamente aceptable. Probablemente podría reducirse aún más.

Me doy cuenta de que 10 botones de este tamaño pueden sumar los 200k que mencionas. Pero sin conocer el diseño completo y el propósito del sitio, es difícil determinar si eso es aceptable. Por ejemplo, las descargas de imágenes más grandes son más aceptables en sitios de comercio electrónico o de entretenimiento.

Las descargas de imágenes más grandes en mis proyectos ecomm son menos aceptables que cualquier sitio de contenido que haya abordado. El problema es el tráfico máximo: desea que esos servidores funcionen felizmente aceptando pedidos, no sirviendo imágenes. Por supuesto, también desea ver cuántas veces está hablando con el servidor para solicitar imágenes individuales. Ahí es donde los íconos incrustados en base 64 realmente pueden funcionar en su CSS.
cabe señalar que la codificación base-64 es aproximadamente 1,33 veces mayor que los datos binarios originales. (Tiene razón acerca de que muchas solicitudes del servidor para archivos pequeños son más lentas que un archivo grande debido a la sobrecarga de la solicitud).
Los sprites de CSS ayudan a eliminar el problema de muchas solicitudes http pequeñas.

Creo que el código de ejemplo en el jsfiddle anterior es demasiado complejo en el HTML. Gran parte de los efectos que está buscando se pueden lograr con CSS basado en clases en un elemento. Este enfoque le permitiría usar un elemento (semántico) y darle el estilo apropiado...

por lo que puedo ver, podría usar uno o quizás 2 elementos con css y pseudo elementos css agregados para lograr casi exactamente lo mismo.

vea el ejemplo que creé rápidamente: http://codepen.io/peterSalvato/pen/kDvra

esto es lo más cerca que puedo estar en el trabajo sin un editor de imágenes para crear imágenes transparentes para colocar en el diseño. una vez que tenga imágenes transparentes para agregar al botón en lugar del texto (las colocaría en css:pseudoElements donde dice 'contenido'... aquí hay algunas lecturas sobre pseudoelementos: http://www.w3schools .com/css/css_pseudo_elements.asp

un beneficio adicional de este enfoque es que permite que el texto de su botón sea texto HTML. Esto es bueno tanto para el SEO como para la accesibilidad (lectores de pantalla y demás)...

espero que esto ayude.

¿Cuánto esfuerzo debo poner para optimizar (recortar) imágenes para la web?
RespuestasAquíPolítica de privacidad1y, 0v