SlideShare una empresa de Scribd logo
1 de 10
Bien sea para ilustrar la información contenida en nuestras páginas o
para integrar un largo texto o, por que no, por cuestiones estéticas, es
prácticamente imposible evitar colocar alguna que otra imagen en
nuestras páginas. Al emplear las imágenes debemos guiarnos por unas
cuantas reglas básicas:
Procurar que las imágenes sirvan para algo, que den información. Esta
es una de las razones por las que debemos usar los atributos ALT.
No pasarnos. La página no debe pesar demasiado. Un visitante que ve
como la página tarda en cargarse más de 15 o 20 seg lo más probable
es que se vaya y, lo que es peor, que no vuelva.
Procurar un equilibrio entre tamaño del archivo de imagen y calidad de
ésta. A veces una imagen muy grande requiere una compresión tal que
al final tenemos una calidad pésima. En estos casos debemos
plantearnos el tipo de imagen a usar.
Fíjate en las imágenes mostradas en tu
monitor. Estas imágenes están formadas por
unos puntos muy pequeños llamados pixel.
Si tu monitor fuera de aquellos en blanco y
negro utilizados en la época de los pioneros,
cada pixel podía estar encendido (color
blanco) o apagado (color negro). En los
monitores de color actuales cada pixel o
punto de pantalla no representa esos dos
únicos colores .
Usando este formato pueden almacenarse imágenes de hasta 24 bits de
color. Es recomendable para fotografías o imágenes con degradados.
Cualquier programa editor de gráficos permite guardar una imagen en
este formato con diferentes grados de compresión. Lógicamente cuanto
más comprimamos la imagen menor es su calidad. Si queremos imágenes
de alta calidad debemos soportar archivos de tamaños elevados.
Recientemente ha aparecido una variación de este formato denominada
JP2 o JPG2000, especialmente destinado a la red. Pero aún no es
admitido por todos los exploradores.
Este otro formato se usa para imágenes con hasta 256 colores ( 8 bits de
color). Frente a esta limitación nos ofrece la posibilidad de definir zonas
transparentes y además existe una variante que permite imágenes
animadas, muy útil para llamar la atención sobre algo en concreto como
puedan ser las novedades de nuestro sitio o un anuncio de algún
servicio. Pero conviene no abusar de las animaciones, son archivos muy
grandes y pueden llegar a resultar pesados. En nuestro
sitio Gifsanimados tienes una excelente colección para elegir
El formato PNG es el gran desconocido de internet, pese a su magnífico
comportamiento. Realmente existen varios formatos PNG: PNG8, que
almacena imágenes de hasta 256 colores, PNG24 para imágenes de 24
bits y PNG32 para imágenes de 32 bits. Permite transparencias como los
GIF y transparencia graduada (colores cuya opacidad van desde el 0%
hasta el 100%), aunque los exploradores no aprovechan esta utilísima
propiedad. Por contra no admiten animaciones.
Ese otro método de almacenar imágenes se basa en encontrar
funciones matemáticas para representar la imagen completa. Este
método no sólo se usa para figuras regulares (rectángulos, cuadrados,
círculos) también se puede usar para imágenes tipo fotografía. Si
alguno de los que lee estas líneas ha oído hablar de una cosa llamada
figuras de Mandelbrot sabrá que es eso de encontrar una función
matemática para representar la formas tan poco regulares como un
paisaje de montaña y similares. Estas imágenes dan una calidad
excelente y permiten ser escaladas (modificar su tamaño) sin pérdida
de calidad. Un ejemplo son los archivos DXF y otros usados en
programas CAD. Estos formatos no se usan en las páginas web.
1. USA LA RESOLUCIÓN ADECUADA
Primero, esto se relativiza mucho si usas un buen ancho de banda para tu
servidor web (es decir, un buen hosting), cosa que deberías estar haciendo
de todos modos. Así el servidor no se resentirá fácilmente con páginas de
algo más de tamaño. Por otra parte, las imágenes que subas deberían estar
optimizadas para tener el mínimo tamaño posible, sin pérdidas de calidad
apreciables.
La optimización más básica y eficaz es adecuar la resolución de la imagen a
su uso en una web.
2. USA EL FORMATO ADECUADO
Una cosa que observo que prácticamente la totalidad de los bloggers hace
mal es no usar el formato de imagen más adecuado según el uso al que se
quiera destinar esa imagen.
Hay tres formatos principales que representan prácticamente al 100% de los
formatos usados en la web y que son los formatos JPG, PNG y GIF.
3. OPTIMIZA LA IMAGEN (COLORES, NITIDEZ )
Optimizar una imagen no consiste solamente reducir sus dimensiones, sino
también en aplicar algoritmos inteligentes para (p . E . para conseguir
una nitidez óptima de las imágenes reducidas), escoger el formato
adecuado como he comentado arriba y reducir su paleta de colores.
4. USA LAS IMÁGENES PARA ESTIMULAR AL LECTOR
Vista la parte más técnica de cómo usar correctamente las imágenes en un sitio
web, hablemos de cómo usarlas para aumentar la afluencia de lectores a tu
sitio.
No se puede insistir lo suficiente en el gran potencial que tienen las imágenes
para estimular al lector y captar su atención, muy pocos blogs lo aprovechan.
En este mismo blog aún tenemos tarea por delante porque ciertamente
tampoco es una cosa que se implementa de un día para otro y requiere tener
claro cómo hacerlo que es lo que voy a detallar en los siguientes puntos.
5. MULTIPLICA EL IMPACTO EN LAS REDES SOCIALES
Así que vamos a empezar por unas técnicas que aún muy poco gente utiliza
pero, sin embargo, son extraordinariamente eficaces si las sabes implementar
bien. Y es que en los últimos años han aparecido una serie de nuevas
funcionalidades en las redes sociales que permiten aprovechar mucho mejor
el potencial inherente a las imágenes para captar la atención del lector en estos
6. PROVECHA LAS IMÁGENES PARA EL SEO
Mucha gente no es consciente de que no sólo se posiciona el contenido, sino
también las imágenes. De hecho, Google considera entre sus 200 factores de
posicionamiento también aquellos relacionados con las imágenes.
7. USA FUENTES DE CALIDAD Y RESPETA LOS DERECHOS DE AUTOR
La última técnica, o mejor dicho, principio en este caso es que cuides mucho
la calidad de tus imágenes. Si aplicas las técnicas anteriores con imágenes
de baja calidad éstas perderán gran parte de su eficacia o incluso la perderán
por completo.
Calidad quiere decir que la imagen sea buena, creativa, capaz de llamar la
atención (positivamente), etc. y tenga un buen acabo (se vea nítida, etc.)
Imagenes en paginas web

