If you are building a responsive design, where possible, use a ‘mobile first’ technique and swap in alternate images for larger viewports. Verdict: If you are building a fixed width design ensure you only use images that are the size of the space they display in. There’s more on these two techniques in this post. Polyfill) or a combination of PHP and JavaScript (e.g. It’s definitely worth opting for a mobile-first implementation if possible (in this instance you would use the smallest version of a file first and then swap in larger versions for larger viewports with either JavaScript (e.g. It’s not an ideal situation but I’m also not entirely happy with any of the other offers on the table at present. This gives me a little lee-way in case of design amendments (say the client asks for the design to be a little wider). For now however, if for example the maximum size the image will fill is 800px wide, I tend to export an image 850–900px wide. It’s a well documented issue and there are a few techniques on the table to deal with it (such as Matt Wilcox’s Adaptive Images and the picturefill polyfill). What about users on smaller screen devices? They are downloading an image sometimes 3–4 times larger than their device can see with the associated bandwidth hit that entails. By using a snippet of CSS (max-size: 100% ) the image scales to the available space: Generally, although no-one is particularly happy with the hit, we export the image at the largest size we envision it will be viewed at, link to that image as normal but leave off the width and height attributes. However, with responsive designs things are far more complicated and this kind of situation is sometimes unavoidable. You wouldn’t want to export an image at 1600px x 800px to fill this space as this would be a complete waste of file size. You would export an image to fill that gap that was 800px x 400px: This used to be easy with fixed width designs – you knew the space the image would fill so could export an image to match.įor example, say you have a DIV that displays on screen at 800px wide. Using an image appropriate for the size it will be displayed at in the browser presents a pickle at present. Serving images at the appropriate file sizes Whatever device you view the page on everyone benefits.

Verdict: Do it, it’s easy to do and makes significant differences to page speed. Kraken (Online tool also available as a browser extension) Image Optimizer (Windows – Visual Studio extension) Removing this information through optimisation doesn’t degrade the visual quality of the image and yet doing this on just one image can easily save more file size (which affects page loading speed in a REAL tangible way) than removing a JavaScript library, plugin or a whole file of CSS.ĮWWW Image Optimizer (WordPress plugin – might require the help of your host to install) There’s lots of surplus information in images (meta data and the like), even those that are compressed. So with that in mind…įirst and foremost, if you want to provide the best experience for all users of your website don’t just compress your images (using Fireworks or Photoshop and choosing the most appropriate format and setting such as PNG/JPG/GIF) but also optimise them. They are projects where time and budget are limiting factors and this effects which squeaky wheel gets the oil. Almost without exception they have budgets of 10K or less. The sites and projects I work with week in and week out are not the Facebook’s and Twitter’s of this world. I’m giving my own biased view of what matters but that may not necessarily be applicable for your own scenario. I’m going to give everything that follows the great big caveat that as with everything relating to website development, “it depends”.

Minify css with codekit