Youtube Facebook Twitter Deviantart 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

I have use 2 characters like examples, the one Sosfactory designed for realvideosite (mascot with gradient and lot of colors) and the main character of relaunch of POG games, designed by Sosfactory for Funrise Toy Corp .

Click on the imagen if you want to see the Photoshop videotutorial to learn how to save for the web, the goal is saving with the best quality but the smaller size

Video Tutorial: guardar web Photoshop

Which is the file format I should use for the web? ¿JPG o GIF?

This is the proccess:

  1. Save for web in Photoshop “ARCHIVE” menu
  2. Choice JPG with 60% (for web we really dont need more quality)
  3. We see how many kb´s have the image
  4. Then we choice GIF and we go down with the number of colors until it starts to looks bad. 
  5. See how many kb´s it is.
  6. Depending on the weight of the file we choice our file format.

If you really want to save size when designing for web, the best is using Pixel art, notice we use just a few colors, so the file is really light… here is 2 examples:

Pixelart

PIXELART saved as Gif 64 colors = 8.976 kb

Gráfico sin pixelart JPG

Standard image with JPG 60% quality=18.83kb

Ok, so you already have no excuses :)

 NOTE: the video textboxes are in spanish, this tutorial is not too complex so I think everybody will understand it. In the future I promise all the videos will be in english… sorry too much work doing 2 blogs (spanish and english) for just me.

This post was written by:

Sergio Ordonez - who has written 86 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

3 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.

  3. Mista Buggs Says:

    Nice!

Leave a Reply (use English if possible, please)