CBTis 69

TIPOS DE IMAGEN A UTILIZAR EN EL

DISEÑO DE UNA PÁGINA WEB

Materia: Gestiona Inf. A traves de plat. Digitales

Docente: Ing. Eusebio Bueno Martinez

Alumno: Juan José Perez Sarabia

Grupo y grado: 6°A

 Página web Responsive

Diseño Responsive

Es una técnica de diseño web que busca

la correcta visualización de una misma
página en distintos dispositivos. Desde
Consiste en
ordenadores de escritorio a tablets y
móviles.

Redimensionar y colocar los elementos de la

Hacer imágenes responsive
web de forma que se adapten al ancho de
cada dispositivo permitiendo una correcta
visualización y una mejor experiencia de
usuario. Se caracteriza porque los layouts
(contenidos) e imágenes son fluidos y se usa
código media-queries de CSS3.

Para eso se debe tener la misma imagen, pero en varios

tamaños y que el navegador eligiese cual presentar en
cada momento. Se usa el atributo srcset dentro del
elemento img que nos permite justo eso, tener varias
Tipos de imágenes
imágenes a distintas resoluciones, y el navegador, en
función del tamaño o la resolución, mostrará una u otra.

Mejor tipo de fichero para las imágenes
Las imágenes vectoriales son las
ideales para los logos, fuentes de
iconos y sobre todo formas con
colores planos. El formato más común
para estos archivos es el .SVG de
Scalable Vector Graphics.

•JPG para las fotografías. Cuando una imagen tiene

muchos colores, es la mejor opción.
• SVG cuando tengamos un logo o imágenes muy lineales
y con colores sólidos (Sin gradientes). Si no podemos usar
SVG, podemos usar PNG o WebP
• PNG siempre mejor que GIF. Ofrece más colores y mejor
ratio de compresión.
• Video para animaciones complejas. Mucho mejor que un
GIF, mejor calidad de imagen
Las imágenes rasterizadas son las
ya conocidas por todos. Son las
imágenes que podemos hacer con
una cámara de fotos. Al contrario que
las vectorizadas, si escalamos una
imagen de un tamaño pequeño a otro
más grande, perderemos calidad y la
veremos pixelada.