Web Developer Fundamentals

1

Qué aprenderás sobre HTML y CSS

2

¿Qué es el Frontend?

3

¿Qué es Backend?

4

¿Qué es Full Stack?

5

Páginas Estáticas vs. Dinámicas

Quiz: Web Developer Fundamentals

HTML

6

HTML: anatomía de una página web

7

Index y su estructura básica: head

8

Index y su estructura básica: body

9

Reto: crea tu lista de compras del supermercado

10

Anatomía de una etiqueta de HTML

Quiz: HTML

Etiquetas multimedia

11

Tipos de imágenes

12

Optimización de imágenes

13

Etiqueta img

14

Etiqueta figure

15

Etiqueta video

Quiz: Etiquetas multimedia

Formularios

16

Etiqueta form e input

17

Calendar

18

Autocomplete y require

19

Select

20

Input type submit vs. Button tag

Quiz: Formularios

CSS

21

¿Qué es CSS?

22

¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID

23

Pseudo clases y pseudo elementos

24

Anatomía de una regla de CSS

25

Modelo de caja

26

Herencia

27

Especificidad en selectores

28

Demo de especificidad y orden en selectores

29

Más sobre selectores

30

Combinadores: Adjacent Siblings (combinators)

31

Combinadores: General Sibling

32

Combinadores: Hijo y Descendiente

33

Medidas

34

Medidas EM

35

Medidas REM

36

Max/Min width

37

Position

38

Display

39

Desafío: Layout 1

40

Display Flex

41

Flexbox layouts

42

Variables

43

Web fonts

Quiz: CSS

Responsive Design

44

Responsive design: media queries

45

Estrategias de responsive: mostly fluid

46

Implementando mostly fluid

47

Layout shifter CSS

48

Column drop

49

Buenas prácticas y ejemplos de responsive

50

Imágenes responsive

Quiz: Responsive Design

Accesibilidad

51

Semántica

52

Textos

53

Labels, alt y title

Próximos pasos

54

Próximos pasos como Web Developer

55

Bonus: tabla de etiquetas HTML

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Optimización de imágenes

12/55
Recursos

Aportes 244

Preguntas 50

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Tamaño máximo recomendado para una imágen:

  • 70kb
    .
    Herramientas para optimizar imágenes:

  • Tiny PNG: Comprime el tamaño de una imagen, para hacerla más ligera.

  • Verefix: Elimina los metadatos de una imagen, para reducir su tamaño.

Compañeros les comparto las paginas que yo uso en mis proyectos.
Compressor.io Comprime sin perder calidad (mejor todavia Tinypng)
Picresize Comprime y recorta el tamaño de la imagen
Convertio convierte jpg, png a svg (esta pagina es muy buena puede convertir de todo a otros formatos es gratis, chequenla y comenten que les parecio )

Saludos ✌🏻

Y de donde descargar imágenes ??? Pues te traigo un pack de páginas donde puedes descargar imágenes libre de copyright, en algunas puedes elegir el tamaño de la imagen 😉 🚀🚀🚀🚀🚀

Pexels
Pixabay
Freerange
Realistic Shots
PicJumbo
Magdeleine
Creativecommons
Freejpg

Compresores de imágenes:

Optimizilla
IloveIMG

Optimizar nuestro sitio web con las imagenes o iframes, es colocando en la etiqueta img el atributo loading con el valor lazy.

<img loading="lazy"  src="manzana.png" alt="People">

Atributo loading
El atributo loading permite al navegador retrasar la carga de imáges y de iframes que están fuera de pantalla, hasta que el usuario haga scroll cerca de ellas. Éste atributo soporta 3 valores:

  • lazy: Retrasa la carga de la imagen hasta que el usuario alcanza con el scroll una distancia calculada desde el viewport.
  • eager: Carga la imagen inmediatamente, sin importar donde está situada o colocada en la pantalla. En resumen, no hace lazy-loading.
  • auto: Implementa el comportamiento por defecto del navegador para la carga de las imágenes. En resumen, poner auto es lo mismo que no poner el atributo loading.

