Have you ever visited a website and it loads … so … very … slowly?
There can be many reasons why a web page loads slowly, and one of those reasons may be that the images were not optimized before they were loaded to the site.
For most bloggers, images are an important way to help convey your message and connect with your readers. To keep your site running fast, I've compiled some information on how to optimize your images for a faster loading website.
Understanding the difference between image resolution for print and screen
If you take your own photos for your website, you most likely have your camera set to take high-resolution images to get the very best quality possible.
The same goes for most stock photography found online. Images are typically available in several high-resolution sizes so they can be used for print or the web.
Standard image resolution for print is 300 DPI (dots per inch), but for websites, it's much lower.
The standard for screen images used to be 72 PPI (pixels per inch), but high definition screens and retina displays are now able to show images at much higher resolutions.
Makes things complicated doesn't it?
What is the difference between JPG or PNG and which should I use?
There are several file types to choose from when saving graphics and images. For web design, JPG and PNG formats should cover all your image needs.
JPG (also known as JPEG) stands for Joint Picture Experts Group. This file type is used for most photos on the web because it can handle millions of colors and if optimized properly can keep image file sizes relatively small.
PNG stands for Portable Network Graphics. This file type is perfect for creating graphics with transparent backgrounds. If you are adding photos to your site, stick with JPG.
If you want to create some cute icons or a logo with a transparent background, you want to save the image as a PNG file. PNG supports transparency and shadowing, and JPG does not.
How to check the file size of an image
If the image is on your computer, check the image properties and look for the file size. You can also check the file size of an image online in most browsers by right clicking on the image and checking the image properties.
Another great way is to use an online tool like GTMetrix to test the speed of your site. It can provide you with a list of under performing areas of your site and tell you what images need to be optimized.
So what should the file size be
Great question, tough to answer. Depends on which type of file you are using and what size you want your image to be on your web page.
File size is measured in KB (kilobytes) and MB (megabytes). KB is smaller than MB and my typical rule of thumb is to try and keep photos well under 500KB and smaller images should be well under 100KB.
The smaller the file size, the faster the image will load. Keep in mind that a single web page can contain lots of images, not just the ones in your blog posts.
Unless you have a certain need to place a high-resolution file on your site, you should always aim to get the file size as small as possible without loosing image quality.
How to optimize images for a website
Here is a list of 3 great ways to optimize images before you place them on your site.
- Crop the Image
If you have an image you want to use on your website but don't need to show the entire image, crop it down to just the part you need. Cropping is an excellent way of reducing the images size by removing what you don't need.
- Optimize in Photoshop
Open the image you want to optimize. If the image is larger than what you need for your site, you can reduce the size by going to IMAGE > IMAGE SIZE and change the Width or Height.
To optimize further, save the image by going to FILE > EXPORT > SAVE FOR WEB. Under PRESET, select JPEG for photos or PNG-24 for smaller graphics.
To reduce the file size for a JPEG, select HIGH, VERY HIGH or MAXIMUM from the dropdown. You can also adjust the quality by using the slider. The lower you go, the smaller the file size becomes.
Make sure to select the 2-Up tab so you can view the quality settings against your original image. Play around with the settings until the quality slider is as low as you can get it without reducing the quality of the image.
If you have the 2-Up tab selected, you can see the file size of the original image and the file size of the image after your adjustments. When you feel the image looks good and your file size is as small as you can get it, click SAVE to save the file to your computer.
- Use an Online Editor
If you don't have Photoshop or something similar, there are several free online image resizing websites. You can use an online editor such as PicMonkey to open an image and resize it.
Some editors will ask what resolution you want to save the image. Select the smallest file size you can choose without losing the quality of your image.
If you don't have time to crop and resize all your images by hand, you could use an online bulk compression tool TinyPNG https://tinypng.com/. You can drag up to 20 images onto the site and it will take care of compressing each image down to the smallest possible file size.
Super quick and easy!
File Size Really is SO Important
You have precious few second for your site to load before your reader moves on. Don't lose them due to slow loading images. Take some time and evaluate the images on your site for large file size.
A well-optimized site is a speedy site!