Category Archives: Image

Content, General, Image, Latest Happenings, Performance

New tool: Easy image optimization with Smush it

22 Comments

Download the Smush it Firefox extension to follow along with my post.

I’m at Ajax Experience this week with my teammate, Stoyan Stefanov. This morning we did a lightning-demo of our new tool SmushIt.com. Smush it allows you to automate image optimization by using the best of open source algorithms to achieve the smallest, high performance images possible.

Image Optimization Lightning
View SlideShare presentation or Upload your own. (tags: performance image)

Smush it comes in different flavors:

  • You can upload a bunch of pictures in your browser
  • You can provide us with a list of image urls or
  • You can get a Firefox Extension to optimize the images found on any web page

Our fundamental principal was that the images we produced needed to be 100% pixel for pixel faithful to the original quality. That means that our techniques are completely lossless. We decided to let designers decide what quality level was necessary, then, given that quality, we use the best open source compression algorithms to make the image as small as possible.

Smush it also generates a zip so that you can easily download and replace all of the images in your page.The tool smushes your images in several ways and outputs the best result, or gives you a bravo if your images are already optimized. Some of the options we test are:

  • Crush PNG
  • Convert GIF to PNG
  • Convert JPG to progressive JPG
  • Remove Metadata
  • Compress animated GIF

We would love feature requests, bugs, or suggestions so that we can improve the tool. I am nicole at my domain. At Ajax Experience I showed the tool on Korea Yahoo, BBC News, and Barack Obama’s site. Can you guess who had over 300K of useless image bloat?

Modern sites are doing more than they ever have before, this tool will help keep them lean, mean, and (of course) fast.

Christian Heilmann recorded a video of our demo for YDN. The audio is a bit wonky, I’ll link to the official AE recordings as they become available.

Accessibility, Art, CSS, France, Geek, General, Image, JavaScript, Mobile, Performance, XHTML / HTML

Optimisation des Images : Les 7 erreurs à éviter at ParisWeb

3 Comments

Je vais parler (en francais! eek!) avec Eric Daspet de la performance des images pour le web a ParisWeb. Les inscriptions pour Paris Web 2008 sont officiellement ouvertes. Jusqu’au 15 octobre au soir, vous bénéficierez de tarifs réduits. Le conference sera lieu a Paris le 13-15 Novembre. J’attend vous voir bientot alors. ;)

Voila le proposition

Voulez-vous améliorer la vitesse de vos pages web et réduire l’impact écologique et monétaire de votre hébergement ? Voulez-vous faire ceci avec peu de changement de code et en gardant une belle interface graphique ? Cette session va vous apprendre les 7 étapes pour mettre votre site web au régime. Comment perdre des poids que votre site a pris en rajoutant les dernières nouveautés. Et, encore plus important, comment ne pas reprendre ce poids !

Quand on commence un site de zéro, il est forcement très rapide. Au fur et à mesure, en rajoutant des modules, des flux, des images, l’expérience de l’utilisateur devient plus riche, mais aussi plus frustrante quand l’internaute est forcé d’attendre trop longtemps pour le chargement de la page. De premier abord, l’optimisation des images semble basique, facile. Néanmoins, la plupart des sites les plus réputés au monde ne suivent pas encore tous les standards pour l’optimisation des images. Faites-vous les mêmes erreurs ?

L’audience va apprendre comment :

  1. Améliorer la vitesse des pages web
  2. Optimiser les poids des images
  3. Eviter les pièges les plus problématiques et implémenter les petits astuces pour rendre les sites plus performant. Utilisez-vous encore alphaImageLoader ? Quel type de dégradé est le moins performant ?
  4. Arranger vos sprites pour iPhone. Comment contourner ses limites de cache ?
CSS, Geek, General, Image, Latest Happenings, Performance, XHTML / HTML

So you wanna be a web dev?

1 Comment

The Web Standards Curriculum published by Opera is a great place to start. It will give you the basics of Front-end Engineering from the ground up. The second wave of articles was recently published including a background image and sprites how-to by yours truly.

Time to board a plane, so I can’t tell you more just now, but check it out. It is a great place to get started or brush up on your understanding of web standards.

Content, Cookie, CSS, Geek, General, Image, JavaScript, Latest Happenings, Mobile, Performance, Server, XHTML / HTML

Video, Yahoo!s latest performance breakthroughs, or — I’m famous!

3 Comments

Well, not quite. ;) But I am pleased with the results. Who would have thought that the shy girl who almost failed a public speaking course at university would turn out to really enjoy presenting. Turns out I only like speaking about geeky things, preferably to geeks. A limitation perhaps, but far less limiting than nearly peeing myself with fear in college. No, not literally.

Anyway, check it out. It is jam packed with brand new performance ideas to make your site fly.

Content, Cookie, CSS, Geek, General, Image, JavaScript, Mobile, Performance, Server, XHTML / HTML

Yahoo!’s Latest Performance Breakthroughs

The Exceptional Performance team at Yahoo! added 20 new performance rules and refined some of the original rules. I’m really excited about this; this performance goodness is just what developers need to accelerate the user experience even further.

  1. Flush the buffer early
  2. Use GET for AJAX requests
  3. Post-load components
  4. Preload components
  5. Reduce the number of DOM elements
  6. Split components across domains
  7. Minimize the number of iframes
  8. No 404s
  9. Reduce cookie size
  10. Use cookie-free domains for components
  11. Minimize DOM access
  12. Develop smart event handlers
  13. Choose <link> over @import
  14. Avoid filters
  15. Optimize images
  16. Optimize CSS sprites
  17. Don’t scale images in HTML
  18. Make favicon.ico small and cacheable
  19. Keep components under 25K [mobile]
  20. Pack components into a multipart document

Stay tuned, we’ve got more tricks up our sleeve. ;)