Más contenido relacionado

La actualidad más candente

12. funcionamiento de monitor crt o trc
12. funcionamiento de monitor crt o trc12. funcionamiento de monitor crt o trc
12. funcionamiento de monitor crt o trc
Klaudita Toloza
 
Plataformas y medios de difusión de la multimedia
Plataformas y medios de difusión de la multimediaPlataformas y medios de difusión de la multimedia
Plataformas y medios de difusión de la multimedia
ivanmichael
 
Ventajas de las Web Educativas
Ventajas de las Web EducativasVentajas de las Web Educativas
Ventajas de las Web Educativas
VanessaMar
 
Historia de los dispositivos de almacenamiento
Historia de los dispositivos de almacenamiento Historia de los dispositivos de almacenamiento
Historia de los dispositivos de almacenamiento
luis777666
 
Sistemas operativos PRESENTACION
Sistemas operativos PRESENTACIONSistemas operativos PRESENTACION
Sistemas operativos PRESENTACION
Andrés Chávez
 

La actualidad más candente (20)

Trabajo multimedia
Trabajo multimediaTrabajo multimedia
Trabajo multimedia
 
12. funcionamiento de monitor crt o trc
12. funcionamiento de monitor crt o trc12. funcionamiento de monitor crt o trc
12. funcionamiento de monitor crt o trc
 
Plataformas y medios de difusión de la multimedia
Plataformas y medios de difusión de la multimediaPlataformas y medios de difusión de la multimedia
Plataformas y medios de difusión de la multimedia
 
Almacenamiento Power Point
Almacenamiento Power Point Almacenamiento Power Point
Almacenamiento Power Point
 
