Hey there, when I first started building my site here at Level 1 Development I went about it rather recklessly. I was so focused on the design of the site and making it look as cool as possible that I couldn’t be bothered to optimize any of my images properly. It wasn’t until I started working on the SEO of my website that I realized I had made a grave mistake. See, the search engines rank page performance pretty high on their list of factors affecting your SEO.
Google actually has a tool that you can use that’ll tell you how your website performs speed wise called Google Page Speed Insights. Well I punched my website’s URL into this tool pretty confident that my site would perform just fine. After all, when I pull up my website on my phone or laptop it loads within seconds. I was wrong, and not just a little wrong. I was like ‘skip the whole semester and show up the day of the final’ wrong. Out of 100 my website scored a 26 on the Page Speed Test.
Now there’s many things that go into making your website faster, I’ve spent time working on just about every aspect of my site to get it improved but today I’m going to focus primarily on optimizing your images so they don’t put as much strain on load times. Primarily I’m going to focus on JPGs and PNGs.
I’m going to start out with JPGs since they are the easier of the two to optimize. To manipulate either of these image types you’ll need some form of image editing software. Here at the office we use Adobe Design Suite for just about everything so we use Adobe Photoshop to edit our images. You’ll need to know a couple things before editing your image.
1. Roughly what size your image will be displaying on your website
An image that’s displayed at 2000px by 1500px is going to be a lot heavier than an image that displays at 200px by 150px. If the image in question doesn’t have to be massive then shrink that bitch down to a more manageable size. That’ll knock a bunch of overhead off right away. Now if your image needs to be 2000 pixels wide by 1500 pixels tall, say it’s going to be a hero image or a parallax background image then I’ll ask the second question…
2. Is the image displayed in the foreground or the background
If the image in question is displayed in the foreground as a primary area of focus then you’ll have to make sure that your image’s quality remains intact throughout the optimization process. When you go to save a JPG image in PhotoShop it’ll prompt you to select a quality level for the photo. The scale is between 0 and 12 and you’ll notice the lower you travel on that scale, the more your image’s quality takes a hit. Be sure to have the Preview checkbox checked in order to see the quality of your photo at the level your Quality Slider is set to.
The goal here is to trim that file size down as much as possible while retaining a decent quality level. If your image is displayed in the foreground and is a primary area of focus then you’ll need your quality to remain pretty good, if the image is a background image and you have more flexibility. The quality can take a little bit more of a hit in the name of file size without your viewers noticing it too much. You’ll notice in the above example, the quality slider was set to 12. The image itself is a background image I used on the homepage of this website. It’s intended to be blurry to draw focus to the elements laid over the top of it. This is a perfect opportunity to trim this image down to almost nothing as the artifacts and pixelation will be hardly noticeable since the image is already blurry. In the following image you’ll see I’ve set the quality to 0.
Now this might be a bit too much of a quality cut as you’re able to see pretty clearly the artifacts and pixelation in certain parts of the picture. But, in the same breath you can see pretty clearly the overall file size of the image has come down considerably. Where it used to be around 445K it’s now down to around 65K.
Finally, here in this last picture you’ll see I’ve adjusted the Quality Slider up to level 4. This gets rid of some of the artifacts and pixelation from the previous example while also keeping the file size very small. You’ll notice there still is some pixelation but that’s okay nobody will notice that in the background.
The Quality Slider in Photoshop is a great way to knock down the overall file size of your JPGs while also being able to ensure the quality of your photo remains within reason.
Onto the second image type, PNGs. This is the real reason I decided to cover image optimization today. One of my favorite parts of my site is the feeling of layers. I like layering graphics to give my designs depth. This involves using images with transparent backgrounds. In some cases you can use SVG files which are essentially vector graphics translated into code that the browser can interpret and display with relative ease. If you can substitute a PNG with an SVG, I highly recommend it. If you can’t you’ll need to use PNGs which are larger in file size.
I used to think you couldn’t optimize PNGs. They were a lossless image file type that you couldn’t optimize in any real way other than decreasing it’s dimensional size. Well today I found out I was wrong.
Just out of curiosity I searched how to optimize PNG files on my website and I came across this article by Smashing Magazine. In the article they go through a couple different ways you can get your PNG file size down to a more manageable level. After reading the article my favorite combination of techniques was to use the Posterization Adjustment in photoshop to decrease the overall number of colors in the image file followed by the “Dirty Transparency” technique.
The “Dirty Transparency” technique was especially effective as it reduced my PNG’s file sizes by almost 50%. Pretty much what it entails is removing pixel data from your image. The primary purpose of a png is to have that transparent background, well in that transparent part of the image still exists RGBA pixel data. This technique removes that data from the file and in turn drastically reduces the size of the file.
Here you can see how my PNG went from 639KB to 225KB. That’s a massive difference in file size. Even though this image is still pretty large in file size, it’s a pretty dimensionally large png file so this is about as good as it’s going to get. While I’m still not 100% sure how it works technically, I do know it’s saved me a ton of file size overhead. If PNG file sizes are giving you fits I highly recommend rolling through their tutorial and see if you can’t get the same kinda results I did.