mostrar - tamaño de imagen html
¿Ancho/alto de la imagen como atributo o en CSS? (12)
¿Cómo manejan los clientes de correo electrónico las restricciones de img como atributos frente a los estilos en línea?
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" >
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; " >
<img src="http://imperavi.com/img/redactor-image.jpg" style="width: 120px; height: 50px;" >
Por lo tanto, las restricciones de tamaño de img no se deben establecer con estilos en línea, principalmente porque Outlook 2007/2010/2013 no las respeta.
¿Qué sucede cuando ambos atributos y estilos en línea están en uso? Algunos clientes usan uno u otro, y algunos utilizan el ancho en línea en combinación con la altura del atributo:
<img src="http://imperavi.com/img/redactor-image.jpg" width="1400" height="582" style="width: 120px; height: 50px;" >
tldr: usa atributos img para html email.
¿Cuál es la forma semántica "correcta" para especificar la altura y el ancho de la imagen? En CSS ...
width:15px;
o en línea ...
<img width="15"
?
CSS parece ser el lugar adecuado para poner información visual. Por otro lado, pocos argumentarían que la imagen "src" no debería especificarse como un atributo y que el alto / ancho parece estar relacionado con los datos de imagen binarios como lo es el "src".
(Sí, me doy cuenta desde una perspectiva técnica del usuario final que esto realmente no importa).
Creo que eso depende de CÓMO estás usando el atributo. Si diseña varias imágenes dentro de una lista o tabla para que se distribuyan correctamente, coloque el ancho / alto en su CSS para evitar la necesidad de agregar otro conjunto de etiquetas a cada imagen en la lista. Usa algo como
ul.gallery img: { width:117px; }
Por otro lado, si está insertando una imagen en algún contenido y debe tener un tamaño determinado para que el documento fluya correctamente, entonces colóquelo en el HTML . De esta forma, no tiene que ensuciar la hoja de estilos para cada imagen diferente en el html. Y de esta manera, si cambia el contenido a una imagen diferente, de eliminar la imagen todos juntos, no tiene restos de código dispersos en su CSS para recordar eliminar.
Debe ser definido en línea. Si está utilizando la etiqueta img, esa imagen debe tener un valor semántico para el contenido, por lo que se requiere el atributo alt para la validación.
Si la imagen debe formar parte del diseño o la plantilla, debe usar una etiqueta que no sea la etiqueta img y asigne la imagen como un fondo CSS al elemento. En este caso, la imagen no tiene ningún significado semántico y, por lo tanto, no requiere el atributo alt. Estoy bastante seguro de que la mayoría de los lectores de pantalla ni siquiera sabrían que existe una imagen CSS.
El alto y el ancho deben incluirse en el HTML. La razón es que crea el espacio en la página. Si por alguna razón el img no se carga (y usted ha sido un buen chico e incluyó un alt ... el navegador mostrará ese marco (usando la w y la h provistas) con el alt dentro.
La principal razón beneficiosa es prevenir el efecto "pop". Cuando un navegador carga la página, a veces los aspectos más grandes, como img, tardan más en cargarse, y si no ha especificado la w y la h en el código HTML, el navegador colapsará temporalmente esa área pensando que no está allí. Luego, cuando finalmente carga todo aparece en el lugar correcto.
Esto es especialmente molesto, pero sigue siendo bastante molesto en una computadora porque vas a hacer clic en un enlace y de repente la página se desplaza hacia abajo y accidentalmente has hecho clic en el enlace equivocado.
Me gustaría ir wi (d) la Recomendación W3C.
Es decir, definir el ancho y la altura como un atributo como este:
<img src="example.png" width="150" height="150" alt="example image">
http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element
Mi opinión es que es parte del contenido, como usted mencionó, tanto como el atributo src también.
Por otro lado, no hay una necesidad real de especificar ancho o alto en html o css, aunque podría ayudar a que tu página se renderice más rápido.
Podría estar equivocado, y si lo estoy, por favor, alguien me corrige ... pero creo que Google y algunos otros motores de búsqueda indexan el contenido de las etiquetas alt.
A veces, para la estética del diseño, he creado una imagen de texto creado con fuentes que no están disponibles a través de HTML, pero están disponibles para Photoshop, Illustrator, etc. Si tiene una impresión tipográfica precisa que desea crear y que implica información textual, la La única manera de hacerlo es crear una imagen del texto tipográfico y poner el texto real en una etiqueta alt por el bien de los motores de búsqueda.
Si alguien tiene una mejor solución, me encantaría escucharla.
Mientras tanto, sin embargo, dada la necesidad de lo que he descrito, me parece razonable votar por los parámetros HTML en línea de altura / ancho, junto con las descripciones de texto alternativo, como una cuestión de práctica estándar. De hecho, es contenido, no solo diseño en tales casos, y tales casos realmente no deberían ser excepciones a la regla hasta que CSS y los motores de búsqueda encuentren una mejor solución.
Según el artículo <img> en MDN , los atributos HTML indican las dimensiones intrínsecas de la imagen, es decir, sus dimensiones reales. Es por eso que, aunque HTML 4 también permite valores porcentuales, HTML5 solo permite valores de px. (trampa común: el "px" no debe escribirse)
Si desea visualizar la imagen con estas dimensiones, trabajo hecho. De lo contrario, también debe agregar CSS para especificar el tamaño de visualización .
Por supuesto, es mejor servir la imagen en el tamaño mostrado, para evitar cambiar el tamaño del navegador, ahorrar ancho de banda, etc., pero eso no siempre es posible.
Vea también las respuestas a esta pregunta: ¿Cuál es la diferencia entre el atributo de ancho de HTML y CSS?
Si es parte de la plantilla de su sitio, la ubicaría en el archivo CSS.
Si está solo en una página, debe estar alineado (o definido en un bloque de CSS específico de la página en la parte superior).
Si nos fijamos en la especificación HTML5, especificar la altura y el ancho es una opción, no un requisito. Por lo tanto, el código es válido con o sin estos atributos.
Desde un punto de vista práctico, es muy conveniente especificarlos para evitar los reflujos de página como se mencionó anteriormente. Sin embargo, aquellos que sugieren que debería estar en el html debido a esto, están perdiendo el hecho de que los navegadores usan CSS al construir la página inicialmente. Si no lo hicieran, la página tendría que volverse a dibujar para elementos flotados, rellenos especificados, márgenes, etc.
Si especificar en html o css se juzga mejor según las circunstancias individuales. Una gran cantidad de imágenes del mismo tamaño probablemente sea mejor servida con css, una sola imagen con html. Dicho esto, si está especificando otros estilos para la imagen (color del borde, estilo o radio, flotación, etc.), tendría sentido agregar ancho y alto al CSS.
Si especificas en html, solo puedes usar píxeles. Si quisiera especificar, por ejemplo, porcentaje, tendría que usar css.
En una nota lateral, se nos anima a usar ems &% en lugar de px para ayudar a evitar problemas cuando los usuarios cambian la configuración del navegador, etc., pero las imágenes siempre se mencionan en píxeles. Obviamente, hay razones prácticas para usar px para las imágenes. Sin embargo, mantener imágenes en px parecería negar el argumento de no usarlas.
Yo diría CSS.
HTML es sobre contenido,
CSS es acerca de la presentación.
Yo diría HTML.
Los atributos de ancho y alto se utilizan para evitar que la página se cargue y crezca de forma desarticulada.
Si alguna vez ha leído un bloque de texto en una página y lo ha empujado hacia abajo gracias a la última imagen de carga, ¡sabe lo frustrante que es!
Agregar una ID a cada imagen solo para especificar su ancho y alto sería absurdo y casi tan desordenado como agregar los dos atributos de ancho / alto de todos modos.
El truco es que Firefox no usa los atributos de ancho y alto para reservar el espacio de las imágenes, sin embargo, estoy sorprendido de que no lo hayan actualizado realmente.