Optimizar imágenes en páginas web I
16 septiembre, 2013
Cambiar nombre de la página web en Facebook
30 septiembre, 2013
COMO CREAR UN BLOG, UNA WEB O UNA TIENDA ONLINE
ritmo, por tus propios medios.
Cómo optimizar imágenes al crear una página web II
Mira antes la primera parte de Optimizar imágenes en páginas web
6. Cambia el tamaño de la imagen al tamaño que se muestra en tu artículo
Las imágenes son, en general, los elementos que tienen más probabilidades de hacer más lenta la carga. Por lo tanto, se requiere un cuidado especial para que el tamaño de los archivos no sea más grande de lo necesario.
El primer punto se refiere a las dimensiones de la imagen. Utilizando como ejemplo una página web con un ancho de 580 píxeles, este es el tamaño máximo que una imagen puede ser mostrada. Supongamos que tengo una imagen con una anchura de 1024 píxeles y quiero ponerlo en uno de mis artículos. Habría dos formas de mostrar la imagen del tamaño correcto:
- De la forma errónea: mantener el archivo con el ancho original y colocar la imagen en mi artículo, estableciendo el ancho al tamaño disponible. Esto es un error, porque al cargar el blog, el navegador primero carga la imagen en su tamaño original (que ocupa más espacio y toma más tiempo) y sólo a continuación cambia su tamaño.
- De la forma correcta: antes de colocarlo en el artículo, cambia su tamaño en un editor de imágenes para que sea el tamaño exacto que se mostrará. Si no sabes cómo hacer esto, te sugiero que leas artículos de cómo editar imágenes para tu blog.
7. Utiliza el formato que crea el archivo con un tamaño más pequeño
Hay varios tipos diferentes de archivos de imagen, de acuerdo a su «extensión» (las tres últimas letras de su nombre). Están los BMP, GIF, JPG y PNG, por ejemplo, que suelen ser los más utilizados en Internet. Hay mucha diferencia entre ellos, especialmente respecto al tamaño del archivo generado.
Prácticamente todos los editores de imágenes te permiten utilizar la opción «Guardar como» para elegir el formato en el que se guarda. En general, aquí hay algunas directrices a utilizar:
- BMP – Nunca, nunca, utilice estos archivos en tus artículos. Son los que generan los archivos más grandes.
- GIF – En general, sólo tiene sentido utilizar el tipo de GIFs animados. Para imágenes fijas (gráficos), apenas se utilizan.
- JPG – archivos que suelen tener un buen uso de las imágenes, debido a su buena calidad y tamaño pequeño. Además, pueden generar archivos más pequeños para establecer su compresión.
- PNG – archivos que también que generan buena calidad y tamaño de archivo, especialmente para las ilustraciones. Además tiene la ventaja de permitir fondos transparentes.
Como regla general: para fotos, ilustraciones preferible usar JPG y PNG. Pero la mejor manera de saber el formato correcto es guardar la misma imagen como JPG y PNG y comparar la calidad de imagen y tamaño de archivo.
8. Utiliza la compresión de archivos de imagen
Tanto el JPG y PNG (que, como ya he dicho en la sección anterior, son los más adecuados para utilizar en sus artículos) permiten definir algunas propiedades para generar archivos más pequeños.
Pero no hay magia: los archivos sólo se hacen más pequeños porque la calidad de la imagen también es menor. Todo depende de ti para definir lo que es calidad aceptable para tus imágenes.
Usando Paint.net (un gran editor de imágenes gratuito) como ejemplo, la calidad está ajustada para guardar una imagen. También puedes utilizar las herramientas en línea para hacer el trabajo para ti. Basta con enviar las imágenes a un servidor, que va a hacer la compresión.
Es importante analizar las imágenes comprimidas antes de enviarlas para confirmar si siguen con una calidad aceptable. A continuación se presentan dos servicios que hacen esto:
- PunyPNG
- Smush.it
9. Rellena las propiedades ALT y TITLE
Es muy importante que rellenes las propiedades de ALT y TITLE de las imágenes que se utilizan en tu blog. Son dos propiedades donde se debe describir lo que la imagen representa, y tienen diferentes propósitos:
- TITLE («Título») – Se adapta a un texto que se muestra en la imagen cuando el usuario detiene el cursor del ratón sobre él.
- ALT («alternativo») – Es importante para Google y se utiliza como un factor para mostrar la imagen en los resultados de búsqueda de imágenes.
Puedes utilizar el mismo valor en ambos campos, o los haces diferentes unos de otros, para elegir. Lo importante es que no estén vacíos. Volviendo al ejemplo de la sección 5, las propiedades ALT y TITLE de la imagen podrían ser «gato jugando con un ovillo de lana.»
La forma de rellenar la ALT y TITLE varían según la plataforma en la que estás escribiendo tu artículo:
- Windows Live Writer: haz clic en la imagen y selecciona «Alt Text» en la barra de herramientas. Se abrirá un cuadro como el siguiente: «Establezca la ALT y TITLE Windows Live Writer»
- En Blogger: haz clic en la imagen y selecciona «Propiedades» debajo de la imagen. La pantalla para rellenar las propiedades será de la siguiente manera: «Set ALT y TITLE Blogger»
Conclusión
Estos 9 consejos pueden hacer una gran diferencia en tu página web. Si las cumples, serás capaz de hacer un mejor uso de las imágenes, sin hacerlo pesado de llevar y con buenas posibilidades de estar bien posicionado en Google.
Al principio, puede que tengas que utilizar este artículo a recordar todos los elementos para hacer una nueva entrada. Pero con el tiempo, también serán parte del proceso normal por cada nuevo artículo que vayas a redactar en tu página.
