Autor Tema: data URL image base64 ¿Para qué sirve? Ventajas e inconvenientes CU01031D (Leído 4623 veces)

Elanti · « **en:** 02 de Junio 2015, 21:05 »

Hola:

Citar

EJERCICIO

Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones).

Yo lo resolví de la siguienta manera:

HTML

Código: [Seleccionar]

<!DOCTYPE html/>
<html lang="es">
<html>
<title>Ejercicio background</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/CSS" href="ejerciciobackground.css"/> 
<head>
</head>
<body>
<div id="primero"></div>
<div id="segundo"></div>
<div id="tercero"></div>
<div id="cuarto"></div>

</body>
</html>

CSS

Código: [Seleccionar]

div{
   width:400px;
   height:400px;
   margin:40px;
   padding:40px; 
   background-repeat:no-repeat;
   background-position:50% 50%;
     
}
#primero{
    background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAFoAkAMBIgACEQEDEQH/xAAbAAACAgMBAAAAAAAAAAAAAAAEBgMFAQIHAP/EADoQAAIBAwIDBgUCBAQHAAAAAAECAwAEEQUhEhMxBiJBUWGBFDJxkaEjYgdCscEWUtHxFSQ0grPh8P/EABkBAAMBAQEAAAAAAAAAAAAAAAECAwAEBf/EACIRAAICAgICAgMAAAAAAAAAAAABAhEDIRIxQVEEEyJhgf/aAAwDAQACEQMRAD8AXzJat1h/FYPwh6RuPpW/I/YazyB6+9eukjz7ZDy7Y9OZWOTB4Ow9qn+HPpWTbOMZU7jIpv6AG5EfhKPtWDCPB1orkt/lNY5R8qYALyfUfevCE+n3FFcr0r3KomsG5J8vzVppcZi068fG7uqewSRv6qtC8qraGDlaGpPWaSdvZERR/wCQ1LM/xofH2L3JPlXjFRXKNe5VVJ2CcuvcuiuVXuXWNYJy6xy/Si+XWOXWDYJy6wY/Si+XWDHWMEWGpvNcrFNGgQ7cXj9auuVH4ge4pRkjOe7kCrjQrm7e6EUjtKjDfiO6+tcZcaOz2mW1/qsMMw/TGXbHpvTR2hsrVhzWhiMm6hivEFXxwDXuzVtbi3M9oAJmThkAY5G+f7VJrcvJj5c7gAjOSCPucYrknkbkXjFKIizWwUSR8iIEtxCRcgj6b9KDa2I9atbiCSZXkhPEq5Y4YYxQixq4LRvxD0rsxS12c+Rb6Azb/tH2rHIHlTJo/Zy6v5EeYPFa578h649BVzN2Us4ly3GVUnvFt3z5/Si88IugLFJqxB5A8qs7mMJptnBnvC2aQ+nHLt+EFF6umn2GVWEEnp3mJP5qsF4l3IASIxy1iUN0AUkjf3NCUvsprqwqPGwLk14wnypn0ns9LduHmBjTYqSuQ4zuOtNGpdnrKEcyKFOUy44QgyB9cU0/kxi6BHDKSs5fyfSscn0pxNnYQ3bNc2IaF9uFWYFPUb0FrFvpkTKLFHHF0DPnFGPyFJ1QHhaV2LXIPhWfhXPRc1Y8v9oqWK3L/wA2BVHKhFGypFm5Py4rPwLny+9Xy2UY6kmplt4V/kFTeYosYihOLerHRreb4yN43jTLYw382dsCo5NTRXZJ7aKQr5bVGbjTJnDv8RBIDkOrHY1z22VpI6lpEUOnTEyzgykgcOSo8/SrJtSt9RLw8oCRG4QvUNnpiucJrgaJWv5pXBPckkC5I6eH9TVzpWoWkUqzSGQuCCuOg9djXNKL7LJrou7ns/zviGkhCMnytjH2NLBsYcccV6DMpwVZAxU+WTuKs+2WrG/sYn0+ZxMrYZEJUkEf+q57OJw/G6yK+c8TA5zVcUW1tiTkkdW7LXEtvp1xJO6y2tuSI444sMWO+M59falvtr2x1y3jiWPS8I7M2TE69xR5+pO3ng0y/wALLk/4fcztxFp2yx9hV52ljjFoZcjA9elSepNDLas4Nq3bAPb2tzdaeyM7SIBzf8vDvuP3Ee1aWGv212qSch4+JmAHEG+UKT+G/FMGpSG8ui0gVlXZcjwqD4OGRQrwRkA5Hd6HzFdUU15Jtpjf2Q1hrcNDLIDABxjJ2xTDc9r7B4Wh+ItcEbMJRXNuO3sbQwtCLjiwFizsAN96cP8Ak2jVFt7dXAzgRgHNQyRXKx4PRmTVtPlXgN/bYPXMyjNL2qNaTS/pXETKMEHmA4qyluvhZDwhVPoBQMsnEWZjknyowtOzSaaMQGNohmaMt6GiEgLDiQ7UfodtKunTXJQkM+3EMjYeFWmn6JLfSjmsttGFGARxOfXNU+9rTJ/UntC8IZh0zVhpdhNcSK8pBiU98HqRV/qUdhokYCWod3TH6o4s/wC9Utnr1pZwgLFI0rMQVCDGM9SfHalllclpDLGk9s5Kdm2G1bavf2mg28AlgF1qFxGJREWwkKH5eLG5YjfHgCK1bocVR9tkdtce5OTFOivGfDGMY9qOWTS0DHFN7C7PtbI93G17CqouAGXLKoGwBU+Ap7fTUvIYb6zhjhj+WZYm4MNsRjB3BBBz61x0kyEKiksTsBuSfIV13s7BdRdn4RkcO0ec9SqgN+Rj2qFt9lqNpo57WNWiupt+ocBgP6H81rFqV3FOizxiSAkcTRDDY8e6ds+9Egi4j4OEmQDu8PnVXeAxyFJchlO6+VVSsRuh17H64LnRUM1r8LMn6Vym+7jfi9+v4ontNrPPt+RE3dbqR5Vz61vZYIZ4oZBGZSGDN0BFG29zcz45iK7nbhjbiB+mN/Y/eg4cXYt8uggheHIFQyTcIGNgD9xWWd12MDA/uIH9arry4YMeXFzmz0GyL9SccX2x9elOsiBxZIZ449Uga6iLxcJLd7hHFjIH4FWH+MUuAWGnuqnoBKGx74qu0zT59VE/xKyJG2xYnHgT/XA+hNXVr2V0CK1hL86a44QTGrkKD47UHJeUMosAk7QW8hObadV+oNajXbPI4opseWF/1qb/AIRYJJhbS2KE47wyV9an16DQrDszPw2kNtfcQ5c3JJyCcn02UH7UXJegcf2HaX2zsYLa6gSC7leVPkGCqqPHGaOX+IulyWvLFveLg5XCjHT61yC77WKzFLezXlABeLZSwHt6Cm3s92kt9VslgFvCkyH5wvCzHyP9sbelLxxt6GuSGybt3pFzEwvILuR8YQ93b671W6h2q0+7C8uKSJQcnCDr0866DpmlW8ukwLPKrXDJxNsAF2zj2qkueyynWrbVoHUNaq6rEUB4uIEZz4YzU1kgn0NxbOQ8Yxsa8xSeMQXEayxeCsOnqKGLb7VmOUqRXU42qIp0E22lWsMoaGJYt93XLPj0J+X60wRXCpFyU7iL3UXi+VfKqmKZDAWO7+A8qHW5dXqKgPyZei8aJsozKfEg9aFvJTKzSMd2OT9aAknKAHqCM1A9wSevtVIxElK9B0SmTIzjAzT52d0vTodPtL+P9S6UFi3GRufD+1c3iky2VPDjxp47H3LTJBbSJ3AxY/WlzXQ2NKy71WKcsHkkKBumBkUL8AltIkxxJHw7KRkGjtTMkrkZ7g6f6UJbvLfjlW65EYyc7VzplQtORJp+EQL+1Rjf6VUSM1uH4CRxbGiUP/Dbt1lxjGTjpUfNguJCxOR4geFMtAJNH0aG7j+InnBycCMDofU0rfxSt5E00IsnGgJCYPXocfZT+abbgx2tlL8K7IGBOGOxPnSnqkq31oYJ2bBIIZcZRh0I/wDvOslJu/BrSRyYEDORmmv+GKue0sRHyEcLZ6Z/2BqK47PMZSViifP8ySlAf+0g49jTH2bt00bilAQzlSqhM4QHr6knzrKDNyQ/vfzWV0ZI3DRgDOPxWn+JZkkaTnEsc48aVm1STBQY4T1AoWa6Llc5yBTrF7Fc/Qq8eKyXGc+NDZqQV0kyeOUpkjxr3NLVC3WveFAxKznwOSa172e8a1WseNEATG2K6J2XyLdJcLgDA+mK5slOmhO62sHCzDbwNQzdFMfYyahdCNBw94gkknzIq17JBYtNdyRzGOckUo3rMUfLHr501dmyTYxZJ+Y1zvor5BNail+KAdBht8H+9UkfFauZThB0xnwq+18ngJzvk70tX3/Tj608NoWWi0v+FYQOPIdd/Sle6Rf1G4/lG2PGpxI7W78Tsd/E0FefIParRjROTsg5nkBXjKTUBrFUJWECTcHYetbGVc56t6UMvzVt0BrUGz//2Q==);
    background-color:orange;
    border:solid 5px blue;
    
}
#segundo{background-image:url(data:image/jpeg;base64,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);
   background-color:cyan;
   border:dotted 3px #FF0000;
}
#tercero{background-image:url(data:image/jpeg;base64,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);
   background-color:lightgreen; 
   border:dashed 7px #00DD00;
}
#cuarto{background-image:url(data:image/jpeg;base64,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);
   background-color:yellow;
   border:groove 10px #0000EE;
   }

