Deviantart Youtube Twitter Facebook My feed Feed directly to your inbox

How to optimize your images for the web

How to optimize your images for the web
Choose your language / Elige tu idioma:englishespañol

Tenemos dos personajes, el que Sosfactory diseñó para realvideosite (gráfico con degradados y por consiguiente muchos colores) y el personaje estrella en el relanzamiento de los juegos POG que Sosfactory diseñó para Funrise Toy Corp (Tazos para los hispanos).

Haz click en la imagen si quieres ver el videotutorial básico de Photoshop para guardar tus gráficos para web, tu misión consiste en conseguir la mayor calidad ocupando el menor espacio posible.

Video Tutorial: guardar web Photoshop

¿Qué formato de archivo deberíamos usar para web? ¿JPG o GIF? Mucha gente usa un formato u otro indiscriminadamente… MUY MAL CHORICETES!!!! Así nunca dejaremos de ser Newbies.

El procedimiento básicamente es este:

  1. Guardar para web en el menú "Archivo" de Photoshop
  2. Escogemos JPG al 60% (para web no necesitamos más calidad)
  3. Vemos cuantos kb ocupa la imagen
  4. Escogemos GIF y vamos bajando el número de colores, tenemos que usar el menor número de colores pero sin estropear la imagen
  5. Vemos cuantos kb ocupa la imagen
  6. Elegimos el formato.

El extremo a la hora de ahorrar espacio usando imagenes para web lo encontramos en el Pixel art, al usar una paleta tan limitada de colores el peso del archivo es poquisimo… fijate en los dos ejemplos:

Pixelart

Imagen PIXELART guardada como Gif con 64 colores = 8.976 kb

Gráfico sin pixelart JPG

Imagen normal guardada con JPG 60% calidad =18.83kb

Bueno después de ver este videotutorial no tienes excusa, si sigues guardando en formatos de archivos inapropiados, o tus imagenes pesan más que mi tia Puri, la culpa no es ni de Photoshop ni del cliente… es solo tuya!!! CHORIZO!!!!!

This post was written by:

Sergio Ordonez - who has written 82 posts on SOSFactory Blog.

My name’s Sergio Ordoñez I´m illustrator, graphic and web designer. A selection of my work is included at SOSFactory. If you want to support this blog, please be an active member: tweet the posts, participate in the discussions and the exercises :)

Contact the author

2 Comments For This Post

  1. Javier Says:

    Muy bn aunque todavia sigo en conclusion, queria ver que paginas me recomiendas aparte de la tuya que satisface a nosotros los que nos lanzaremos de freelance … Asi que espero respuesta para que me des una web OK! Os espero!
    JDC Designs ©CORP.

  2. Sergio Ordonez Says:

    Hay un montón de páginas, por ejemplo freelanceswitch.com o freelancefolder.com.

    Saludos.

Leave a Reply