Entendiendo el rendimiento

1

Todo lo que aprenderás sobre optimización web

2

¿Vale el esfuerzo optimizar un sitio web?

3

¿Cuándo realmente un sitio es rápido o lento?

Antes de optimizar...

4

Aprendiendo a medir

5

User Performance Metrics

6

Nuestro proyecto

Crítical Rendering Path

7

Etapas de render del navegador

8

Network waterfall y recursos que bloquean el navegador

9

Priorización de recursos

10

Preloading y prefetching de recursos

11

Fases Paint y Layout del Critical Render Path

CSS

12

Detectando Paints costosos y optimizando animaciones

13

Bloqueos y complejidad en selectores

WebFonts

14

WebFonts y su impacto en redimiento

Imágenes, Iconos y SVG

15

Imágenes, formato y compresión

16

Imágenes y compresión

17

¿WebFont, Imagen o SVG?

18

Técnicas avanzadas con Lazy Loading

19

Técnicas avanzadas con Responsive Loading

Aplicaciones JavaScript

20

JavaScript y aplicaciones modernas y Utilizando un servidor de producción

21

Analizando el bundle de la aplicación

22

Reduciendo el tamaño del bundle

23

Code Splitting

24

Lazy Module Loading

25

Llevando los listeners a otro nivel

26

Instalando Modal video

27

Lazy loading del modal

28

Moviendo la carga de rendering hacia el servidor: Server Side Rendering

29

Aplicando SSR

30

Pre-renderizando el contenido: Static Generation

Caché

31

Cómo funciona el Caché de recursos y CDN

32

Deploy en Netlify y automatización de contenido en GitHub Actions

33

Aplicando Github Actions

34

Interceptando los requests del navegador con Service Workers

Performance Budget

35

Performance budget y auditorias automatizadas

36

Automatizando una auditoría con Lighthouse CI

37

Medidas reales y monitoreo constante

Conclusiones

38

Conclusiones

No tienes acceso a esta clase

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

Imágenes, formato y compresión

15/38
Recursos

Aportes 9

Preguntas 3

Ordenar por:

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

Las imágenes son una de las formas mas simples y más seguras en la que podemos reducir el tamaño de nuestras páginas web.

Las imágenes por lo general se recomienda que pesen 70Kb sin embargo cuando vamos a mirar a lo largo de la historia el tamaño de las imágenes en un sitio web ha crecido en dispositivos móviles hasta 900Kb y en el escritorio hasta 1Mb.

Existen diferentes maneras de reducir el peso de las imágenes: Desde versiones online, hasta API’s o servicios de terceros que nos ayudan con esta reducción.

TinyPNG Es una herramienta online que te permite cargar imágenes para reducir el peso. Y como API’s tenemos a Cloudinary, que es un hosting de media que te ayuda a optimizar tus imágenes sin que te estés preocupando, entre otros como Netlify, y la misma API de TinyPNG.

Pero También podemos optimizar nuestras imágenes desde nuestro código usando herramientas de empaquetado como Webpack, Grunt, Gulp, etc.

Con las API’s y con las herramientas de empaquetado no tenemos que preocuparnos de hacer la optimización de las imágenes de manera manual.

<h3>Formatos</h3>

Como desarrolladores debemos conocer la diferencia de formato de imágens que existen, y en que caso utilizar uno u otro.

  • GIF.
  • PNG & PNG-8
  • JPG

GIF Todos lo conocemos porque siempre que pensamos en una imagen animada, pensamos en GIF y en Efecto es el único formato que nos permite animar imágenes. Pero no solo nos sirve para animar. GIF es un formato super liviano que solo nos permite tener 256 colores, y es buenísimo cuando nuestras imágenes son muy simples y pequeñas porque nos va a dar un formato de compresión genial.

PNG-8 Trae todo lo que ya trae GIF pero nos permite tener transparencias.