Power point HARDWARE
Power point HARDWAREPower point HARDWARE
Power point HARDWARE
 
Presentacion blu ray
Presentacion blu rayPresentacion blu ray
Presentacion blu ray
 
Ventajas de las Web Educativas
Ventajas de las Web EducativasVentajas de las Web Educativas
Ventajas de las Web Educativas
 
Presentacion adobe flash
Presentacion adobe flashPresentacion adobe flash
Presentacion adobe flash
 
Caracteristicas del Sistema operativo Windows 8.1 / 10 y Android de IDE 09182...
Caracteristicas del Sistema operativo Windows 8.1 / 10 y Android de IDE 09182...Caracteristicas del Sistema operativo Windows 8.1 / 10 y Android de IDE 09182...
Caracteristicas del Sistema operativo Windows 8.1 / 10 y Android de IDE 09182...
 
Tipos plataformas web
Tipos plataformas webTipos plataformas web
Tipos plataformas web
 
Historia de los dispositivos de almacenamiento
Historia de los dispositivos de almacenamiento Historia de los dispositivos de almacenamiento
Historia de los dispositivos de almacenamiento
 
Diapositivas android
Diapositivas androidDiapositivas android
Diapositivas android
 
Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 
Sistema operativo Symbian
Sistema operativo SymbianSistema operativo Symbian
Sistema operativo Symbian
 
Sistema Operativo
Sistema OperativoSistema Operativo
Sistema Operativo
 
Dominios de internet
Dominios de internetDominios de internet
Dominios de internet
 
Elementos básicos de la computadora y sus funciones.
Elementos básicos de la computadora y sus funciones.Elementos básicos de la computadora y sus funciones.
Elementos básicos de la computadora y sus funciones.
 
Sistemas operativos PRESENTACION
Sistemas operativos PRESENTACIONSistemas operativos PRESENTACION
Sistemas operativos PRESENTACION
 
Multimedia
MultimediaMultimedia
Multimedia
 
Ventajas y desventajas de windows, mac y
Ventajas y desventajas de windows, mac yVentajas y desventajas de windows, mac y
Ventajas y desventajas de windows, mac y
 

Destacado

Navegadores cuadro comparativo
Navegadores cuadro comparativoNavegadores cuadro comparativo
Navegadores cuadro comparativo
jafiescos
 
Ventajas y desventajas de internet
Ventajas y desventajas de internetVentajas y desventajas de internet
Ventajas y desventajas de internet
simonvelez
 
Internet Diapositivas
Internet DiapositivasInternet Diapositivas
Internet Diapositivas
ileen
 
Diferencias entre buscador y navegador
Diferencias entre buscador y navegadorDiferencias entre buscador y navegador
Diferencias entre buscador y navegador
bmllanos
 
Pasos para crear una base de datos
Pasos para crear una base de datosPasos para crear una base de datos
Pasos para crear una base de datos
yuridia-love
 
Guia de implementación de modelo de control interno
Guia de implementación de modelo de control internoGuia de implementación de modelo de control interno
Guia de implementación de modelo de control interno
Angie Carolina Díaz Ramirez
 
Diapositivas De Internet
Diapositivas De Internet Diapositivas De Internet
Diapositivas De Internet
GoOre Perez
 
Que Es Internet 2
Que Es Internet 2Que Es Internet 2
Que Es Internet 2
aurablava
 
diapositivas sobre internet
diapositivas sobre internetdiapositivas sobre internet
diapositivas sobre internet
guest56bbb9
 
como crear una base de datos
como crear una base de datoscomo crear una base de datos
como crear una base de datos
may_campos
 

Destacado (20)

11. cambia el chip
11. cambia el chip11. cambia el chip
11. cambia el chip
 
Tipos de redes sociales
Tipos de redes socialesTipos de redes sociales
Tipos de redes sociales
 
crear una base de datos
crear una base de datoscrear una base de datos
crear una base de datos
 
Componentes de un proyecto
Componentes de un proyectoComponentes de un proyecto
Componentes de un proyecto
 
