Esto es un truco muy interesante en ciertos casos. Coge una imagen y la convierte en código, el cual es puede poner en un html para mostrar directamente la imagen. Os enseñamos cuando y cómo hacerlo.
Cuándo es interesante convertir imágenes a Base64.
Básicamente en 3 situaciones.
- En firmas de correo que admitan html. El poner la imagen ahí como código y que no tenga que buscarla de otro sitio reduce la posibilidad de spam y facilita la carga. En ciertas ocasiones es la única manera porque no permiten subir imágenes (firma de Gmail).
- En páginas web que tengamos que poner imágenes pero no nos deje cargarlas de sitios de terceros o subirlas porque esté restringido.
- En tu página web cuando quieres reducir la carga de imágenes. Cuando una web abre una imagen el código es como este:<img src=”….” title=”….” alt=”……..” />La web abre un proceso para cargar esa imagen desde ese src y esto gasta tiempo y procesador. Las imagenes en Base64 se cargan “incrustadas”, directamente desde código, y no tiene que abrir otro proceso ni gastar tanto tiempo.
Cuando no es interesante.
Las imágenes en Base64 aumentan el código, y no permiten etiquetas para SEO. Así que no es bueno hacerlo en todas. Sólo en ciertas como los favicon, iconos, logos pequeños, ciertos fondos en css o cualquiera que tarde mucho. También si se cargan desde sitios de terceros.
No lo hagáis en imágenes grandes, el código sale larguísimo. Nosotros, por ejemplo, hemos puesto como ejemplo un logo grande, pero porque lo teníamos a mano. Nunca lo pondríamos tan grande en Base64.
Cómo se hace.
Lo mejor es usar un sitio web. Existen varios si buscas en Google, por ejemplo https://www.base64-image.de/
Ahí subes la imagen y te dará el código tanto para html como para css. Una imagen en Base64 en html se carga así:
<img src="data:image/gif;base64,........" title="Título" />
En CSS se pondría algo como:
background: #FFF no-repeat center center url("......")
En los puntos suspensivos se pone el código que te dan las webs anteriores.
Os recomendamos los siguientes productos relacionados con la informática:
TP-Link N300 Tl-WA850RE - Repetidor Extensor de Red WiFi (2.4 GHz, 300 Mbps, Puerto Ethernet, Modo Ap y Extensor, Antenas Internas), Blanco
16,99 € (a partir de 3 febrero, 2023 07:22 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Silkland Cable DisplayPort 2.0 2m, 4K@144Hz /165Hz /240Hz, 2K@144Hz /165Hz /240Hz, 8K/16K@60Hz, 80Gbps, HDR, ARC, DSC1.2a, G-Sync & Free-Syn, Cable DP para Monitores de 144Hz, Tarjetas Gráficas Juegos
16,99 € (a partir de 3 febrero, 2023 05:58 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
HP 301 N9J72AE, Pack de 2, Cartuchos de Tinta Originales Negro y Tricolor, Compatible con Impresoras de Inyección de Tinta HP DeskJet 1050, 2540, 3050, HP OfficeJet 2620, 4630, HP ENVY 4500, 5530
34,99 € (a partir de 3 febrero, 2023 04:33 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
USB 3.0 Carcasa Disco Duro 2.5", ORICO 5Gbps Caja Disco Duro para HDD SSD SATA III de 7mm y 9.5mm de Altura con Cable USB, Sopporta UASP, TRIM,No Requiere Herramientas(Negro)
8,99 € (a partir de 3 febrero, 2023 05:58 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Hub USB C, 7 En 1 Adaptador USB C Hub a HDMI 4K, 3 Puertos USB 3.0, SD/Micro SD Lector Tarjeta, USB C Hub Tipo C para MacBook Pro/Air, Surface Pro, Chromebook, iPad Pro, XPS 15 y Otros Dispositivos
23,99 € (a partir de 3 febrero, 2023 07:22 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Kingston A400 SSD Disco duro sólido interno 2.5" SATA Rev 3.0, 480GB - SA400S37/480G
36,50 € (a partir de 3 febrero, 2023 07:22 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
GOODTEL Tablet 10 Pulgadas 4GB RAM + 64GB ROM, Android 11 Google GMS, WiFi, Bluetooth, OTG, Batería 8000mAh, Dual Cámara 5MP + 8MP, SD Slot 4-256GB, con Funda, Teclado y Ratón, Rojo
116,98 € (a partir de 3 febrero, 2023 07:22 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
WENIG Mochila Antirrobo Impermeable,Mochila Portatil 15.6 Pulgadas Mochila Hombre con Puerto de Carga USB,Mochila Backpack para el Laptop para Ordenador del Negocio Trabajo Diario Viaje-Negro
39,99 € (a partir de 3 febrero, 2023 07:22 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)
Amazon Basics - Ratón óptico con USB y 3 botones para Windows y Mac OS X
7,04 € (a partir de 3 febrero, 2023 04:33 GMT +01:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)