Una opinión sobre “width” y “height” en las imágenes
Publicado el Martes 12 de Febrero del 2008 @ 7:05 por Armonth.
El problema de afirmar de forma tajante y sin lugar a dudas es que se pueden crear ideas equivocadas. Una de ellas es muy conocida en el mundillo web:
“No hay que usar tablas en el diseño”
Sin embargo eso se refiere únicamente a no utilizar tablas para maquetar la web. Lo que forma parte del diseño y su maquetación debe ser tarea del CSS, el contenido va para (x)HTML.
De la idea original se ha creada una que no es correcta y es que no se deben usar las tablas “para nada”. Las tablas son para tabular datos y si tenemos que hacer por ejemplo una comparativa lo más fácil es una tabla. Es absurdo crear un sistema de “tablas” de mediante cientos de “div’s”, clases y MUCHO código XHTML/CSS.
En el caso de las imágenes estoy viendo cada día más una idea “equivocada” de este tipo. Es el caso de no utilizar height="" o width="" ya que son atributos de representación que deberían ir al CSS.
Esto último es totalmente cierto. No se “deben” utilizar. Todavía hay cientos de sitios que tienen pendiente eliminar cientos de etiquetas de representación como <font> y atributos como size="".
Pero las imágenes dentro del contenido (las que no forman parte del diseño) ¿deben evitar estos atributos?. De primeras lo correcto sería añadir un identificador o clase a cada imagen y definir sus proporciones vía CSS pero a menos que queramos tener hojas de estilo de megabytes de tamaño y un cacao del copón no compensa mucho.
Viendo la situación creo que con las imágenes se puede especificar sin problemas el tamaño sin recurrir al CSS. En un sitio como SigT el utilizar o no los atributos no es problema pero ¿y en los artículos extensos con muchas imágenes?.
Ahí se hace especialmente molesto leer un artículo y que el texto pegue “saltos” a medida que se descargan las imágenes. Es en ese escenario cuando se hace necesario plantearse cosas como ésta.
“Todo por la experiencia del usuario, oye”.
Y sin embargo con este tema tan superficial ya he tenido varias discusiones con dos “fanáticos de los estándares” de los que “si no valida no es bueno” (como si el validador fuera perfecto). Pero lo mejor, y para más INRI, es que al utilizar estos atributos sigue validando…
17 Comentarios (feed)
-
Alvaro nos comenta:
Estoy totalmente de acuerdo con lo que comentas. Aunque en la teoría estas propiedades deberían ir especificadas en el CSS, esto nos llevaría a CSS enormes e inmanejables.
Creo que en este caso la experiencia del usuario resulta más satisfactoria si la web carga rápido, a si carga lento pero con CSS.
P.D.: YO soy uno de esos fanáticos de los estándares, pero entiendo que en casos como este, hay que hacer excepciones, y más si sigue validando :p
-
ChusZ nos comenta:
Precisamente no hace mucho decidí que sí que usaría esos atributos, pues el efecto de carga+desplazamiento del texto es muy molesto.
De todas formas, siguen siendo atributos válidos, así que no hay que extrañarse de que validen, ¿no? ._. -
Mercenario nos comenta:
Sobre el si establecer o no, depende del uso y enfoque que se le quieras dar, en mi caso se presentan casos en los que tienes que establecerlos en pro de mejorar la presentación aunque se deforme la imagen.
La mejor forma de tener que evitar establecer tamaños es procesar la imagen antes de subirla, así por ejemplo, me gusta tenerlas almacenadas en tamaño máximo (de ancho o alto, depende) de 45, 110, 400 y tamaño completo, luego solo queda jugar con que tamaño quieres usar para cada caso.
-
Armonth nos comenta:
Por supuesto ChusZ, eso es lo más irónico de todo.
Alvaro tú en el momento en que entiendes el caso NO eres un fanático como los del ejemplo: eso son casos de “no querer bajarse del burro, ande o no ande”. Yo también soy de los que les hierve la sangre ante las chapuzas pero no muerdo a la yugular :D
-
Samuel nos comenta:
No sabía que hubiese gente que diga que no hay que usar los atributos de anchura y altura de img…
La verdad, decir que hay que darle los atributos de tamaño a una imagen a través de CSS me parece una solemne tontería, encima doble trabajo si cambiamos la imagen por otra distinta, tenemos que cambiar el (x)html y el CSS, y precisamente el CSS se inventó para ahorrarnos trabajo.
Si las etiquetas de marcado (x)html tienen atributos es para algo, y si el código valida es porque estamos siguiendo el estándar. Así que no sé donde ven el problema esos “fanáticos” del CSS.
Si todo hubiera que hacerlo con CSS haría tiempo que habrían quitado los atributos al marcado (x)html.
Resumiendo, estoy contigo Armonth :)
-
glucko nos comenta:
Si la imagen no forma parte del diseño base yo estoy de acuerdo con especificar las medidas fuera del css, y además facilita el renderizado en el navegador de toda la página. Estamos llegando a un punto en que los css son demasiado grandes.
-
brwan nos comenta:
Es una salvajada poner todos los width y height a los img, sobretodo si es una web que tenga muchas imágenes de contenido, pero también es una tontería hacerlo por CSS.
¿Que sentido tiene tratarlas individualmente?Si el sitio está bien diseñado, pensado y planificado, una de dos:
editarán las imágenes para que se adapten al tamaño sin tener que poner width o height en el img ni en las hojas de estilo, o, como mucho, definirán unos cuantos casos de uso en las hojas de estilo para que se adapten a la retícula del sitio. Casos de uso que no suelen pasar de 5. 5 líneas en las CSS.El problema no creo que sea ser fánatico de los estándares o de la usabilidad, sinó ser un poco práctico y utilizar bien los recursos.
Si vas a subir imágenes sin controlar su tamaño y te rompen el diseño no es culpa de los que hacen las especificaciones, eso seguro.Un saludo
-
Dondado nos comenta:
En las pantallas de los móviles se agradece mucho más que las imágenes traigan los atributos de ancho y alto por delante
-
coyr nos comenta:
@brwan estoy deacuerdo con lo que has dicho, nada más claro.
Además… en los casos que los usuarios pueden subir imagenes, un código que controle su peso y edite su tamaño, soluciona este factor externo. Para que se pueda insertar imagenes sin height y width,
Es que en realidad es más práctico y flexible. Si una imagen mide 1000px por 1000px, y la necesitas de ese tamaño, para que escribir el width y el height? Si por “x” o “y” motivo necesitas ajustar esa imagen a 500px por 500px solo remplazas la imagen a la calidad necesaria y no necesitas editar de nuevo el html. En un caso contrario si tienes una imagen de 10px por 10px, por el amor al FSM no utilices width y heght para expandirla, sube la imagen al tamaño necesario…
-
Armonth nos comenta:
brwan, coyr: estáis asumiendo que el problema es de “control” de las imágenes cuando de lo que se comenta es un caso molesto que ocurre cuando las imágenes no llevan el tamaño especificado y hacen “saltar” el texto cada vez que se carga una imagen…
-
total 13 nos comenta:
A mi me ha sorprendido el propio hecho de que sea una cuestión a debate ya que como bien se ha dicho el width y el height son necesarios para “reservar” su espacio mientras se carga la página y evitar saltos. Y el uso para cambiar el tamaño real ya sea en un lado (html) u otro (css) tampoco debería ni plantearse, porque siempre queda mal, mejor editar la imagen previamente, o para proyectos más gordos hacer las gestiones desde el servidor, usando cosas como la libreria GD en PHP ¿no?
-
sagudino nos comenta:
Mientras los atributos sean válidos y la imágen no forme parte del diseño, pienso que hay que seguir utilizándolos. Cuando estén “deprecated” será otro tema.
Además, creo que es la propia w3c la que dice que mientras existan etiquetas (y esto para mi es extensible a atributos) con un fin, utilízalos, y no te inventes cosas nuevas para ese fin o hagas mal uso de las que existen.
-
Armonth nos comenta:
A mi me ha sorprendido el propio hecho de que sea una cuestión a debate
Intenta enfocarlo de esta manera: es mejor debatir sobre temas algo banales como éste que discutir sobre gilipolleces totales y sin lugar a dudas de las que se dicen día sí, día también, unos políticos a otros…
-
total 13 nos comenta:
Inapelable argumento y más aún en las fechas en las que nos encontramos, donde la cosa adquiere tintes de áuténtica pesadilla. A todo esto ¿usan el height y el width las webs de los políticos? XD
-
mini-d nos comenta:
La gente dice muchas cosas sin realmente comprender las especificaciones. Aquí no hay nada misterioso. Es simple, abusan de un movimiento o un ideal para decir sandeces. Muchas veces están acertados, pero los movimientos, cuando se tornan extremistas, muchas veces, hacen que los seguidores se cieguen.
-
aNieto2k nos comenta:
Por norma los seres humanos somos vagos, cómodos, despreocupadas, … como queramos llamarlos, por que la mejor forma es hacer un contenido 100% adaptado a lo que queremos mostrar.
Lo idea sería tener una imagen de 400×500 y usar los atributos height y width, no solo para delimitar el tamaño de la imagen (que no sería el caso) sinó para darle un valor semántico a la imagen que estamos mostrando. No solo deberíamos de pensar en alt, longtext,… el tamaño de la imagen tambien puede ser un valor semántico muy util para el futuro.
El problema es que el hacer esto, te implica tener que editar las imagenes y trabajar “un poco más”.
De esta forma, nos ahorramos, saltos del texto mientras van cargando las imagenes, problemas de que no cargue el CSS (en caso de tenerlo en el CSS), y tampoco estamos cargando una imagen de un tamaño mayor al necesitado.
-
Joan nos comenta:
Al 100% con mi amigo Andrés :D
Cierto es que por el simple motivo de que el navegador o el usuario no utilizara las CSS la imagen debería tener un width y un height, además, así la carga es mas “real”, y la página no pega esos molestos botes.
Aunque luego desde las CSS “afines” más al detalle.