Browser y buscadores(mapa conceptual y cuadro comparativo)
Browser y buscadores(mapa conceptual y cuadro comparativo)Browser y buscadores(mapa conceptual y cuadro comparativo)
Browser y buscadores(mapa conceptual y cuadro comparativo)
 
Navegadores cuadro comparativo
Navegadores cuadro comparativoNavegadores cuadro comparativo
Navegadores cuadro comparativo
 
Redes Informáticas Jaime
Redes Informáticas JaimeRedes Informáticas Jaime
Redes Informáticas Jaime
 
Ventajas y desventajas de internet
Ventajas y desventajas de internetVentajas y desventajas de internet
Ventajas y desventajas de internet
 
Internet Diapositivas
Internet DiapositivasInternet Diapositivas
Internet Diapositivas
 
Diferencias entre buscador y navegador
Diferencias entre buscador y navegadorDiferencias entre buscador y navegador
Diferencias entre buscador y navegador
 
Pasos para crear una base de datos
Pasos para crear una base de datosPasos para crear una base de datos
Pasos para crear una base de datos
 
Guia de implementación de modelo de control interno
Guia de implementación de modelo de control internoGuia de implementación de modelo de control interno
Guia de implementación de modelo de control interno
 
Que es internet
Que es internetQue es internet
Que es internet
 
Diapositivas De Internet
Diapositivas De Internet Diapositivas De Internet
Diapositivas De Internet
 
Que Es Internet 2
Que Es Internet 2Que Es Internet 2
Que Es Internet 2
 
El Internet
El InternetEl Internet
El Internet
 
Internet presentacion power point
Internet presentacion power pointInternet presentacion power point
Internet presentacion power point
 
Proyecto base de datos 2
Proyecto base de datos 2Proyecto base de datos 2
Proyecto base de datos 2
 
diapositivas sobre internet
diapositivas sobre internetdiapositivas sobre internet
diapositivas sobre internet
 
como crear una base de datos
como crear una base de datoscomo crear una base de datos
como crear una base de datos
 

Similar a Imagenes en paginas web

Trabajo de optimización
Trabajo de optimizaciónTrabajo de optimización
Trabajo de optimización
Diana Zavala
 
Mis fotografías en La Web
Mis fotografías en La WebMis fotografías en La Web
Mis fotografías en La Web
Ángel Encinas
 
Como bajar el peso de una imagen para adaptar a la web en GIMP
Como bajar el peso de una imagen para adaptar a la web en GIMPComo bajar el peso de una imagen para adaptar a la web en GIMP
Como bajar el peso de una imagen para adaptar a la web en GIMP
Serviweb.com.es
 

Similar a Imagenes en paginas web (20)

Trabajo de optimización
Trabajo de optimizaciónTrabajo de optimización
Trabajo de optimización
 
Squoosh la nueva app de Google para optimizar imágenes
Squoosh la nueva app de Google para optimizar imágenesSquoosh la nueva app de Google para optimizar imágenes
Squoosh la nueva app de Google para optimizar imágenes
 
Formatos imagen
Formatos imagenFormatos imagen
Formatos imagen
 
Informe snkr
Informe snkrInforme snkr
Informe snkr
 
Trabajo 3.pdf
Trabajo 3.pdfTrabajo 3.pdf
Trabajo 3.pdf
 
Manual curso taller adobe photoshop básico
Manual curso taller adobe photoshop básicoManual curso taller adobe photoshop básico
Manual curso taller adobe photoshop básico
 
11 Gimp. Animacion Y Web
11 Gimp. Animacion Y Web11 Gimp. Animacion Y Web
11 Gimp. Animacion Y Web
 
Ernesto dertas
Ernesto dertasErnesto dertas
Ernesto dertas
 
Imagenes en un blog
Imagenes en un blogImagenes en un blog
Imagenes en un blog
 
Mis fotografías en La Web
Mis fotografías en La WebMis fotografías en La Web
Mis fotografías en La Web
 
Pic resize: edición básica de imagen online. Cortar, girar y disminuir su tam...
Pic resize: edición básica de imagen online. Cortar, girar y disminuir su tam...Pic resize: edición básica de imagen online. Cortar, girar y disminuir su tam...
Pic resize: edición básica de imagen online. Cortar, girar y disminuir su tam...
 
