Cuando se guardan imágenes en un programa gráfico, se ofrecen distintos formatos gráficos. Pero, ¿cuál elegir a la hora de integrar la imagen en un sitio web?
Si quiere presentar una imagen en su sitio web, puede elegir entre tres formatos.
- GIF
- JPEG
- PNG
Pero, ¿qué formato elegir para cada finalidad? ¿Es mejor utilizar GIF o PNG para las fotos? En primer lugar, un breve resumen de las capacidades de cada formato.
| Propiedad | JPEG | GIF | PNG |
| Almacenamiento sin pérdidas | No | Sí | Sí |
| Colores | 24 bits | indexados hasta 256 | indexados (hasta 256), 24 bits o 48 bits |
| Transparencia | No | Sí, un color | Sí |
| Carga progresiva o entrelazado | Sí | Sí | Sí |
| Animaciones | No | Sí | No |
Este breve resumen ya muestra las diferentes propiedades de los formatos. Por tanto, no es de extrañar que algunos formatos sean más adecuados que otros para determinadas aplicaciones. Precisamente aquí es donde entra en juego la siguiente sección. Muestra cuándo es mejor utilizar cada formato.
Fotos
No hay duda de que JPEG se utiliza para las fotos. Esto se debe a que las imágenes se pueden comprimir muy bien en este formato, por lo que la calidad se puede seleccionar de forma variable. Aquí puedes encontrar el equilibrio adecuado entre calidad y tasa de compresión.
Capturas de pantalla/diagramas
El formato PNG es el más adecuado para este fin. PNG también es interesante para dibujos técnicos, planos de planta, etc. PNG también puede utilizarse para imágenes en las que se utilizan áreas transparentes.
Fuentes/Logotipos
Si tiene texto en su logotipo o quiere mostrar texto en absoluto, debe utilizar GIF o PNG. Sin embargo, se suele utilizar PNG por su mejor rendimiento. JPEG no es adecuado para mostrar fuentes, ya que los bordes se muestran de forma poco nítida.
Transparencia
Cuando se trata de mostrar zonas transparentes, JPEG queda descartado desde el principio. Quedan el GIF y el PNG. Pero, ¿cuál de estos dos formatos debe utilizarse cuando la transparencia es importante? En principio, el formato GIF admite transparencias, pero los resultados suelen ser poco limpios. En formato GIF, un píxel puede ser completamente visible o completamente transparente. Este fenómeno no ocurre con PNG. Este formato tiene un canal alfa adicional, gracias al cual se consiguen resultados de transparencia más finos.
Integrar imágenes
Los gráficos pueden integrarse utilizando el elemento img. (Tenga en cuenta que ahora las imágenes se integran muy a menudo utilizando CSS. Más adelante se ofrecerá información detallada sobre CSS. Sin embargo, el método HTML mostrado es completamente compatible con los estándares y también puede utilizarse en HTML5 sin dudarlo).
<img src="logo.png" alt="PSD-Tutorials.de" />
img es un elemento independiente. La imagen puede describirse con más detalle mediante los atributos correspondientes. El atributo más importante es, sin duda, src. Esto se debe a que se utiliza para especificar la imagen que se va a incluir. En el ejemplo mostrado, supongo que el gráfico logo.png se encuentra en el mismo directorio que el archivo HTML en el que se ha definido el elemento img.
Para que las imágenes se muestren realmente, debe especificarse correctamente la ruta a las mismas. HTML ofrece varias opciones de referenciación.
- Rutas absolutas
- Rutas absolutas relativas a la dirección base
- Especificaciones de rutas relativas a la dirección base
En primer lugar, las rutas absolutas. Esta variante suele utilizarse cuando la imagen no se encuentra en su propio servidor. Supongamos que desea incrustar la mariposa conocida de PSD-Tutorials.de en su sitio web. Entonces, en teoría, podría cargarla directamente desde el servidor en el que se encuentra. Primero determine la ruta de la imagen. La forma más sencilla de hacerlo es hacer clic con el botón derecho del ratón sobre la imagen en el navegador y, a continuación, seleccionar Copiar URL de imagen.
Lo que se carga en el portapapeles debería tener este aspecto al final:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Esta es la dirección completa de la imagen. Esta información ya es suficiente para incrustar la imagen.
<img src=" http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg" alt="PSD-Tutorials.de" />
Por tanto, al atributo src se le asigna la ruta completa a la imagen.
Sin embargo, el problema de estas rutas absolutas es que, en última instancia, no se tiene ningún control real sobre el contenido incrustado. Si el gráfico referenciado se elimina del servidor o se mueve a un directorio diferente, se produce un error de visualización.
Por lo tanto, esta referenciación absoluta debería ser la excepción.
Información de ruta absoluta relativa a la dirección base
Esta variante siempre es adecuada si el gráfico se encuentra en el mismo ordenador/servidor que el archivo HTML y se puede acceder a él a través del protocolo actual. Parece complicado, pero no lo es.
He aquí un ejemplo:
http://4eck-media.de/wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Esta es la dirección completa. La parte siguiente es la ruta absoluta.
wp-content/uploads/2013/01/logo-psd-tutorials.jpg
Esta especificación de ruta absoluta es relativa a la dirección base http://4eck-media.de.
Información de la ruta relativa a la dirección base
La variante presentada aquí es sin duda la más común. La ruta actual siempre se toma como punto de referencia a partir del cual se realiza el direccionamiento en última instancia. De nuevo, he aquí algunos ejemplos. Supongamos que existe un fichero index.htm en el que se desea integrar una imagen. Además, en el mismo nivel existe el directorio images, en el que se encuentra dicha imagen.
index.htm
images
--logo.png
En este caso, la llamada en el atributo src sería la siguiente
src="images/logo.png"
Pero, ¿qué aspecto tendría el conjunto si la imagen se encuentra en un directorio situado por encima del archivo HTML?
project
--images
-----logo.png
--archive
-----index.htm
En este caso, index .ht m se encuentra un directorio por debajo de la imagen logo.png que debe incluirse.
src="../images/logo.png"
La sintaxis aquí significa: Subir un nivel, cambiar al directorio images y mostrar el logo.png.
project
--images
----logo.png
----2013
------januar
--------index.htm
Aquí la sintaxis es la siguiente
src="../../images/logo.png"
En este caso, la imagen logo . png se encuentra dos niveles por encima de index.ht m en el directorio images.
La ventaja de las especificaciones de rutas relativas es su flexibilidad. Por ejemplo, puede desarrollar el proyecto localmente y luego copiarlo a un servidor "real". Las rutas no cambiarán.
