una tamaño pagina mostrar insertar img imagenes imagen como codigo html image cross-browser

tamaño - mostrar imagen en html



¿Qué se supone que debe suceder cuando no se puede mostrar un img? (2)

¿Qué se supone que debe hacer exactamente el navegador cuando no se puede mostrar un img?

Las fuentes oficiales son deliberadamente vagas sobre esto. Dicen que se supone que se usará el texto alternativo, ¡pero no dicen cómo !
Así que, a menos que no haya buscado lo suficiente (y he buscado mucho en Google, ¡incluso me he colgado!) Esta información no está allí. Y los navegadores difieren ampliamente en lo que hacen.

Si no se puede cargar una imagen porque no está allí,

  • Mozilla muestra el texto alternativo en línea como parte del texto actual
  • IE muestra el texto alternativo como un bloque en línea, precedido por el icono de "imagen rota" y en una fuente diferente
  • Chrome también muestra un bloque en línea y el icono de "imagen rota", y pone un borde alrededor de él. Sin embargo, no cambia la fuente.

<p>This is my new car. <img src="images/mynewcar.jpg" alt="It''s a red car, with four wheels."/> And that''s it.</p>

Ahora, si cambia la configuración de los navegadores para no cargar imágenes, el comportamiento cambia en la mayoría de los navegadores.

  • Chrome ahora no muestra nada, ni siquiera el texto alternativo.
  • IE todavía muestra el texto alternativo en una fuente más pequeña, pero ahora sin el icono de "imagen rota" al frente.
  • Mozilla todavía muestra el texto alternativo en línea.

Entonces mi pregunta es, ¿cuál de estos buscadores hace lo correcto?

Y con eso no me refiero a "¿cuál crees que es el mejor enfoque"? Realmente, ¿cuáles son las reglas oficiales que rigen este comportamiento? ¿Hay páginas W3C (o incluso páginas WHATWG) que logré perder, o donde malinterpreté las reglas?


Del elemento HTML de MDN <img> IMG

Los navegadores no siempre muestran la imagen a la que hace referencia el elemento. Este es el caso de navegadores no gráficos (incluidos los utilizados por personas con discapacidades visuales), si el usuario elige no mostrar imágenes o si el navegador no puede mostrar la imagen porque no es válida o no es compatible. En estos casos, el navegador puede reemplazar la imagen con el texto definido en el atributo alt de este elemento.

El comportamiento predeterminado si muestra el contenido del atributo alt

vea este doc ref. MDN doc para ref. También puede consultar esta referencia W3C

Y esta http://www.w3.org/TR/2015/NOTE-UNDERSTANDING-WCAG20-20150226/understanding-techniques.html técnicas de comprensión para el Criterio de éxito de WCAG


Parece que no hay reglas duras y rápidas al respecto. La especificación HTML solo describe cómo se espera que un navegador se comporte, pero no impone requisitos normativos a los navegadores para seguir dicho comportamiento al pie de la letra. La especificación CSS ni siquiera toca en él.

La Sección 10.4.2 del W3C HTML5 describe cómo se representan los elementos img según un conjunto de reglas que hacen referencia a lo que representan los elementos img .

La sección 4.7.1 , un camino hacia abajo, describe qué representa un elemento img en función de sus atributos src y alt :

Lo que representa un elemento img depende del atributo src y del atributo alt .

[...]

Si se establece el atributo src y el atributo alt se establece en un valor que no está vacío

La imagen es una parte clave del contenido; el atributo alt da un equivalente textual o reemplazo para la imagen.

Si la imagen está disponible y el agente de usuario está configurado para mostrar esa imagen, entonces el elemento representa los datos de imagen del elemento.

De lo contrario, el elemento representa el texto dado por el atributo alt . Los agentes de usuario pueden proporcionar al usuario una notificación de que una imagen está presente pero que se ha omitido en el procesamiento.

Por lo tanto, si una imagen no está disponible, un elemento img representa su texto alternativo (¡ya que no hay ninguna imagen para representar!).

Entonces, volviendo a la sección 10.4.2, se aplica la siguiente regla:

Si el elemento es un elemento img que representa algún texto y el agente de usuario no espera que esto cambie
Se espera que el agente de usuario trate el elemento como un elemento de frase no reemplazado cuyo contenido es el texto, opcionalmente con un icono que indica que falta una imagen, para que el usuario pueda solicitar que se muestre la imagen o investigar por qué no está renderizando . En contextos no gráficos, tal icono debería ser omitido.

Parece que Firefox está siguiendo esta expectativa (nota: no requisito ) más de cerca, aunque no estoy seguro de si la caja que se genera es reemplazada o no reemplazada. Del mismo modo para los otros navegadores, un bloque en línea puede ser reemplazado o no reemplazado. Tenga en cuenta que HTML dice "elemento de frase", no "elemento en línea" o "elemento de bloque en línea", lo que se suma a la vaguedad de todo el asunto.

Lo que Chrome hace cuando las imágenes se desactivan a través de las preferencias del usuario no es lo que yo llamaría "[proporcionar] al usuario una notificación de que una imagen está presente pero se ha omitido en el procesamiento", pero una vez más, tampoco es un requisito. Aún así, no entiendo por qué Chrome piensa que es una buena idea. ¿Para qué era el texto alternativo, de nuevo?