Libro diseno
Libro disenoLibro diseno
Libro diseno
 
Guia link de editores de imagen
Guia link de editores de imagenGuia link de editores de imagen
Guia link de editores de imagen
 
Composicion de paginas web
Composicion de paginas webComposicion de paginas web
Composicion de paginas web
 
La imagen
La imagenLa imagen
La imagen
 
2. uso de la imagen
2. uso de la imagen 2. uso de la imagen
2. uso de la imagen
 
Trabajo Practico - Unidad 4
Trabajo Practico - Unidad 4 Trabajo Practico - Unidad 4
Trabajo Practico - Unidad 4
 
T6 wiki
T6 wikiT6 wiki
T6 wiki
 
Como bajar el peso de una imagen para adaptar a la web en GIMP
Como bajar el peso de una imagen para adaptar a la web en GIMPComo bajar el peso de una imagen para adaptar a la web en GIMP
Como bajar el peso de una imagen para adaptar a la web en GIMP
 
Programas
ProgramasProgramas
Programas
 

Más de Uniminuto - SENA

Procesadores - Sergio Vásquez
Procesadores - Sergio VásquezProcesadores - Sergio Vásquez
Procesadores - Sergio Vásquez
Uniminuto - SENA
 

Más de Uniminuto - SENA (20)

Teoria del color
Teoria del colorTeoria del color
Teoria del color
 
diseño e imágenes web
diseño e imágenes webdiseño e imágenes web
diseño e imágenes web
 
diseño de paginas web
diseño de paginas webdiseño de paginas web
diseño de paginas web
 
Imagenes en paginas web
Imagenes en paginas webImagenes en paginas web
Imagenes en paginas web
 
Teoria del color
Teoria del colorTeoria del color
Teoria del color
 
Diseño Grafico
Diseño GraficoDiseño Grafico
Diseño Grafico
 
filtros de imagenes
filtros de imagenesfiltros de imagenes
filtros de imagenes
 
Diseño grafico en la web
Diseño grafico en la webDiseño grafico en la web
Diseño grafico en la web
 
Edición De Imágenes
Edición De ImágenesEdición De Imágenes
Edición De Imágenes
 
Filtros y Funciones Del Color
Filtros y Funciones Del ColorFiltros y Funciones Del Color
Filtros y Funciones Del Color
 
Efectos de imágenes
Efectos de imágenesEfectos de imágenes
Efectos de imágenes
 
Imágenes Desfragmentadas
Imágenes DesfragmentadasImágenes Desfragmentadas
Imágenes Desfragmentadas
 
Teoria del Color
Teoria del ColorTeoria del Color
Teoria del Color
 
Cavipetrol
CavipetrolCavipetrol
Cavipetrol
 
Edicion de imagenes
Edicion de imagenesEdicion de imagenes
Edicion de imagenes
 
Filtros y funciones del color - Sergio Vásquez
Filtros y funciones del color - Sergio VásquezFiltros y funciones del color - Sergio Vásquez
Filtros y funciones del color - Sergio Vásquez
 
Edicion de imagenes - Sergio Vásquez
Edicion de imagenes - Sergio VásquezEdicion de imagenes - Sergio Vásquez
Edicion de imagenes - Sergio Vásquez
 
Teoria del color - Sergio Vásquez
Teoria del color - Sergio VásquezTeoria del color - Sergio Vásquez
Teoria del color - Sergio Vásquez
 
Procesadores - Sergio Vásquez
Procesadores - Sergio VásquezProcesadores - Sergio Vásquez
Procesadores - Sergio Vásquez
 
Unidad de CD - Lina Sanchez
Unidad de CD - Lina SanchezUnidad de CD - Lina Sanchez
Unidad de CD - Lina Sanchez
 

Último

GUIA UNIDAD 3 costeo variable fce unc.docx
GUIA UNIDAD 3 costeo variable fce unc.docxGUIA UNIDAD 3 costeo variable fce unc.docx
GUIA UNIDAD 3 costeo variable fce unc.docx
AmyKleisinger
 
Hiperbilirrubinemia en el recién nacido.pptx
Hiperbilirrubinemia en el recién nacido.pptxHiperbilirrubinemia en el recién nacido.pptx
Hiperbilirrubinemia en el recién nacido.pptx
salazarsilverio074
 