RECOMENDACIÓN PERSONAL
Yo he usado estas páginas y no se logra optimizar a esta capacidad promedio de 70kb, pero usando Photoshop cambiando el ancho de la imagen y guardandolo como una imagen para web, he podido optimizar de 12MB a 92KB, que en mí opinión ha sido mejor que usar algún sitio en internet.

Hay otra pagina que te permite reducir el peso a la imagenes y es mucho mas visual que Tiny PNG, ademas te permite elegir varios formatos y reescalar.

Se llama Squoosh y la puedes ubicar acá: Squoosh

Existen muchas opciones para optimizar las imágenes, pero Tiny PNG Tiene un panda, eso ya son puntos extras

Recomiendo el curso de optimización de carga de sitios Web de Leonidas Esteban, donde también vemos esto de comprimir imágenes

https://platzi.com/clases/optimizacion-web/

También pueden hacer uso de https://squoosh.app

Esta es la aplicación oficial de Google para optimizar imágenes

Platzi dentro de platzi

En promedio una imagen debe de pesar alrededor de 70 kb a 100 kb, no puede pasar más de 1 Mb. Tienes dos opciones para cumplir esto:
• Mejora el tamaño de tus imágenes: Tiny PNG, con esta página tú puedes agarrar una imagen, puedes ponerla en la pagina y la pagina se va a encargar de comprimirla y regresarte ya con un tamaño mucho más óptimo. Es mucho más funcional con imágenes JPG.
• Retira metadatos de tus imágenes: Verexif: cuando tu tomas una fotografía con tu celular, el celular le agrega ciertos datos que se llama metadatos a esta imagen, esta fotografía va llevar como metadatos la hora en la que se tomó, el lugar en donde se tomó y otro tipo de información que tu celular le va a agregar a esta imagen, lo que tenemos que hacer es quitarle esos datos. Así que en esta pagina cuando tu tomes una fotografía con el celular o te pasen una fotografía que viene de alguna cámara tu puedes limpiar esos metadatos para quitar ese peso extra que en tu proyecto no lo vas a necesitar.

Recomiento el formato WebP de google cuando quieran reducir aun mas la imagenes.
Este formato obtiene un ahorro de 25 a 35% con respecto a JPG/JPEG y 26% en PNG con la misma calidad de imagen.
Es ideal cuando tu sitio web usa muchas imagenes.

Online Converter es una herramienta para convirtir a WebP
https://imagen.online-convert.com/es/convertir-a-webp

Por aquí les dejo mis apuntes:
Si quieren acceder a todos los apuntes, e importar la hoja de Notion a sus Notion’s, les dejo el link aquí

https://www.remove.bg/

Este sitio le quita el fondo a imágenes, para que queden con transparencia

Chicos también me gustaría añadir que puden optimizar las imagenes en photoshop a través de la opción GUARDAR PARA WEB, en el menu superior de Photoshop en la parte de “Exportar” encuentran la opción.

La herramienta permite ajustar la calidad, resolución, color, tamaño etc… Muy buena

Antes, mi peso era de 3Mb, pero todo se soluciono hasta que decidi cambiar mi estilo de vida. Fui al GYM Platzi y ahora peso 70kb, excelente servicio.

Página recomendada para compresión de imágenes

https://compressjpeg.com/

¿Qué permite?

  • Comprime imágenes JPG, PNG, GIF y SVG
  • Convierte formatos (ejemplo, pasa una png a jpg)
  • Recortar imágenes
  • Cambiar tamaño de imágenes
  • Optmizar formato Lossy, Lossless y más.

Acá les dejo otra opción, también funciona muy bien con .png y .jpg 👉🏼 Compressor.io

Es increíble la calidad de los cursos de Platzi! De 4 cursos previos de HTML y CSS que he tomado, ninguno menciona todas estas peculiaridades tan profesionales como las razones detrás de cada meta, los pesos ideales de las imágenes, como optimizarlas y demás, solo te dicen que poner y como hacerlo, pero no un entendimiento real como en este caso. Muchas gracias, Platzi!

🤣🤣🤣 Me encanta que Platzi no pierde una oportunidad para promocionar los cursos

✨ El promedio optimo del peso de las imágenes debe ser de 70 KB

