After a couple of years of blogging, I noticed that my site was loading slow. Simultaneously I learned about SFW. That isn't Safe For Work. It's Save For Web.
In Photoshop, there's a magical and quick way to prep your images so they load fast and don't bog down your site.
JPG vs PNG
First let's talk about JPEG images versus PNG images. There's a lot of technical aspects behind the different file types, but I'm going to cut through that to get to the takeaway information so you know how to apply it to your blog.
Most basically, you want to save your images as JPG files if they're photos or if there's a lot of "stuff" going on in them.
The PNG file type should be reserved for when you need to save something with a transparent background.
A great example is the logo at the top of my site: while it has a complex and textured background of the speech bubble, the area surrounding the image at the corners is transparent so it will lie nicely on the textured background without having a white border.
You can also use PNG for illustrative work, like simpler line drawings and flat design work (meaning no gradients).
What if I'm Not Sure on JPG vs PNG?
The great news is that Photoshop's Save For Web dialog box will help you make decisions on those tough images where it's hard to decide whether the PNG or JPG file type would be better.
Here's a great example from my Heart and Arrow design feature. Because most of the image is a screenshot of a blog design, wouldn't it make sense that PNG would be better since it's a flat image? No: because of the high resolution rendering of the Macbook combined with the images within the screenshot, it's a very complex image.
This image was originally saved as a 442KB png file. Here it is as a PNG:
And here it is as a Saved-For-Web JPG, at 73KB.
Not much difference, huh? And I've saved 369KB by saving this image for web.
How to Save For Web in Photoshop
So how do you work your magic?
Within Photoshop, open your image file.
Go to File → Save For Web…. (Or if you're feeling shortcut-ey, type Command+Option+Shift+C on a mac or Ctrl+Alt+Shift+C on a PC.)
Within the dialog box, choose JPEG as the File Type and Very High as the Compression Quality.
The key points to look at are the preview box to see if you're losing quality, but also the file size directly underneath the preview box. When you're changing settings on the right, you can see the file size grow or shrink. The goal is to get the best quality image at the lowest file size.
You can also play around with the other settings, as it'll show you the preview within the dialog box. If the colors look off, try playing around with the Preview drop down.
This is also a great time to resize your images. In this example, I don't need the file to be 1024 PX, so I can save a lot of file size by resizing it to be 700px wide. Photoshop will automatically calculate the image height so it stays within the same aspect ratio.
Notice the drastically reduced file size!
And again, here is the image as a 442KB png file:
And here it is as a Saved-For-Web JPG, at 73KB, with a savings of 369KB.
Your blog will load tons faster if your images are Saved For Web. This includes not only your blog content images, but also the images used on every page of your blog:
- Header image
- Sidebar images, including your bio photo
- Social media buttons
- Any other images that appears in the Header, Sidebar, or Footer of your blog
Do your blog a favor and help it to load faster by Saving For Web within Photoshop. It'll make your readers happier and will also help you look more like a professional blogger with a fast load time.
Go ahead: clean up your blog and save your images for web moving forward.