PNG - PNG24 Trae todo lo que PNG-8 ofrece pero con colores ilimitados, nos permite manejar degradados, Es decir: no solo maneja dos colores, sino toda la gama de colores que hay entre un color y otro. Entonces PNG es un formato optimo para manejar millones de colores como por ejemplo los degradados.

JPG Es el formato perfecto para fotografías, siempre que hablemos de fotografías debe estar en nuestra mente el formato JPG. La única diferencia entre JPG y PNG es la transparencia, porque al igual que PNG, JPG tenemos a disposición todos los millones de colores disponibles en una pantalla, y todos los degradados.

JPG tiene otra cualidad y es que permite la carga de imágenes en modo no progresivo y en modo progresivo.

Modo NO progresivo.

Modo progresivo.

🖼️ Imágenes, formato y compresión

<h4>Ideas/conceptos claves</h4>

GIF es el único formato que nos permite animar imágenes

PNG-8 utiliza el color de 8 bits. Al igual que el formato GIF, el formato PNG-8 comprime eficazmente áreas de color uniforme a la vez que mantiene los detalles nítidos, como los que hay en líneas, logotipos o texto.

JPG es un formato de compresión de imágenes, tanto en color como en escala de grises, con alta calidad.

<h4>Recursos</h4>

TinyPNG - Compress PNG images while preserving transparency

Photopea | Online Photo Editor

<h4>Apuntes</h4>
  • Las imágenes son las formas es la forma más fácil, y segura, de reducir el tamaño de una pagina
  • Se recomienda que pesen 70 kb, pero con el tiempo en los mobiles creció en promedio hasta 900 kb y en escritorio hasta 1 MB
<h3>Reducir peso de imágenes</h3>

Only

  • TinyPNG

API

  • Cloudinary
  • Netlify
  • TinyPNG

Dev Flow

  • Webpack
  • Grunt
  • Gulp
  • post-commit
<h3>Formatos de compresión</h3>

Los más populares

  • GIF
  • PNG (y PNG-8)
  • JPG
<h4>GIF</h4>
  • Es un formato liviano
  • 256 colores
  • No degradados
  • Perfecto cuando hay pocos colores, colores planos y sin transparencia
<h4>PNG-8</h4>
  • Nos da todas las ventajas de GIF + transparencias
  • Perfecto para íconos y algunos logos
<h4>PNG (24)</h4>
  • PNG-8 + colores ilimitados
  • imágenes con degradados o muchos colores con transparencia
<h4>JPG o JPEG</h4>
  • Nos sirve para fotografías
  • Millones de colores
  • Degradados
  • Sin transparencia
  • Tiene dos modos de progresión de carga
    • Progresivo
    • No progresivo
  • Siempre sera bueno dar un JPG progresivo

RESUMEN: Las imágenes son una manera fácil y segura de optimizar los sitios web, ya que podemos analizar como las estamos usando y podemos utilizar herramientas ya sea para reducir el tamaño en medida del mismo o para optimizar el peso que tiene.

Amé esta clase.

Es recomendable usar formato svg o en que casos se debe usar?

personalmente uso webp.

  • Por lo general maximo 70Kb en el peso de nuestras imagenes

  • TinyPNG : Permite cargar imágenes para reducir el peso.

  • Cloudinary : Hosting de media que te ayuda a optimizar tus imágenes.

  • Netlify
    .

  • GIF : Formato que nos permite animar imágenes.

PNG-8 Trae todo lo que ya trae GIF pero tiene transparencias.

  • PNG - PNG24 : formato optimo para manejar millones de colores como por ejemplo los degradados.

  • JPG : Formato perfecto para fotografías. Permite la carga de imágenes en modo progresivo

KiloWatts ? Escuche bien 😉

Muchas veces temrino usando imagemagick para convertir y cambiar de tamaño las imagenes, mucho mas rapido y con un comando puedes aplicar esto a muchas imagenes.

👌