For the web, size matters. Too many images or images that aren't optimized can cause a relatively simple webpage to be several megabytes, which is horrible to download on a slow network like cellular 3G or my crappy home internet.

There are a lot of factors that go into the size of an image, so here's a quick breakdown of how I optimize images.

General

I try to never have an image larger than 200kb on a page. Usually just resizing the image to a smaller size is sufficient. For most web images, you shouldn't need larger than 1800px wide by 1200px tall, even for background images. I typically resize in Photoshop, though Shrink O Matic makes bulk resizing easy.

Photoshop's Save For Web produces the smallest file sizes I've seen for JPEG, GIF & PNG, but after the individual optimization steps are taken below, always run the images through ImageOptim

If an image is going to be uploaded to social media, the service will run their own compression on it so you don't do much beyond the Photoshop > Save for Web & ImageOptim steps.

JPEG

Best for: Photos, smooth color transitions

  • Photoshop > Save for Web > JPG
  • Set Quality to 60, if you notice artifacts then start bumping it up 5 units at a time, usually no greater than 80.
  • Make sure "Progressive" is checked to allow users to see parts of the image as it downloads.
  • Run through ImageOptim

GIF/PNG-8

Best for: limited color palette & binary transparency

  • Photoshop > Save for Web > GIF or PNG-8
  • Adjust the number of colors to be as low as they can be without losing visual fidelity. I usually use "Selective" for color and "Diffusion" for dither.
  • Run through ImageOptim

PNG-24

Best for: images with smooth transparency, ideal for images with limited color palettes

  • Photoshop > Save for Web > PNG-24
    • Make sure "Transparency" is checked.
  • Run through ImageAlpha
    • ImageAlpha allows you to adjust the number of colors in the PNG, greatly reducing file size.
    • Typically you can drop down to 128 or 64 without a huge drop in quality, but it all depends on how detailed your PNG is.
    • I usually use the NeoQuant or Median Cut algorithms as they produce the greatest savings.
    • Keep "Dithered" checked.
    • Toggle back & forth with the "Show original" button to judge the quality of the optimization
  • Run through ImageOptim

This tool also offers some great PNG-24 savings and allows you to do some bulk compression, but it seems to be doing the same thing as ImageAlpha. Pngyu

Also be sure to read Photographic Images with Transparency below.

SVG

Best for: vector graphics like charts, logos, icons. Great for animating in-browser

  • Export as SVG from Illustrator CC ( File > Export > Export As )
  • Run through SVGOMG
    • I'll typically have almost all the options below "Precision" checked, except for "Remove viewBox"
    • Play with the options depending on your SVG. If you are planning to animate the SVG, you may want to uncheck "Clean IDs" and "Collapse useless groups" and "Merge paths" so that the individual layers can still be animated

Photographic Images with Transparency (SVG+JPEG)

Best for: "cutout" photos

When the need arises for a photographic quality image with an alpha mask ( like a person cut out from a background ) and the PNG-24 image optimization techniques don't get your file size low enough, you can utilize SVG with JPEG to have a better quality photo with alpha transparency.

I built a tool called JPNG.svg to do this automatically by base64 encoding the photo & mask into an SVG. For the best results, try this:

  • Photoshop > Save for Web > PNG-24
  • Make sure "Transparency" is checked
  • Drag & drop the image into JPNG.svg
  • Try playing with the options then re-uploading the image to see how it changes the file size.

There are some other methods to accomplish this, so read up if you want to try to optimize even further.

If you have any questions or additional image optimization tricks, let me know in the comments below!


5,302 7 79