{"id":37577,"date":"2013-11-07T15:52:40","date_gmt":"2013-11-07T14:52:40","guid":{"rendered":"https:\/\/promocionalia.es\/web\/2013\/11\/07\/formatos-de-imagen-recomendados-para-desarrollo-web\/"},"modified":"2024-05-07T18:24:51","modified_gmt":"2024-05-07T16:24:51","slug":"formatos-de-imagen-recomendados-para-desarrollo-web","status":"publish","type":"post","link":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/","title":{"rendered":"Formatos de imagen recomendados para desarrollo web"},"content":{"rendered":"<p>Cap\u00edtulos:<\/p>\n<p>1.- Formatos de imagen<br \/>Distintos formatos est\u00e1ndar de im\u00e1genes utilizables enre diversos programas gr\u00e1ficos.<\/p>\n<p>2.- Im\u00e1genes de tono continuo<br \/>En este art\u00edculo veremos las im\u00e1genes de tono continuo.<\/p>\n<p>3.- Im\u00e1genes de plasta de color<br \/>En este art\u00edculo veremos las im\u00e1genes de plasta de color.<\/p>\n<p>4.- Caracter\u00edsticas gr\u00e1ficas de cada formato<br \/>Ahora veremos las caracter\u00edsticas gr\u00e1ficas de cada formato, esto es, como se comportan visualmente en entornos de edici\u00f3n.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>1.- Formatos de imagen<\/strong><br \/><strong>Distintos formatos est\u00e1ndar de im\u00e1genes utilizables enre diversos programas gr\u00e1ficos.<\/strong><\/p>\n<p><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 20px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">Distintos formatos est\u00e1ndar de im\u00e1genes utilizables entre diversos programas gr\u00e1ficos.<\/strong><\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: #ffffff; color: #313131; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25.5938px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;\">Este tutorial tiene como finalidad ayudar para los lectores el entender algunos de los formatos est\u00e1ndar utilizables entre diversos<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">programas de dise\u00f1o gr\u00e1fico<\/strong>, sus caracter\u00edsticas, similitudes y particularidades. <\/p>\n<p style=\"margin: 0px 0px 1.6em; padding: 0px; border: 0px none; outline: 0px none; font-size: 1.6rem; vertical-align: baseline; background-color: transparent; line-height: 1.6em;\">Atenci\u00f3n, porque no todos estos formatos los podremos utilizar en p\u00e1ginas web, que resulta interesante comentar ya que este es un medio espec\u00edfico para los desarrolladores. Para aclaraci\u00f3n de las personas, de los formatos que vamos a revisar en este art\u00edculo, s\u00f3lo podemos utilizar GIF, JPG y PNG. Dicho sea de paso, Internet Explorer 6 tiene problemas para mostrar los archivos en PNG que tienen transparencia por canal Alpha, algo que explicaremos m\u00e1s tarde.<\/p>\n<p style=\"margin: 0px 0px 1.6em; padding: 0px; border: 0px none; outline: 0px none; font-size: 1.6rem; vertical-align: baseline; background-color: transparent; line-height: 1.6em;\">Los formatos que aqu\u00ed trabajaremos son:<\/p>\n<ul style=\"margin: 0px 0px 1.6em 12px; padding: 0px 0px 0px 12px; border: 0px none; outline: 0px none; font-size: 1.6rem; vertical-align: baseline; background-color: transparent; line-height: 1.6em;\">\n<li style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\"><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">BMP<\/strong>&#8211; Mapa de bits (bitmap)<\/li>\n<li style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\"><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">GIF<\/strong>&#8211; Graphics Interchange Format<\/li>\n<li style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\"><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">JPG<\/strong>&#8211; Joint Photographic Experts Group<\/li>\n<li style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\"><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">PNG<\/strong>&#8211; Portable Network graphics<\/li>\n<li style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\"><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">TIF<\/strong>&#8211; Tagged-Image File Format<\/li>\n<\/ul>\n<p> <strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">BMP<\/strong>es el formato m\u00e1s usado en aplicaciones Windows y DOS. En la codificaci\u00f3n de la imagen no hay compresi\u00f3n y por lo general resultan archivos grandes. Su ventaja es que lo lee cualquier programa que maneje imagen.<\/p>\n<p>El formato<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">GIF<\/strong>es el formato de archivo que se utiliza habitualmente para mostrar gr\u00e1ficos e im\u00e1genes de color indexado en documentos HTML en Internet y otros servicios en l\u00ednea. GIF es un formato comprimido con LZW dise\u00f1ado para minimizar el tama\u00f1o del archivo y el tiempo de transferencia electr\u00f3nica. El formato<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">GIF preserva la transparencia<\/strong>en im\u00e1genes de color indexado.<\/p>\n<p>El formato<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">JPEG<\/strong>se utiliza habitualmente para mostrar fotograf\u00edas y otras im\u00e1genes de tono continuo en documentos HTML en Internet y otros servicios en l\u00ednea. El formato JPEG admite los modos de color CMYK, RGB y Escala de grises pero no admite<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">canales alfa<\/strong>(No preserva la transparencia). A diferencia del formato GIF, JPEG retiene toda la informaci\u00f3n de color de una imagen RGB pero comprime el tama\u00f1o del archivo descartando datos selectivamente.<\/p>\n<p>El formato<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">PNG<\/strong>es uno de los formatos m\u00e1s interesantes. Aunque su uso no est\u00e1 tan extendido en este momento, cada vez m\u00e1s r\u00e1pidamente est\u00e1 siendo bien acogido por los desarrolladores de p\u00e1ginas web. Desarrollado como una alternativa sin patente al formato GIF, el formato de gr\u00e1ficos de red port\u00e1tiles (PNG) se utiliza para una compresi\u00f3n sin p\u00e9rdidas y para la visualizaci\u00f3n de im\u00e1genes en Internet. A diferencia del formato GIF, PNG admite im\u00e1genes de 24 bits y produce transparencia de fondo sin bordes irregulares. Esto es algo que consigue por medio del \u00abcanal alpha\u00bb, que permite definir el grado de transparencia u opacidad de un color. Sin embargo, algunos navegadores Web no admiten im\u00e1genes PNG, o no las soportan del todo bien, es el caso de Internet Explorer 6, que tiene diversos problemas sobre todo con los archivos semitransparentes. El formato PNG admite tambi\u00e9n im\u00e1genes RGB, en 8 bit, de color indexado, opcionalmente en escala de grises y de mapa de bits sin canales alfa. PNG conserva la transparencia en im\u00e1genes en escala de grises y RGB, lo que resulta extremadamente \u00fatil para utilizarse en Flash, donde PNG es totalmente compatible.<\/p>\n<p><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">TIFF<\/strong>es un formato flexible de im\u00e1genes de mapa de bits que pr\u00e1cticamente admiten todas los programas de pintura, edici\u00f3n de im\u00e1genes y dise\u00f1o de p\u00e1ginas. Admite im\u00e1genes CMYK, RGB, Lab, de color indexado y en escala de grises con canales alfa, e im\u00e1genes en modo de mapa de bits sin canales alfa.<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">Photoshop puede guardar capas en un archivo TIFF<\/strong>; sin embargo, si abre el archivo en otra aplicaci\u00f3n, s\u00f3lo ser\u00e1 visible la imagen acoplada. Photoshop puede guardar tambi\u00e9n anotaciones, transparencias y datos de pir\u00e1mide multirresoluci\u00f3n en formato TIFF. No es un formato para Internet debido al gran tama\u00f1o de los archivos con este formato.<\/p>\n<p>Despu\u00e9s de esta aburrida descripci\u00f3n veamos cada formato con manzanas en el<a style=\"text-decoration: none; color: #6d6a31; display: inline-block; outline: 0px none;\" href=\"http:\/\/www.desarrolloweb.com\/articulos\/imagenes-tono-continuo.html\">siguiente art\u00edculo<\/a>.<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong>2.- Im\u00e1genes de tono continuo<\/strong><br \/><strong>En este art\u00edculo veremos las im\u00e1genes de tono continuo.<\/strong><\/p>\n<p><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 20px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">En este art\u00edculo veremos las im\u00e1genes de tono continuo.<\/strong><\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: #ffffff; color: #313131; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25.5938px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;\">Necesitaremos Adobe Photoshop, dreamweaver o word, y el explorador de Windows.<\/p>\n<p>1. Abre Photoshop y pide un archivo nuevo. File&gt; New. En el cuadro de dialogo New selecciona en el men\u00fa desplegable<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">Preset Size<\/strong>Default Photoshop Size, y activa transparent en la secci\u00f3n<strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">contents<\/strong>.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img fetchpriority=\"high\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image001.gif\" height=\"340\" width=\"419\" \/><\/div>\n<p>Este archivo nos servir\u00e1 para crear en \u00e9l gr\u00e1ficos b\u00e1sicos, para exportarlos con diferentes formatos, comparar su tama\u00f1o en bits y despu\u00e9s ilustrar sus caracter\u00edsticas b\u00e1sicas en Dreamweaver o word.<\/p>\n<p>2. Selecciona la herramienta Gradiente<img decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image002.gif\" height=\"21\" width=\"25\" \/>En la barra de opciones de la herramienta clic en el men\u00fa desplegable para tipo de gradiente y selecciona De Color Frontal a Transparente.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image003.gif\" height=\"181\" width=\"497\" \/><\/div>\n<p>3. Aplica la gradiente a todo tu documento.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image006.jpg\" height=\"285\" width=\"369\" \/><\/div>\n<p>4. Guarda el archivo para WEB. File&gt;Save for Web.<\/p>\n<p>El cuadro Save For Web de Photoshop nos permite guardar im\u00e1genes en formatos comprimidos. Especialmente \u00fatil para aplicaciones Web.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image016.jpg\" height=\"309\" width=\"402\" \/><\/div>\n<p>5. Clic en el men\u00fa desplegable del formato (Resaltado en rojo en la ilustraci\u00f3n anterior). Selecciona GIF. Verifica que la opci\u00f3n de Transparency est\u00e9 activada. El resto de los valores pueden ser los de la ilustraci\u00f3n siguiente.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image007.gif\" height=\"328\" width=\"223\" \/><\/div>\n<p>6. Clic en el bot\u00f3n Save. En el cuadro \u0093<em style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\">Save Optimized As<\/em>\u0094 crea una nueva carpeta en el escritorio y guarda en ella la gradiente con el nombre GradGif.<\/p>\n<p>7. Nuevamente File&gt; Save For Web. Clic en el men\u00fa desplegable del formato. Selecciona JPG. En la caja de texto<em style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\">Quality<\/em>teclea 80. El resto de los valores pueden ser los de la ilustraci\u00f3n siguiente.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image008.gif\" height=\"178\" width=\"226\" \/><\/div>\n<p>8. Clic en el bot\u00f3n Save. En el cuadro \u0093<em style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\">Save Optimized As<\/em>\u0094 guarda como GradJPG en la carpeta reci\u00e9n creada.<\/p>\n<p>9. Otra vez File&gt; Save For Web. Clic en el men\u00fa desplegable del formato. Selecciona PNG-8. Notaras que los par\u00e1metros son iguales a los de GIF. Verifica que la casilla de Transparency est\u00e9 activada.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image009.gif\" height=\"154\" width=\"226\" \/><\/div>\n<p>10. Clic en el bot\u00f3n Save. En el cuadro Save Optimized As guarda como GradPNG en la carpeta reci\u00e9n creada.<\/p>\n<p>11. File&gt; Save For Web. Clic en el men\u00fa desplegable del formato. Selecciona PNG-24. Verifica que la casilla de Transparency est\u00e9 activada.<\/p>\n<p>12. Clic en el bot\u00f3n Save. En el cuadro Save Optimized As guarda como GradPNG24 en la carpeta reci\u00e9n creada.<\/p>\n<p>En el explorador de Windows navega hacia la carpeta que creaste en el escritorio. En la barra de men\u00fa Clic en Ver&gt; Detalles para ver el tama\u00f1o y tipo de los cuatro archivos.<\/p>\n<p>Notar\u00e1s que el archivo GIF es el m\u00e1s grande de todos. Esto es por que GIF guarda una muestra de cada uno de los colores que aparecen en la imagen, por lo que no es el formato mas adecuado para tonos continuos como nuestra gradiente. JPG es lo m\u00e1s recomendable. PNG 8 es una buena opci\u00f3n sin embargo menos programas y navegadores reconocen el formato (ya lo ver\u00e1s en el ejemplo con dreamweaver).<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>3.- Im\u00e1genes de plasta de color<br \/>En este art\u00edculo veremos las im\u00e1genes de plasta de color.<\/p>\n<p>&nbsp;<\/p>\n<p><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 20px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">En este art\u00edculo veremos las im\u00e1genes de plasta de color.<\/strong><\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: #ffffff; color: #313131; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25.5938px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;\">1. En el archivo de photoshop que hemos estado trabajando, Presiona Ctrl+A para seleccionar todo y presiona la tecla Supr. Para dejar el archivo nuevamente en blanco.<\/p>\n<p>2. Presiona ctrl.+D para eliminar la selecci\u00f3n.<\/p>\n<p>3. Clic en la herramienta Pincel y deja presionado el bot\u00f3n del Mouse hasta que aparezca la opci\u00f3n del l\u00e1piz. Selecci\u00f3nalo.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image010.gif\" height=\"94\" width=\"154\" \/><\/div>\n<p>4. En la barra de opciones de la herramienta selecciona un pincel de 60px de bordes duros y con opacidad del 100%.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image011.gif\" height=\"37\" width=\"476\" \/><\/div>\n<p>5. traza algunas l\u00edneas con tres o cuatro colores diferentes dejando algunas zonas transparentes.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image012.gif\" height=\"376\" width=\"487\" \/><\/div>\n<p>Las im\u00e1genes en que los tonos cambian abruptamente, sin pasos graduales entre uno y otro se les llama de plasta de color.<\/p>\n<p>6. File&gt; Save For Web. Clic en el men\u00fa desplegable del formato. Selecciona GIF. Verifica que la casilla de Transparency est\u00e9 activada.<\/p>\n<p>7. Clic en el bot\u00f3n Save y guarda la imagen como flatGIF en la carpeta que creaste en el escritorio.<\/p>\n<p>8. Como hicimos antes guarda un JPG, un GIF,un PNG-8 y un PNG-24. y activa la transparencia en los formatos que lo permitan.<\/p>\n<p>9. En el explorador de Windows navega hacia la capeta que creaste y observa el tama\u00f1o de los archivos.<\/p>\n<p>La relaci\u00f3n Gif-JPG ahora funciona a la inversa: el archivo GIF es mucho m\u00e1s peque\u00f1o que el JPG. Lo mismo pasa en relaci\u00f3n a png-8 y png-24. Por tanto, en im\u00e1genes de plasta de color, GIF es un formato m\u00e1s eficiente con respecto al tama\u00f1o del archivo.<\/p><\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>4.- Caracter\u00edsticas gr\u00e1ficas de cada formato<br \/>Ahora veremos las caracter\u00edsticas gr\u00e1ficas de cada formato, esto es, como se comportan visualmente en entornos de edici\u00f3n.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><strong style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 20px; vertical-align: baseline; background-color: transparent; font-weight: bold;\">Ahora veremos las caracter\u00edsticas gr\u00e1ficas de cada formato, esto es, como se comportan visualmente en entornos de edici\u00f3n.<\/strong><\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: #ffffff; color: #313131; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25.5938px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;\">Cierra Photoshop y abre DreamWeaver<\/p>\n<p>1. En el cuadro de bienvenida pide un archivo nuevo haciendo clic en HTML de la columna Create New<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image013.jpg\" height=\"260\" width=\"332\" \/><\/div>\n<p>2. En la barra de men\u00fa Modificar&gt;Propiedades de la p\u00e1gina ( Modify&gt; Page Properties). En el cuadro propiedades de p\u00e1gina clic en el bot\u00f3n Examinar para buscar una imagen de fondo.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image014.jpg\" height=\"210\" width=\"350\" \/><\/div>\n<p>3. En el cuadro seleccionar origen de la imagen (Select Image Source) busca fondo.gif en la carpeta del ejercicio que copiaste al escritorio. Clic en aceptar al cuadro de advertencia y Aceptar (OK) al cuadro Propiedades de la p\u00e1gina.<\/p>\n<p>La imagen debe abarcar todo el fondo de tu p\u00e1gina.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image020.jpg\" height=\"453\" width=\"567\" \/><\/div>\n<p>4. En la barra de men\u00fa Insertar&gt;Imagen. Busca la carpeta donde guardaste los archivos creados en Photoshop.<\/p>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: transparent;\" align=\"center\"><img loading=\"lazy\" decoding=\"async\" style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: middle; background-color: transparent; max-width: 100%; background-position: -294px 0px;\" src=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image021.jpg\" height=\"349\" width=\"567\" \/><\/div>\n<p>5. Selecciona flatGIF y clic en Aceptar. En el cuadro de advertencia clic en Aceptar.<\/p>\n<p>La imagen aparece en tu p\u00e1gina<\/p>\n<p>6. Inserta del mismo modo cada una de las im\u00e1genes que exportaste de Photoshop y checa su comportamiento con respecto al fondo. Presiona f12 para una previsualizaci\u00f3n Web.<\/p>\n<p>7. Notaras que la transparencia de png 24 no es reconocida por Dreamweaver mientras que la de GIF y PNG8 si es respetada. A esto me refiero cuando hablo de la compatibilidad de los formatos. En general los programas de edici\u00f3n de imagen o video reconocen sin problemas los canales Alpha o de transparencia de los formatos que exportamos. Dreamweaver no es un editor de imagen por eso sus posibilidades se limitan al lenguaje que maneja (HTML) y a los navegadores WEB donde se ver\u00e1 el producto final que no todos reconocen png24 sin la ayuda de otros lenguajes anidados o de dePlug-ins.<\/p>\n<p>8. Abre Illustrator y pide un documento nuevo y en blanco.<\/p>\n<p>9. Dibuja algunos objetos en la capa 1<\/p>\n<p>10. Crea una capa nueva. Elije File&gt; Place.<\/p>\n<p>11. Ahora: importa una imagen de las que guardamos con Photoshop, pon atenci\u00f3n en su formato ( gif, jpg, png\u0085) y observa su comportamiento con respecto a la capa 1 que hace de fondo.<\/p>\n<p>Este programa s\u00ed reconoce la medias transparencias de PNG24, o transparencia Alfa, permitiendo resultados gr\u00e1ficos muy variados, que la transparencia total de GIF no permite. Conociendo las caracter\u00edsticas de cada formato y su comportamiento gr\u00e1fico puedes seleccionar el formato que m\u00e1s te convenga seg\u00fan las necesidades gr\u00e1ficas de tu proyecto.<\/p><\/div>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: #ffffff; color: #313131; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25.5938px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;\">&nbsp;<\/div>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: #ffffff; color: #313131; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25.5938px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;\">Fuente: <a href=\"http:\/\/www.desarrolloweb.com\/manuales\/formatos-imagen-web.html\">http:\/\/www.desarrolloweb.com\/manuales\/formatos-imagen-web.html<\/a><\/div>\n<div style=\"margin: 0px; padding: 0px; border: 0px none; outline: 0px none; font-size: 16px; vertical-align: baseline; background-color: #ffffff; color: #313131; font-family: 'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 25.5938px; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; word-spacing: 0px;\">&nbsp;<\/div>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Cap\u00edtulos: 1.- Formatos de imagenDistintos formatos est\u00e1ndar de im\u00e1genes utilizables enre diversos programas gr\u00e1ficos. 2.-&hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rs_blank_template":"","rs_page_bg_color":"","slide_template_v7":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-37577","post","type-post","status-publish","format-standard","hentry","category-sin-categoria"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Formatos de imagen recomendados para desarrollo web - PROMOCIONALIA<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Formatos de imagen recomendados para desarrollo web - PROMOCIONALIA\" \/>\n<meta property=\"og:description\" content=\"Cap\u00edtulos: 1.- Formatos de imagenDistintos formatos est\u00e1ndar de im\u00e1genes utilizables enre diversos programas gr\u00e1ficos. 2.-&hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/\" \/>\n<meta property=\"og:site_name\" content=\"PROMOCIONALIA\" \/>\n<meta property=\"article:published_time\" content=\"2013-11-07T14:52:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-07T16:24:51+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image001.gif\" \/>\n<meta name=\"author\" content=\"editor Web\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"editor Web\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/\"},\"author\":{\"name\":\"editor Web\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#\\\/schema\\\/person\\\/178e232c6192997d47707c6f0c4ef5ab\"},\"headline\":\"Formatos de imagen recomendados para desarrollo web\",\"datePublished\":\"2013-11-07T14:52:40+00:00\",\"dateModified\":\"2024-05-07T16:24:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/\"},\"wordCount\":2025,\"publisher\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.desarrolloweb.com\\\/articulos\\\/images\\\/graficos\\\/image001.gif\",\"inLanguage\":\"es\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/\",\"url\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/\",\"name\":\"Formatos de imagen recomendados para desarrollo web - PROMOCIONALIA\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/#primaryimage\"},\"thumbnailUrl\":\"http:\\\/\\\/www.desarrolloweb.com\\\/articulos\\\/images\\\/graficos\\\/image001.gif\",\"datePublished\":\"2013-11-07T14:52:40+00:00\",\"dateModified\":\"2024-05-07T16:24:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/#primaryimage\",\"url\":\"http:\\\/\\\/www.desarrolloweb.com\\\/articulos\\\/images\\\/graficos\\\/image001.gif\",\"contentUrl\":\"http:\\\/\\\/www.desarrolloweb.com\\\/articulos\\\/images\\\/graficos\\\/image001.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/formatos-de-imagen-recomendados-para-desarrollo-web\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Formatos de imagen recomendados para desarrollo web\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#website\",\"url\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/\",\"name\":\"PROMOCIONALIA\",\"description\":\"m\u00e1s que inform\u00e1tica\",\"publisher\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#organization\",\"name\":\"PROMOCIONALIA\",\"url\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/PROMOCIONALIA-logo2020-topweb300-150dpi-light-trans.png\",\"contentUrl\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/wp-content\\\/uploads\\\/2023\\\/08\\\/PROMOCIONALIA-logo2020-topweb300-150dpi-light-trans.png\",\"width\":350,\"height\":43,\"caption\":\"PROMOCIONALIA\"},\"image\":{\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/#\\\/schema\\\/person\\\/178e232c6192997d47707c6f0c4ef5ab\",\"name\":\"editor Web\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb773be3fa35d66440a39cd015ecd02281424c3ac9e0b7142996b48d8762d099?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb773be3fa35d66440a39cd015ecd02281424c3ac9e0b7142996b48d8762d099?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb773be3fa35d66440a39cd015ecd02281424c3ac9e0b7142996b48d8762d099?s=96&d=mm&r=g\",\"caption\":\"editor Web\"},\"url\":\"https:\\\/\\\/promocionalia.es\\\/web\\\/author\\\/editor\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Formatos de imagen recomendados para desarrollo web - PROMOCIONALIA","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Formatos de imagen recomendados para desarrollo web - PROMOCIONALIA","og_description":"Cap\u00edtulos: 1.- Formatos de imagenDistintos formatos est\u00e1ndar de im\u00e1genes utilizables enre diversos programas gr\u00e1ficos. 2.-&hellip;","og_url":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/","og_site_name":"PROMOCIONALIA","article_published_time":"2013-11-07T14:52:40+00:00","article_modified_time":"2024-05-07T16:24:51+00:00","og_image":[{"url":"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image001.gif","type":"","width":"","height":""}],"author":"editor Web","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"editor Web","Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/#article","isPartOf":{"@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/"},"author":{"name":"editor Web","@id":"https:\/\/promocionalia.es\/web\/#\/schema\/person\/178e232c6192997d47707c6f0c4ef5ab"},"headline":"Formatos de imagen recomendados para desarrollo web","datePublished":"2013-11-07T14:52:40+00:00","dateModified":"2024-05-07T16:24:51+00:00","mainEntityOfPage":{"@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/"},"wordCount":2025,"publisher":{"@id":"https:\/\/promocionalia.es\/web\/#organization"},"image":{"@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/#primaryimage"},"thumbnailUrl":"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image001.gif","inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/","url":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/","name":"Formatos de imagen recomendados para desarrollo web - PROMOCIONALIA","isPartOf":{"@id":"https:\/\/promocionalia.es\/web\/#website"},"primaryImageOfPage":{"@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/#primaryimage"},"image":{"@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/#primaryimage"},"thumbnailUrl":"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image001.gif","datePublished":"2013-11-07T14:52:40+00:00","dateModified":"2024-05-07T16:24:51+00:00","breadcrumb":{"@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/#primaryimage","url":"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image001.gif","contentUrl":"http:\/\/www.desarrolloweb.com\/articulos\/images\/graficos\/image001.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/promocionalia.es\/web\/formatos-de-imagen-recomendados-para-desarrollo-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/promocionalia.es\/web\/"},{"@type":"ListItem","position":2,"name":"Formatos de imagen recomendados para desarrollo web"}]},{"@type":"WebSite","@id":"https:\/\/promocionalia.es\/web\/#website","url":"https:\/\/promocionalia.es\/web\/","name":"PROMOCIONALIA","description":"m\u00e1s que inform\u00e1tica","publisher":{"@id":"https:\/\/promocionalia.es\/web\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/promocionalia.es\/web\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/promocionalia.es\/web\/#organization","name":"PROMOCIONALIA","url":"https:\/\/promocionalia.es\/web\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/promocionalia.es\/web\/#\/schema\/logo\/image\/","url":"https:\/\/promocionalia.es\/web\/wp-content\/uploads\/2023\/08\/PROMOCIONALIA-logo2020-topweb300-150dpi-light-trans.png","contentUrl":"https:\/\/promocionalia.es\/web\/wp-content\/uploads\/2023\/08\/PROMOCIONALIA-logo2020-topweb300-150dpi-light-trans.png","width":350,"height":43,"caption":"PROMOCIONALIA"},"image":{"@id":"https:\/\/promocionalia.es\/web\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/promocionalia.es\/web\/#\/schema\/person\/178e232c6192997d47707c6f0c4ef5ab","name":"editor Web","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/bb773be3fa35d66440a39cd015ecd02281424c3ac9e0b7142996b48d8762d099?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb773be3fa35d66440a39cd015ecd02281424c3ac9e0b7142996b48d8762d099?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb773be3fa35d66440a39cd015ecd02281424c3ac9e0b7142996b48d8762d099?s=96&d=mm&r=g","caption":"editor Web"},"url":"https:\/\/promocionalia.es\/web\/author\/editor\/"}]}},"_links":{"self":[{"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/posts\/37577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/comments?post=37577"}],"version-history":[{"count":0,"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/posts\/37577\/revisions"}],"wp:attachment":[{"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/media?parent=37577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/categories?post=37577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/promocionalia.es\/web\/wp-json\/wp\/v2\/tags?post=37577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}