senati-powerpoint_5TOS-_ALUMNOS (1).pptx
senati-powerpoint_5TOS-_ALUMNOS (1).pptxsenati-powerpoint_5TOS-_ALUMNOS (1).pptx
senati-powerpoint_5TOS-_ALUMNOS (1).pptx
nathalypaolaacostasu
 
CARPETA PEDAGOGICA 2024 ARITA.sadasdasddocx
CARPETA PEDAGOGICA 2024 ARITA.sadasdasddocxCARPETA PEDAGOGICA 2024 ARITA.sadasdasddocx
CARPETA PEDAGOGICA 2024 ARITA.sadasdasddocx
WILIANREATEGUI
 
Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...
Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...
Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...
MIGUELANGELLEGUIAGUZ
 
260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx
260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx
260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx
i7ingenieria
 
DIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptx
DIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptxDIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptx
DIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptx
7500222160
 

Último (20)

GUIA UNIDAD 3 costeo variable fce unc.docx
GUIA UNIDAD 3 costeo variable fce unc.docxGUIA UNIDAD 3 costeo variable fce unc.docx
GUIA UNIDAD 3 costeo variable fce unc.docx
 
Hiperbilirrubinemia en el recién nacido.pptx
Hiperbilirrubinemia en el recién nacido.pptxHiperbilirrubinemia en el recién nacido.pptx
Hiperbilirrubinemia en el recién nacido.pptx
 
CONSTITUCIÓN POLÍTICA DEL PERÚ al 25082023.pdf
CONSTITUCIÓN POLÍTICA DEL PERÚ al 25082023.pdfCONSTITUCIÓN POLÍTICA DEL PERÚ al 25082023.pdf
CONSTITUCIÓN POLÍTICA DEL PERÚ al 25082023.pdf
 
Contabilidad Gubernamental guia contable
Contabilidad Gubernamental guia contableContabilidad Gubernamental guia contable
Contabilidad Gubernamental guia contable
 
mapa-conceptual-evidencias-de-auditoria_compress.pdf
mapa-conceptual-evidencias-de-auditoria_compress.pdfmapa-conceptual-evidencias-de-auditoria_compress.pdf
mapa-conceptual-evidencias-de-auditoria_compress.pdf
 
Correcion del libro al medio hay sitio.pptx
Correcion del libro al medio hay sitio.pptxCorrecion del libro al medio hay sitio.pptx
Correcion del libro al medio hay sitio.pptx
 
senati-powerpoint_5TOS-_ALUMNOS (1).pptx
senati-powerpoint_5TOS-_ALUMNOS (1).pptxsenati-powerpoint_5TOS-_ALUMNOS (1).pptx
senati-powerpoint_5TOS-_ALUMNOS (1).pptx
 
4 Tipos de Empresa Sociedad colectiva.pptx
4 Tipos de Empresa Sociedad colectiva.pptx4 Tipos de Empresa Sociedad colectiva.pptx
4 Tipos de Empresa Sociedad colectiva.pptx
 
Presentacion encuentra tu creatividad papel azul.pdf
Presentacion encuentra tu creatividad papel azul.pdfPresentacion encuentra tu creatividad papel azul.pdf
Presentacion encuentra tu creatividad papel azul.pdf
 
2024 - 04 PPT Directiva para la formalizacion, sustento y registro del gasto ...
2024 - 04 PPT Directiva para la formalizacion, sustento y registro del gasto ...2024 - 04 PPT Directiva para la formalizacion, sustento y registro del gasto ...
2024 - 04 PPT Directiva para la formalizacion, sustento y registro del gasto ...
 
HIGIENE_POSTURAL-_MANEJO_DE_CARGA1compr.pptx
HIGIENE_POSTURAL-_MANEJO_DE_CARGA1compr.pptxHIGIENE_POSTURAL-_MANEJO_DE_CARGA1compr.pptx
HIGIENE_POSTURAL-_MANEJO_DE_CARGA1compr.pptx
 