Y si se convierte la imagen a formato .webp no es mejor?

Información completa donde podemos ver como optimizar las imágenes:
https://www.tuposicionamientoweb.net/optimizar-imagenes-web/

Hola! Yo uso esta página para comprimir imágenes y más herramientas: https://www.iloveimg.com/es

  • OPTIMIZACION DE IMAGENES
    • tamaño promedio de una imagen = 70 KB yl rango promedio es de entre [70KB y 100KB]
    • Optimizando imagen
      • Tiny PNG
        • La pagina comprime y me la regresa en tamaño mas optimo
      • Verefix
        • retira metadatos (hora, fecha) ya que no las necesitamos porque son peso extra

Este es el promedio del peso de una imagen; para cuando se vaya a subir en la página web.

Jajaja esta clase estaba buenísima!!
Yo no sabia que habían paginas para optimizar imágenes. Y yo que le tomo pantallazos a la imagen de 10 M lo edito en Paint y si la imagen sigue muy pesada alejo el zoom tomo pantallazo y vuelvo a editar… Servirá como optimizado de Imagenes?

aqui otra herramienta fantastica de google
https://squoosh.app/

Excelente entender todos los conceptos de formatos y cargado de imagenes en nuestros desarrollos web, este curso es muy profesional.

Tambien sirve GIMP

Estuve revisando los aportes de los compañeros y veo que no recomendaron iloveimg.

Les dejo el link

No solo sirve para comprimir imágenes, tiene herramientas como recortar imágenes, cambiar el tamaño, el peso, pasar de HTML a JPG o SVG y más! Recomendadisima.

También puedes convertir a webp la imagen para que pese mínimo 1 KB

Chicos, otra pagina para comprimir imagenes muy buena es https://squoosh.app/, esta herramienta es de google y te permite seleccionar hasta el formato de la imagen comprimida.

Un anuncio de platzi en el navegador de un profesor de platzi visto en una clase de un curso de platzi

Opciones para trabajar las imágenes:
.Mejora el tamaño de tus imágenes
.Tiny PNG
.Retira metadatos de tus imágenes
.Verexit

Yo en Photoshop, acostumbro a exportarlos para WEB, antes de usar este truco, las imágenes para banners me pesaban 1.5 MB, pero ahora me pesan sólo 200 kb o así (no son los 70 kb, pero son banners que abarcan toda la primer pantalla de las páginas web, así que creo que no está muy manchado)

Con Tinypng Analizer pueden analizar su sitio web.

excelente, he visto algunos cursos en yt donde te explican como colocar imagenes en html pero no la importancia del peso de las imagenes al subirlas a tu pagina web

Adobe photoshop y otras que trabajen con imágenes, tienen la función “Guardar para Web” que muestra una vista preliminar y cuanto pesaría nuestro archivo según el formato que le demos y el ratio de compresión que queramos asignar

Hola amigas y amigos. Una pregunta, me recomendaron no retirar los metadatos de imágenes de una plataforma e-commerce porque esto ayuda al posicionamiento en buscadores. ¿Alguien sabe si esto es verdad? Si el retirarlos afecta el SEO.

En esta clase aprendimos cuál es el tamaño estándar para una imagen en un sitio web, el cuál es entre 70 kb y 100 kb. Además el profe nos proporciona unas herramientas que nos son muy útiles para optimizar imágenes y lograr reducir el tamaño de estas para que puedan cargar mucho más rápido en nuestra página. Estas herramientas son:

  • Tiny PNG: Ayuda a modificar el tamaño de imágenes a uno mucho más optimo.

  • Verifix: Elimina los metadatos que puedan traer las imágenes (como fecha y ubicación) para reducir su tamaño.

los datos EXIF ayudan a Google a comprender las imágenes

Ojo con quitar los metadatos EXIF, en esta información indica que va en contra de la semántica y de lo que le gusta a Google para posicionar tu página.

en promedio una imagen no deberia pesar mas de 70 kb pregunta de examen
.
vengo del futuro #nuncaparesdeaprender

Tiny PNG => reduce el tamano de tus imagenes comprimiendolas!
Verexif => reduce el tamano de imagenes **Tomadas con camaras de telefonos **

