Si tiene un sitio web en el que agrega contenido con frecuencia, existe la posibilidad de que, con el tiempo, algunas de las imágenes de su sitio web desaparezcan. Esta publicación lo ayudará a manejar las imágenes faltantes para evitar un impacto negativo en la experiencia del usuario de su sitio.
¿Por qué pueden faltar imágenes en su sitio web? Puede haber varias razones para esto:
Si alguna de esas cosas sucede, los visitantes encontrarán problemas cada vez que intenten ver contenido que contenga una imagen faltante.
Para ayudar a mitigar las consecuencias negativas de las imágenes rotas, compartiré 4 formas diferentes de manejar mejor las imágenes que faltan en su sitio web.
Cómo se ven las imágenes que faltan en los navegadores web
Un ejemplo de una imagen faltante en Chrome ( a la derecha )
Aunque cada navegador maneja las cosas de manera ligeramente diferente, los navegadores generalmente muestran algún tipo de icono de imagen rota.
Más allá de verse mal en general, esta imagen rota también puede estropear el diseño de su página porque el ícono de la imagen rota suele ser más pequeño que su imagen original.
Si la imagen faltante era el fondo de un elemento, no se debe alterar la estructura de la página. Sin embargo, la falta de una imagen de fondo podría reducir el contraste o la visibilidad del texto de primer plano y otros elementos, lo que generaría inconvenientes para el visitante y perjudicaría la accesibilidad de su sitio web .
Cuatro formas de manejar mejor las imágenes que faltan en su sitio web
Si bien probablemente nunca tuvo la intención de incluir imágenes faltantes en el contenido de su sitio web, es casi seguro que sucederá en algún momento debido a las razones enumeradas anteriormente.
Para ayudar a mitigar las consecuencias negativas de que eso suceda, hay algunas estrategias diferentes que puede emplear, que cubriré a continuación.
1. Uso alty titleatributos en la ![]()
Un gran problema con las imágenes faltantes es que el lector no tiene idea de lo que se supone que debe comunicar la imagen faltante, lo que puede generar problemas de comprensión en su sitio. Una solución simple para esto es hacer uso de los atributos de imagen para el texto alternativo y el título.
El texto alternativo de la imagen tiene dos funciones principales:
- Se muestra si falta la imagen (como en el ejemplo que se muestra arriba) o si el navegador de un usuario está configurado para no mostrar imágenes.
- Si alguien tiene una discapacidad visual y usa un lector de pantalla, el lector de pantalla leerá el texto alternativo en voz alta.
Entonces, incluso si el visitante no puede ver su imagen, aún puede saber exactamente lo que se pretendía comunicar si usa un texto alternativo descriptivo.
Además de agregar texto alternativo a la imagen, también debe incluir texto relevante en el titleatributo. Si uno se desplaza sobre una imagen, su navegador mostrará el texto dentro del titleatributo en una información sobre herramientas. En la mayoría de los casos, ambos atributos tendrán el mismo contenido textual.
Para agregar o editar el atributo del título y el texto alternativo de la imagen en WordPress, puede usar la barra lateral Detalles del archivo adjunto en la Biblioteca multimedia de WordPress :
2. Usa el onerroratributo en la ![]()
Más allá de agregar texto, otra cosa que quizás desee hacer es mostrar una imagen de marcador de posición en caso de que falte una imagen. Para hacer eso, puede usar una solución de una línea que puede implementar en el HTML para su imagen con el onerroratributo.
onerror="this.onerror=null;this.src='default-image.jpg';"
>
En caso de que la imagen original sea inaccesible y arroje un error, el código dentro del onerroratributo cambia la srcetiqueta de la imagen con la ubicación de la imagen predeterminada.
Este método solo funciona con imágenes regulares en su contenido y no funcionará con imágenes de fondo.
Si está utilizando WordPress, deberá agregar manualmente el onerroratributo utilizando la funcionalidad de edición de código del editor de WordPress:
- Editor clásico : use la pestaña Texto .
- Editor de bloques (también conocido como Gutenberg) : use el menú desplegable en la parte superior derecha para acceder al Editor de código.
Para usar este código, reemplácelo default-image.jpgcon el enlace a la imagen real que desea usar ( por ejemplo, una imagen de marcador de posición predeterminada ).
3. Utilice un servicio de terceros
Algunos servicios de optimización de imágenes tienen una opción para mostrar una imagen predeterminada en caso de que falte una.
Por ejemplo, ImageKit tiene una solución simple para mostrar imágenes predeterminadas en caso de que la imagen original no exista. Esto funciona de manera muy parecida al onerrormétodo de atributos de arriba.
Con ImageKit, el di-parámetro le permite especificar una imagen de marcador de posición que se entregará en caso de que la imagen original no esté disponible.
Sin embargo, a diferencia del onerroratributo, agregará el di-parámetro directamente a la imagen src="". Esto es lo que parece:
Sin embargo, al igual que el onerroratributo, esto no funcionará para las imágenes de fondo.
Un servicio de terceros también puede ayudarlo a evitar que falten imágenes en primer lugar al ayudarlo a entregar imágenes de manera más confiable. Por ejemplo, el complemento de optimización de imágenes Optimole WordPress sirve imágenes a través de su propia red de entrega de contenido (CDN) , que podría ser más confiable que su servidor de alojamiento.
4. Sirva la imagen predeterminada a través de su servidor para las imágenes que faltan
Veamos ahora una solución que potencialmente podría reemplazar cualquier imagen con una imagen predeterminada utilizando el archivo .htaccess de su sitio .
Este método solo funcionará si aloja y entrega imágenes desde su propio servidor ( es decir, no está utilizando un servicio de optimización de imágenes de terceros que entrega imágenes por usted ).
Este método es un poco más avanzado, por lo que no recomendamos hacerlo a menos que tenga algún conocimiento técnico.
Esencialmente, necesitas:
- Cree un
.htaccessarchivo en el directorio raíz de su servidor web, si aún no existe. - Verifique las solicitudes de imágenes, que generalmente terminan con la extensión del archivo de imagen (puede agregar más extensiones si es necesario).
- Sirve una imagen predeterminada si el archivo solicitado no existe.
hacer una copia de seguridad primero.
Este es un ejemplo del fragmento de código que deberá agregar a su .htaccessarchivo. Reemplace /default-image.jpgcon la URL real de la imagen de marcador de posición que desea usar:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_URI} .(gif|jpe?g|png)$ [NC]
RewriteRule .* /default-image.jpg [L]
Si no está seguro de cómo editar su .htaccessarchivo, puede seguir los pasos de nuestra guía sobre cómo evitar el hotlinking de imágenes .
Pensamientos finales
Aunque nunca se propuso tener imágenes faltantes en su sitio, aún pueden ocurrir por una variedad de razones. Los cuatro enfoques anteriores pueden ayudar a garantizar que los visitantes de su sitio aún tengan una buena experiencia , incluso si encuentran imágenes faltantes.
Pase lo que pase, siempre debe agregar texto alternativo a la imagen y un título. Más allá de asegurarse de que haya texto alternativo, esto también hace que su sitio sea más accesible para los visitantes con discapacidades visuales, lo cual es bueno en sí mismo.
Luego, también puede considerar usar el onerroratributo para especificar una imagen alternativa. Algunos servicios de optimización de imágenes de terceros, como ImageKit, también le permiten especificar una imagen alternativa de manera similar.
O, si se siente cómodo editando el .htaccessarchivo de su sitio, puede especificar una imagen de marcador de posición global para las imágenes que faltan en el nivel del servidor. Nuevamente, sin embargo, no recomendamos este método para principiantes completos.
Más allá de estos métodos específicos, también debe seguir algunas de las mejores prácticas para minimizar las posibilidades de que los visitantes encuentren imágenes faltantes en primer lugar. Mejores prácticas como…