Las sociedades anónimas en el Perú , de acuerdo a la Ley general de sociedades
Las sociedades anónimas en el Perú , de acuerdo a la Ley general de sociedadesLas sociedades anónimas en el Perú , de acuerdo a la Ley general de sociedades
Las sociedades anónimas en el Perú , de acuerdo a la Ley general de sociedades
 
CARPETA PEDAGOGICA 2024 ARITA.sadasdasddocx
CARPETA PEDAGOGICA 2024 ARITA.sadasdasddocxCARPETA PEDAGOGICA 2024 ARITA.sadasdasddocx
CARPETA PEDAGOGICA 2024 ARITA.sadasdasddocx
 
EL REFERENDO para una exposición de sociales
EL REFERENDO para una exposición de socialesEL REFERENDO para una exposición de sociales
EL REFERENDO para una exposición de sociales
 
liderazgo guia.pdf.............................
liderazgo guia.pdf.............................liderazgo guia.pdf.............................
liderazgo guia.pdf.............................
 
Sostenibilidad y continuidad huamcoli robin-cristian.pptx
Sostenibilidad y continuidad huamcoli robin-cristian.pptxSostenibilidad y continuidad huamcoli robin-cristian.pptx
Sostenibilidad y continuidad huamcoli robin-cristian.pptx
 
Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...
Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...
Tesis_liderazgo_desempeño_laboral_colaboradores_cooperativa_agraria_rutas_Inc...
 
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBREDISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE
DISEÑO DE ESTRATEGIAS EN MOMENTOS DE INCERTIDUMBRE
 
260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx
260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx
260813887-diagrama-de-flujo-de-proceso-de-esparrago-fresco-verde.pptx
 
DIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptx
DIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptxDIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptx
DIAPOSITIVAS LIDERAZGO Y GESTION INTERGENERACION (3).pptx
 