El tamaño promedio debe ser 70KB
Para optimizar:
Tiny PNG → Mejora el tamaño de las imágenes
https://tinypng.com/
Verexif -> Retira metadatos de tus images
https://www.verexif.com/

Me parece muy interesante este vídeo sobre las posibilidades de reducir una imágen con TinyPNG.
Espero que os guste y os abra un mundo de posibilidades para reducir nuestras imágenes.
https://youtu.be/aZ86hlTp5Z8

No sabia lo del peso de las imagenes, de ahora en adelante aplicare esta recomendacion

que bueno asi esta bien

En mi vida laboral me tope con la necesidad de reducir el peso de las imágenes en grandes cantidades, al igual que renombrarlas en grupo y ponerles marca de agua, así que despues de buscar en internet encontré un programa portable gratuito que se llama FSResizer, me funcionó bastante bien se los dejo como dato curioso.

11. Mis apuntes sobre: “Optimización de imágenes”

El tamaño máximo promedio que debería tener una imagen es de 100Kb a 70KB.

Opciones para trabajar las imágenes:

Herramientas para optimizar imágenes:

  • Tiny PNG: Comprime el tamaño de una imagen, para hacerla más ligera.
  • Verefix: Elimina los metadatos de una imagen, para reducir su tamaño.

HERRAMIENTA PARA COMPRIMIR IMAGENES
https://compressor.io/

Anotaciones:

Muy buena información

Notas
Los formatos de imágenes que no pierden calidad son imágenes o formatos muy pesados de 3 megas o mucho más.
No es óptimo cargar una imagen en nuestro proyecto web que pesa 3 megas (tardaría mucho tiempo en renderizar).

¿Cuál es el tamaño óptimo para subir una imagen?
En promedio una imagen debe de pesar alrededor de 70 kb.

Opciones para trabajar las imágenes

Mejorar el tamaño de tus imágenes:
Tiny PNG
Retirar metadatos de tus imágenes:
Verexif

¿Qué metadatos tienen las imágenes?
Hora, lugar otro tipo de información que el celular agrega.

Exite otro formato de imagenes especificamente para la web llamado WebP, fue desarrollado y presentado por Google.
.
Es una propuesta interesante porque soporta ambos algoritmos de compresión (Lossy y Lossless) además de que este tipo de imagenes suelen ser un 26% mas ligeras que PNG y entre un 25-34% mas ligeras que JPEG.

puedes leer acerca de este formato aquí.

En esta pate de optimización de imagenes uso varios metodos.
uso esta pagina iloveimg, otro es usar facebook para imagenes o videos ya que poseen un algoritmo de compresion bueno, creo un album y las subo, se procesan y los descargo bastante livianos, si todavia estan muy pesados (>100 KB) los paso por iloveimg o cualquier otra pagina que me permita comprimir mas.

muchas veces 70kb no es posible, si tenés un slider fullscreen es muy difícil que el jpg pese menos de 70! a veces es inevitable que pese menos de 150kb

Mi resumen:
Tamaño promedio de 70KB - No puede pasar 1MB
Tiny PNG : comprime el tamaño de las impagenes
Verefix: retira los metadatos de las imágenes, para reducir el tamaño

