It’s slow and I need to do something!
But I’m not a graphic designer…
and luckily for you, you don’t have to be. There are easy to follow instructions and you’ll be a pro after optimizing just a few images. Whether you’re working with Photoshop, GIMP or another photo manipulation software package, typing “optimize images for web” plus the name of the software package, into Google (or your search engine of choice), will bring you plenty tutorials to choose from.
…and I don’t want to pay for graphic design software.
You don’t need to purchase expensive software. GIMP is available for download online and is free. GIMP is a fantastic photo manipulation tool and can accomplish most any task that the paid/professional graphic software packages do. Keep in mind, when comparing capabilities, GIMP would most closely align with Adobe Photoshop. If you are looking to work with vector images, video, print or web editing, you’ll need to look at the Adobe/Apple suite of products. GIMP is photo/rastor image manipulation which is perfect for optimizing images for your website.
I want GIMP!
Great! You’ve decided make the web a better place (at least for visitors to your site) and optimize all the images on your website. Go out to https://www.gimp.org/downloads/ and download the version of GIMP that corresponds with your operating system. There is a version for both Microsoft Windows and OS X. Installation is easy – just click and do as directed. If you’d like to read a little more about GIMP before committing, https://www.gimp.org/ will give you all the information you need.
Got GIMP, now what?
Don’t be overwhelmed by the instructions — it really is easy! If you’ve never used image manipulation software, the first few go-rounds will be slow, but you will pick up the pace and before long you’ll feel like you were born optimizing images.
If you have a lot of images on your site, optimizing them all will be time consuming. Set aside a good block of time and get them done. Performance, load time and better user experience, make this effort well worth the time.
Keep in mind, JPG images are generally smaller than PNG — so go with the JPG, if the quality looks good. PNG’s are most often used when a transparent background is needed for a cutout image.
- Open the image you want to optimize for the Web.
- Click on “Image” then “Flatten Image” if available. This will change the image from RGBA indexing to RGB by removing the alpha channel, which isn’t normally used on Web images.
- Click on “Image” then hover your mouse over “Mode” and change the mode to “Indexed.” Instead of using a full palette of colors, you can save space by using only 256.
- Select “Generate optimum palette” on the Indexed Color Conversion menu and click “Convert.” The “web-optimized palette” can occasionally be useful if you want to try it. As with all changes to your image in GIMP, you can revert to an earlier state of the image if you’re unsatisfied with the new look. Click on “Edit” then “Undo” or press “Ctrl-Z.”
- Click on “File” and “Save As” to bring up the save dialog.
- Click “Select File Type (By Extension)” to choose the format for your image. Both PNG and JPEG are commonly used compression schemes for Web images, but you will likely need to try both to see which generates the smallest size. PNG files are highly compressed, while JPEGs are a better format for images with many colors.
Saving a PNG File
- Uncheck all of the boxes in the “Save as PNG” menu to generate the smallest PNG version.
- Click on “Save.”
- Right-click on the image file in your save location.
- Select “Properties” to see the size.
Saving a JPG File
- Check the “Show preview in image window” box to bring up a preview image of your JPEG and adjust the Quality slider. 85 is usually fine, though lower quality images are smaller.
- Click on the “Advanced Options” to bring up the additional JPG options.
- Select “Optimize” and uncheck the other boxes.
- Choose “2×2, 1×1, 1×1” in the “Subsampling:” box for the smallest image.
- Click “Save” when you’re satisfied with the image preview.
- Right-click on the image in your save location and select “Properties” to view the image size.
I really like GIMP, what else can I do with it?
Think you might be a graphic designer after all? If you find yourself wanting to learn more about GIMP, there is no shortage of tutorials online. A great place to get started is http://gimp-tutorials.net/. Here you’ll find lots of tutorials and resources (brushes, textures, etc.).