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:
Crucial SSD interno P3 NVMe M.2 PCIe Gen3 de 1 TB, hasta 3500 MB/s, CT1000P3SSD8 color negro
51,49 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
Sveon SCT011M - minilector compatible con MAC y Windows 10 [España]
7,99 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
Logitech G Cloud Gaming Handheld, Consola Portátil con Batería de Larga Duración, Pantalla Táctil 1080P de 7 in, diseño ligero, Xbox Cloud Gaming, NVIDIA GeForce NOW, Google Play, Enchufe EU, Blanco
359,00 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
BLACKSYNCZE Cable Cargador iPhone, [3Pack 2M] MFi Certificado Cable iPhone Carga Rápida Nylon Trenzado para iPhone 11 12 13 Pro MAX Mini XR XS MAX X 8 Plus 8 7 Plus 7 6S 6 Plus 6 SE 5S 5C 5 SE
9,99 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
Rodzon Grabadora CD/DVD Externa USB 3.0, Unidades de DVD Externa Portátil CD/DVD /-RW/ROM Estable con Lector/Quemador/Re - Quemador para Win 10/8 / 7 / XP/Vista/Linux/Mac OS
22,99 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
Corsair MP600 PRO XT 2TB Gen4 PCIe x4 NVMe M.2 SSD (Velocidades de Lectura Secuencial de hasta 7.100 MB/s y de Escritura de 6.800 MB/s, TLC NAND de Alta Densidad, Disipador Térmico de Aluminio) Negro
174,99 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
Cable Cargador iPhone 90 Grados 2M 2Pack, [Certificado MFi] Apple Cable Lightning Nylon Trenzado USB Cable iPhone Carga Rápida Compatible con iPhone 14 13 12 11 Pro XS MAX XR X 8 7 6S 6 Plus 5 5S,iPad
10,99 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
ARCTIC MX-4 (8 g) - Premium Performance Pasta Térmica para Todos los procesadores (CPU, GPU - PC, PS4, Xbox), Muy Alta conductividad térmica, Larga Durabilidad, aplicación Segura, no conductora
6,50 € (a partir de 1 junio, 2023 12:31 GMT +02: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.)
Logitech MX Keys S Teclado inalámbrico, Perfil Bajo, Escritura Fluida Silenciosa, Teclas Programables
(a partir de 1 junio, 2023 12:31 GMT +02: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.)