![](

De los mejores cursos de platzi

Valioso aporte el portal tinyPNG

muchas gracias por su explicacion, excelente!

Clase 12. Optimización de imágenes
- No es optimo cargar una foto de 3MB
- ¿Cuál es el tamaño optimo?
- Promedio 70 KB
- ¿Cómo optimizo la imagen? (Comprimir)
1. Mejora el tamaño de tus imgs
- tinypng
|
2. Retira metadatos de tus imágenes (Fechas, Geolocalización)
- verexif

Casi siempre mejor comprimir a Webp

Para mejorar el tamaño de las imágenes es mas recomendable Tiny PNG

RESUMEN CLASE 12:
OPTIMIZACION DE IMAGENES

Una imagen debe pesar no mas de 70 KB - 100 KB

I.- OPCIONES PARA TRABAJAR LAS IMAGENES

  • Mejora el tamaño de tus imágenes

  • Retira metadatos de tus imágenes

Información resumida de esta clase
#EstudiantesDePlatzi

  • Renderizar = Se usa en la jerga informática para referirse al proceso de generar imagen Fotorrealista

  • El tamaño óptimo de una imagen es de 70 kb y la idea es buscar optimizar esto

  • Existen herramientas que me permiten reducir el peso de nuestra imagen

  • Con verixif puedo eliminar meta datos que trae una imagen

  • Si la imagen tarda en cargar genera una mala experiencia de usuario

On average an image has to weigh 70 KB
• We can use https://tinypng.com/ for reduce the weigh
• We can also remove metadata from your photos that were taken with a cell phone https://www.verexif.com/

Weight

The weight recommended for an image it’s 70KB.

Tools to optimize images

  • Tiny PNG:  Compress an image size to make it light.
  • Verefix: Remove metadata from an image, to reduce its size.

También se puede utilizar gulp-imagemin para reducir el peso de la imagen de forma “automática” sin tener que pasar una por una, también he escuchado que la mejor extensión para imágenes de uso en la web es .webp, no se que tan cierto sea esto ultimo.

Tamaño máximo recomendado para una imágen:
• 70kb
Herramientas para optimizar imágenes:
• Tiny PNG: Comprime el tamaño de una imagen, para hacerla más ligera.
• Verefix: Elimina los metadatos de una imagen, para reducir su tamaño.

aqui se quitan los metadatos de las imagenes para comprimirlas y optmizar la velocidad de la pagina

Me hacia falta conocer una forma menos artesanal de optimizar imágenes. Yo lo que hacia era copiarla y pegarla como imagen en un archivo de powerpoint y después ya la podía guardar desde este archivo con menos peso.

Es muy iImportante saber manejar las imágenes, el peso de nuestro proyecto debe ser optimizado lo máximo posible

Excelente data!!!

70 kB

El tamaño SI importa!

esto de la optimización es algo nuevo ya que anteriormente estuve en cursos FREE y no vi nada de esto … El punto es que pensé omitir el curso para ir a algo mas avanzado ----

El tamaño Maximo de una imagen es de 70 kb

tiny png https://tinypng.com/

Verexif elimina los metadatos de la imagen, sobre todo que vienen de cámaras o de un celular siempre pasarlas por verexif
https://www.verexif.com/

No sabía como se podían optimizar las imágenes. ♥

Tamaño máximo recomendado para una imágen: 70kb . Herramientas para optimizar imágenes: Tiny PNG: Comprime el tamaño de una imagen, para hacerla más ligera. Verefix: Elimina los metadatos de una imagen, para reducir su tamaño.

alejandro ramois concuerdo contigo

Otra forma de optimizar la carga de las imágenes, es mediante el uso de un CDN (Content Delivery Network).

NOTA : Recuerda que es muy importante optimizar nuestras imágenes para que la página pueda cargar mas rápido y le demos una mejor experiencia al usuario.

**Un sitio todavía mejor para optimizar imágenes es **https://imagecompressor.com/es/

Pues yo para reducir tamaño de los jpg uso GIMP que con una barrita me permite ajustar lo mejor de calidad para el tamaño mas mínimo (y si GIMP no es el mas pro ni el mas facil de usar, lo sé) y definitivamente para los mejores PNG sin transparencia uso paint (sorry for MacOS and Linux users). PAINt reduce mucho mas que cualquier otro programa el tamaño de los archivos, no se como, ni porque, pero hace un gran trabajo!

Recuerden amigos: el tamaño sí importa

para mejorar las imagenes y videos la app de Remini es buena opción

AVI
Desarrollado por Microsoft, el formato AVI ofrece la más alta calidad, pero también con grandes tamaños de archivo.

El formato JPG es el más adecuado para las fotografías e imágenes realistas que en su formato de origen ocuparían varios megabytes, ya que, al comprimirse, pueden ocupar unos pocos cientos de Kb o menos.

Les dejo una pequeño soft que utilizo en mis proyectos.

Se llama RIOT y puedes descargarlo en el siguiente enlace: RIOT Optimizer

Además que puedes configurar los parámetros de salida de acuerdo a como necesites el archivo final.

¡Espero les sea útil!