( Tengan buen día, tarde o noche, amigos. Durante toda la tarde del día anterior estuve tratando de hacer un nuevo tapiz. Yo deseo que tenga efectos de transparencia y traslúcidos; pero al terminar las imágenes, estas pesaron más de los 500 kb que la página pide como máximo para que se logren cargar. Por favor, si alguien pudiera decirme como guardar imágenes más ligeras, sin bajar la calidad de las mismas, o sin quitarles efectos, se lo agradecería enormemente. )
[big][center][quote=#3858c9][/c][c=#ffffff]DIFERENTAS ENTRE PNG, GIF Y JPEG[/c][/quote][/center][/big] [c=#f7aa2a][center][b]Antes de comenzar con el tutotial aclararé esto porque muchos tienen un enorme problema con esto de las dimensiones, calidad y demás.[/b][/center][/c]
[quote=#ffffff]La mayoría de los navegadores en Internet tienen la capacidad de mostrar estos tres tipos de imágenes sin ningún problema, algunos formatos funcionan mejor para ciertas ocasiones. Por ejemplo, los JPG | JPEG se utilizan con frecuencia para imágenes que son realistas y que se ven bien aunque el tamaño del archivo sea muy bajo; los GIF, que tanto se usan hoy en día, muestran imágenes animadas con transparencia o sin transparencia; los PNG, por su parte, tienen la habilidad de mantener la calidad al máximo siempre y soportan transparencias.
[big][c=#2172de]ＪＰＧ | ＪＰＥＧ[/c] [/big] JPG es un tipo de archivo que fue desarrollado por el Joint Photographic Experts Group (JPEG) para que fuese el estándar para las imágenes hechas por fotógrafos. Para que el JPG tenga un tamaño reducido, el archivo comprime los datos de la imagen en bloques de píxeles, también conocidos como “mosaico”. El problema con esta comprensión es que es permanente porque se creó con la idea de guardar imágenes grandes en espacios de almacenamiento pequeños. [b]Sin embargo[/b], el JPG tiene sus problemas. No es el adecuado para ilustraciones, dibujos, ni texto. Por ejemplo, si quieres guardar un archivo de imagen de una ilustración, lo más posible es que se vea píxelada, incluso cuando esté configurada para tener la mejor calidad. Esto sucede porque el formato JPG está diseñado para la compresión y siempre va a reducir la calidad.
[center][b]EJEMPLO DE JPEG PARA TUTORIAL SIGUIENTE Tamaño: 31,3 kb[/b]
[image=https://i.imgur.com/DX5q3qc.jpg] [/center]
[sep]
[big][c=#2172de]ＧＩＦ [/c] [/big]La característica principal del GIF es que soporta paletas de 256 colores, y además de que soporta animaciones y transparencias. Esto no creará una distorsión de la imagen, como JPG, pero sí difuminará los colores bastante, haciendo que se vea ligeramente píxelado. Sin embargo, en una imagen GIF no se pierden líneas rectas como las del texto, como pasaría con un JPG. Con todas estas ventajas y desventajas vemos porque los [b]GIF son usados principalmente para crear imágenes animadas[/b], porque en estos casos no importa si se pierde un poco de color con tal de que se mantenga la animación en un archivo que no es demasiado pesado y que no necesita un software adicional para ser reproducido (como es el caso de los vídeos).
[center][b]EJEMPLO DE GIF Tamaño: 57,5 kb[/b]
[image=https://i.imgur.com/VY54QoR.gif][/center]
[sep]
[big][c=#2172de]ＰＮＧ[/c] [/big]Este también soporta transparencias, así que es muy bueno para usarlo en Internet y en navegadores. A diferencia del GIF, maneja las transparencias con más elegancia y sin perder color porque soporta colores de 8-bits, y también de 24-bits, como JPG. El PNG utiliza un algoritmo de compresión sin perdida, por lo que reconstruye los datos de manera exacta a los originales. El problema con PNG es que si se tiene una imagen con muchos colores y píxeles, obtendremos un archivo mucho más pesado que el JPG, por lo que no se usa con tanta frecuencia en Internet.
[center][b]EJEMPLO DE PNG PARA PRÓXIMO TUTORIAL Tamaño: 148 kb[/b]
[image=https://i.imgur.com/XE83FfZ.png][/center]
[med][c=#f7aa2a]CONCLUSIÓN[/c][/med]Después de saber cómo funciona cada tipo de archivo de imagen, veamos para qué debemos usar cada una:
[c=#f7aa2a][b]GIF:[/b][/c] Perfecta para usar en archivos pequeños con colores limitados (escala de grises, por ejemplo). Evitar su uso para fotografías. [c=#f7aa2a][b]PNG:[/b][/c] Utilizar en gráficos, ilustraciones, y archivos pequeños en la web que necesiten transparencias. Evitar en fotografías con muchos detalles que necesiten ser subidas a la web porque serán demasiado pesadas. [c=#f7aa2a][b]JPG:[/b][/c] Ideal para mostrar fotografías en la web sin ocupar mucho espacio en un servidor. Terrible para edición de imágenes.[/quote]
[big][center][quote=#3858c9][/c][c=#ffffff]SOLUCIÓN A PROBLEMA DE TAMAÑO[/c][/quote][/center][/big] [center][quote=#ffffff]Como se había explicado anteriormente, el formato JPEG no sirve demasiado para guardar imágenes y re subirlas en los tapices, a lo cual se debe de usar nuestro formato de PNG. Este formato es pesado alado del JPEG, sin embargo no es un impedimento para que subamos los edits a los tapices sin que nos de el "límite de dimensiones". [c=#f7aa2a]Ese límite de dimensiones no es más ni menos que el tamaño de nuestra imagen, el peso de esta, no las dimensiones en si de nuestro tapiz. [/c]Aclarado esto pasemos a explicar como pueden hacer para subir sus PNG sin problema alguno.
[med][c=#3858c9]GUARDAR PARA WEB | ALT+MAYUS +CTRL+S[/c][/med] [image=https://i.imgur.com/sNbl1DM.png]
PNG tiene 2 formatos; PNG-24 y PNG-8 Cuando nosotros guardamos normalmente una imagen en PNG se hace en el formato 24 cual establece la paleta de colores full, esto ocasiona que el tamaño de nuestra imagen sea abismal y cuando queramos subir nuestro tapiz a iOrbix (y si supera los 500kb) no se pueda por lo anterior ya explicado, así que procederemos a cambiar nuestro PNG-24 a PNG-8.
[image=https://i.imgur.com/RNlef6v.png]
[image=https://i.imgur.com/VKUy9Qu.png]
Como ven aquí tenemos la plantilla de colores, nosotros podemos quitar o seleccionar los colores principales para que nuestra imagen tenga más o menos calidad, eso es al gusto de cada uno, pero con que se guarde ya directamente en este formato ya será mucho más pequeño el tamaño y apenas, muy apenas se verá la diferencia de calidades entre ambas.[/quote][/center]
¿Cómo crear imágenes PNG que pesen menos de 500 kb? | ღ Aʏᴜᴅᴀ ᴇɴ ɪᴍᴀɢᴇɴᴇꜱ ﹣Eᴅɪᴛᴏʀᴇꜱ﹣ | iOrbix
JavaScript is disabled on your browser.
iOrbix won't work properly if your browser doesn't have JavaScript enabled.
Please enable JavaScript, or alternatively, access iOrbix Mobile.
Yo deseo que tenga efectos de transparencia y traslúcidos; pero al terminar las imágenes, estas pesaron más de los 500 kb que la página pide como máximo para que se logren cargar.
Por favor, si alguien pudiera decirme como guardar imágenes más ligeras, sin bajar la calidad de las mismas, o sin quitarles efectos, se lo agradecería enormemente. )
[c=#f7aa2a][center][b]Antes de comenzar con el tutotial aclararé esto porque muchos tienen un enorme problema con esto de las dimensiones, calidad y demás.[/b][/center][/c]
[quote=#ffffff]La mayoría de los navegadores en Internet tienen la capacidad de mostrar estos tres tipos de imágenes sin ningún problema, algunos formatos funcionan mejor para ciertas ocasiones. Por ejemplo, los JPG | JPEG se utilizan con frecuencia para imágenes que son realistas y que se ven bien aunque el tamaño del archivo sea muy bajo; los GIF, que tanto se usan hoy en día, muestran imágenes animadas con transparencia o sin transparencia; los PNG, por su parte, tienen la habilidad de mantener la calidad al máximo siempre y soportan transparencias.
[big][c=#2172de]ＪＰＧ | ＪＰＥＧ[/c] [/big]
JPG es un tipo de archivo que fue desarrollado por el Joint Photographic Experts Group (JPEG) para que fuese el estándar para las imágenes hechas por fotógrafos. Para que el JPG tenga un tamaño reducido, el archivo comprime los datos de la imagen en bloques de píxeles, también conocidos como “mosaico”. El problema con esta comprensión es que es permanente porque se creó con la idea de guardar imágenes grandes en espacios de almacenamiento pequeños.
[b]Sin embargo[/b], el JPG tiene sus problemas. No es el adecuado para ilustraciones, dibujos, ni texto. Por ejemplo, si quieres guardar un archivo de imagen de una ilustración, lo más posible es que se vea píxelada, incluso cuando esté configurada para tener la mejor calidad. Esto sucede porque el formato JPG está diseñado para la compresión y siempre va a reducir la calidad.
[center][b]EJEMPLO DE JPEG PARA TUTORIAL SIGUIENTE
Tamaño: 31,3 kb[/b]
[image=https://i.imgur.com/DX5q3qc.jpg]
[/center]
[sep]
[big][c=#2172de]ＧＩＦ [/c] [/big]La característica principal del GIF es que soporta paletas de 256 colores, y además de que soporta animaciones y transparencias. Esto no creará una distorsión de la imagen, como JPG, pero sí difuminará los colores bastante, haciendo que se vea ligeramente píxelado. Sin embargo, en una imagen GIF no se pierden líneas rectas como las del texto, como pasaría con un JPG.
Con todas estas ventajas y desventajas vemos porque los [b]GIF son usados principalmente para crear imágenes animadas[/b], porque en estos casos no importa si se pierde un poco de color con tal de que se mantenga la animación en un archivo que no es demasiado pesado y que no necesita un software adicional para ser reproducido (como es el caso de los vídeos).
[center][b]EJEMPLO DE GIF
Tamaño: 57,5 kb[/b]
[image=https://i.imgur.com/VY54QoR.gif][/center]
[sep]
[big][c=#2172de]ＰＮＧ[/c] [/big]Este también soporta transparencias, así que es muy bueno para usarlo en Internet y en navegadores. A diferencia del GIF, maneja las transparencias con más elegancia y sin perder color porque soporta colores de 8-bits, y también de 24-bits, como JPG.
El PNG utiliza un algoritmo de compresión sin perdida, por lo que reconstruye los datos de manera exacta a los originales. El problema con PNG es que si se tiene una imagen con muchos colores y píxeles, obtendremos un archivo mucho más pesado que el JPG, por lo que no se usa con tanta frecuencia en Internet.
[center][b]EJEMPLO DE PNG PARA PRÓXIMO TUTORIAL
Tamaño: 148 kb[/b]
[image=https://i.imgur.com/XE83FfZ.png][/center]
[med][c=#f7aa2a]CONCLUSIÓN[/c][/med]Después de saber cómo funciona cada tipo de archivo de imagen, veamos para qué debemos usar cada una:
[c=#f7aa2a][b]GIF:[/b][/c] Perfecta para usar en archivos pequeños con colores limitados (escala de grises, por ejemplo). Evitar su uso para fotografías.
[c=#f7aa2a][b]PNG:[/b][/c] Utilizar en gráficos, ilustraciones, y archivos pequeños en la web que necesiten transparencias. Evitar en fotografías con muchos detalles que necesiten ser subidas a la web porque serán demasiado pesadas.
[c=#f7aa2a][b]JPG:[/b][/c] Ideal para mostrar fotografías en la web sin ocupar mucho espacio en un servidor. Terrible para edición de imágenes.[/quote]
[center][quote=#ffffff]Como se había explicado anteriormente, el formato JPEG no sirve demasiado para guardar imágenes y re subirlas en los tapices, a lo cual se debe de usar nuestro formato de PNG. Este formato es pesado alado del JPEG, sin embargo no es un impedimento para que subamos los edits a los tapices sin que nos de el "límite de dimensiones". [c=#f7aa2a]Ese límite de dimensiones no es más ni menos que el tamaño de nuestra imagen, el peso de esta, no las dimensiones en si de nuestro tapiz. [/c]Aclarado esto pasemos a explicar como pueden hacer para subir sus PNG sin problema alguno.
[med][c=#3858c9]GUARDAR PARA WEB | ALT+MAYUS +CTRL+S[/c][/med]
[image=https://i.imgur.com/sNbl1DM.png]
PNG tiene 2 formatos; PNG-24 y PNG-8
Cuando nosotros guardamos normalmente una imagen en PNG se hace en el formato 24 cual establece la paleta de colores full, esto ocasiona que el tamaño de nuestra imagen sea abismal y cuando queramos subir nuestro tapiz a iOrbix (y si supera los 500kb) no se pueda por lo anterior ya explicado, así que procederemos a cambiar nuestro PNG-24 a PNG-8.
[image=https://i.imgur.com/RNlef6v.png]
[image=https://i.imgur.com/VKUy9Qu.png]
Como ven aquí tenemos la plantilla de colores, nosotros podemos quitar o seleccionar los colores principales para que nuestra imagen tenga más o menos calidad, eso es al gusto de cada uno, pero con que se guarde ya directamente en este formato ya será mucho más pequeño el tamaño y apenas, muy apenas se verá la diferencia de calidades entre ambas.[/quote][/center]
[sep]
[center][image=https://i.imgur.com/tdbwbCW.png] [image=https://i.imgur.com/mvn62EA.png]
[b][c=#3858c9]IMAGEN 1= PNG-24 {184 kb}[/c] | [c=#f7aa2a]IMAGEN 2= PNG-8 {51,6 kb}[/c][/b][/center]
Muchas gracias. Me ayudará demasiado.
Bonita tarde. )