Imagenes en paginas web

  • 1.
  • 2. Bien sea para ilustrar la información contenida en nuestras páginas o para integrar un largo texto o, por que no, por cuestiones estéticas, es prácticamente imposible evitar colocar alguna que otra imagen en nuestras páginas. Al emplear las imágenes debemos guiarnos por unas cuantas reglas básicas: Procurar que las imágenes sirvan para algo, que den información. Esta es una de las razones por las que debemos usar los atributos ALT. No pasarnos. La página no debe pesar demasiado. Un visitante que ve como la página tarda en cargarse más de 15 o 20 seg lo más probable es que se vaya y, lo que es peor, que no vuelva. Procurar un equilibrio entre tamaño del archivo de imagen y calidad de ésta. A veces una imagen muy grande requiere una compresión tal que al final tenemos una calidad pésima. En estos casos debemos plantearnos el tipo de imagen a usar.
  • 3. Fíjate en las imágenes mostradas en tu monitor. Estas imágenes están formadas por unos puntos muy pequeños llamados pixel. Si tu monitor fuera de aquellos en blanco y negro utilizados en la época de los pioneros, cada pixel podía estar encendido (color blanco) o apagado (color negro). En los monitores de color actuales cada pixel o punto de pantalla no representa esos dos únicos colores .
  • 4. Usando este formato pueden almacenarse imágenes de hasta 24 bits de color. Es recomendable para fotografías o imágenes con degradados. Cualquier programa editor de gráficos permite guardar una imagen en este formato con diferentes grados de compresión. Lógicamente cuanto más comprimamos la imagen menor es su calidad. Si queremos imágenes de alta calidad debemos soportar archivos de tamaños elevados. Recientemente ha aparecido una variación de este formato denominada JP2 o JPG2000, especialmente destinado a la red. Pero aún no es admitido por todos los exploradores. Este otro formato se usa para imágenes con hasta 256 colores ( 8 bits de color). Frente a esta limitación nos ofrece la posibilidad de definir zonas transparentes y además existe una variante que permite imágenes animadas, muy útil para llamar la atención sobre algo en concreto como puedan ser las novedades de nuestro sitio o un anuncio de algún servicio. Pero conviene no abusar de las animaciones, son archivos muy grandes y pueden llegar a resultar pesados. En nuestro sitio Gifsanimados tienes una excelente colección para elegir
  • 5. El formato PNG es el gran desconocido de internet, pese a su magnífico comportamiento. Realmente existen varios formatos PNG: PNG8, que almacena imágenes de hasta 256 colores, PNG24 para imágenes de 24 bits y PNG32 para imágenes de 32 bits. Permite transparencias como los GIF y transparencia graduada (colores cuya opacidad van desde el 0% hasta el 100%), aunque los exploradores no aprovechan esta utilísima propiedad. Por contra no admiten animaciones.
  • 6. Ese otro método de almacenar imágenes se basa en encontrar funciones matemáticas para representar la imagen completa. Este método no sólo se usa para figuras regulares (rectángulos, cuadrados, círculos) también se puede usar para imágenes tipo fotografía. Si alguno de los que lee estas líneas ha oído hablar de una cosa llamada figuras de Mandelbrot sabrá que es eso de encontrar una función matemática para representar la formas tan poco regulares como un paisaje de montaña y similares. Estas imágenes dan una calidad excelente y permiten ser escaladas (modificar su tamaño) sin pérdida de calidad. Un ejemplo son los archivos DXF y otros usados en programas CAD. Estos formatos no se usan en las páginas web.
  • 7. 1. USA LA RESOLUCIÓN ADECUADA Primero, esto se relativiza mucho si usas un buen ancho de banda para tu servidor web (es decir, un buen hosting), cosa que deberías estar haciendo de todos modos. Así el servidor no se resentirá fácilmente con páginas de algo más de tamaño. Por otra parte, las imágenes que subas deberían estar optimizadas para tener el mínimo tamaño posible, sin pérdidas de calidad apreciables. La optimización más básica y eficaz es adecuar la resolución de la imagen a su uso en una web. 2. USA EL FORMATO ADECUADO Una cosa que observo que prácticamente la totalidad de los bloggers hace mal es no usar el formato de imagen más adecuado según el uso al que se quiera destinar esa imagen. Hay tres formatos principales que representan prácticamente al 100% de los formatos usados en la web y que son los formatos JPG, PNG y GIF.
  • 8. 3. OPTIMIZA LA IMAGEN (COLORES, NITIDEZ ) Optimizar una imagen no consiste solamente reducir sus dimensiones, sino también en aplicar algoritmos inteligentes para (p . E . para conseguir una nitidez óptima de las imágenes reducidas), escoger el formato adecuado como he comentado arriba y reducir su paleta de colores. 4. USA LAS IMÁGENES PARA ESTIMULAR AL LECTOR Vista la parte más técnica de cómo usar correctamente las imágenes en un sitio web, hablemos de cómo usarlas para aumentar la afluencia de lectores a tu sitio. No se puede insistir lo suficiente en el gran potencial que tienen las imágenes para estimular al lector y captar su atención, muy pocos blogs lo aprovechan. En este mismo blog aún tenemos tarea por delante porque ciertamente tampoco es una cosa que se implementa de un día para otro y requiere tener claro cómo hacerlo que es lo que voy a detallar en los siguientes puntos. 5. MULTIPLICA EL IMPACTO EN LAS REDES SOCIALES Así que vamos a empezar por unas técnicas que aún muy poco gente utiliza pero, sin embargo, son extraordinariamente eficaces si las sabes implementar bien. Y es que en los últimos años han aparecido una serie de nuevas funcionalidades en las redes sociales que permiten aprovechar mucho mejor el potencial inherente a las imágenes para captar la atención del lector en estos
  • 9. 6. PROVECHA LAS IMÁGENES PARA EL SEO Mucha gente no es consciente de que no sólo se posiciona el contenido, sino también las imágenes. De hecho, Google considera entre sus 200 factores de posicionamiento también aquellos relacionados con las imágenes. 7. USA FUENTES DE CALIDAD Y RESPETA LOS DERECHOS DE AUTOR La última técnica, o mejor dicho, principio en este caso es que cuides mucho la calidad de tus imágenes. Si aplicas las técnicas anteriores con imágenes de baja calidad éstas perderán gran parte de su eficacia o incluso la perderán por completo. Calidad quiere decir que la imagen sea buena, creativa, capaz de llamar la atención (positivamente), etc. y tenga un buen acabo (se vea nítida, etc.)