La inclusión de imágenes en los artículos de nuestro blog  es sumamente importante, tanto por mejorar el aspecto estético del artículo, como ayuda para los lectores del blog ,una imagen vale más que mil palabras, y sobre todo para aumentar los visitantes del blog gracias a las visitas obtenidades a través de la visualización de la imágenes.

            Muchos blogueros insertan imágenes directamente en sus blogs colocando la url de la imagen que le ha gustado, esta técnica denominada hotlinking tiene dos inconvenientes, por un lado sobrecarga el ancho de banda del sitio web donde hemos enlazado la imagen y por otra parte si la web de origen borra o cambia la url de la imagen, en nuestro blog desaparecerá la imagen apareciendo en su lugar el icono de imagen rota.

            Para resolver este problema existen diferentes alternativas,  la más rápida y sencilla es incluir en el atributo alt del tag img el texto que deseamos visualizar cuando no sea posible localizar la imagen, quedando el código html de la siguiente forma:

                                 <img src="url de la imagen" alt="LA IMAGEN NO ESTÁ" />

            Otra forma más elegante y más elaborada consiste en incluir el siguiente script  dentro del head de nuestra plantilla.

                          <script type='text/javascript'>
                          //<![CDATA[
                          // Script para sustituir imágenes rotas
                          function ImagenOk(img) {
                          if (!img.complete) return false;
                          if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) return false;
                          return true;
                          }
                          function RevisarImagenesRotas() {
                          var replacementImg = "";
                          for (var i = 0; i < document.images.length; i++) {
                          if (!ImagenOk(document.images[i])) {
                          document.images[i].src = replacementImg;
                          }}}
                          window.onload=RevisarImagenesRotas;
                          // ]]>
                         </script>

            La función de este script es localizar las imágenes que no se visualizan correctamente, sustituirlas por otra imagen que nosotros crearemos, tan solo debemos indicar la url de dicha imagen en la variable replacementImg.

            Estas son dos formas de evitar que las imágenes no se muestren en nuestro blog, pero la mejor solución de todas, es subir las imágenes que mostramos en nuestro blog a servidores de almacenamiento de imágenes como Picasa o Flickr.