Una cosa que me resultó extraña, es que inicialmente yo había identificado los elementos div utilizando números simples (1,2,3 y 4) y no lograba visualizarlos en el navegador. Sólo cuando les cambié los id a "primero, segundo, etc.", pude visualizarlos. No sé cuál puede ser la causa de esto.

Ogramar · « **Respuesta #1 en:** 03 de Junio 2015, 08:57 »

Hola, el ejercicio está bien resuelto. Los identificadores deben empezar con una letra, no deben empezar con un número (de ahí el error que comentas). Has usado una cosa que no se explica en el curso: el uso de imágenes referenciadas directamente sin llamaralas a través de una url convencional, técnica de data URL ó data URI.

Con esta técnica lo que se hace es pasarle un código al navegador para que él mismo construya la imagen a partir del código sin necesidad de recuperarla desde una url. La ventaja que tendría esto en una web real es que cada imagen como url normal supone una petición a un servidor, y cada petición consume tiempo. Usando la técnica de data URL no hay que hacer la petición para traer la imagen, con lo que la carga de la web puede ser más rápida.

Esta técnica tiene algunas ventajas y algunos inconvenientes. El inconveniente principal quizás sea la dificultad para mantenimiento que supone ya que cambiar una imagen puede volverse complicado, aunque habría más cosas que comentar sobre esto.

Salu2

Elanti · « **Respuesta #2 en:** 03 de Junio 2015, 16:09 »

Hola, Ogramar:
No tenía idea de que los "id" tenían que comenzar necesariamente por letras. Tomo nota de eso.
Con respecto a las imágenes, no fue algo intencional. Yo simplemente hice una búsqueda en Google, y luego haciendo click derecho y seleccionando "copiar la ruta de la imagen", me quedó de esa manera. No tenía idea de que estaba usando una técnica diferente, aunque sí noté que se veían extrañas las direcciones (pero funcionaban). Muchas gracias por la información, es bueno saberlo.
Saludos.

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: