Images are usually the number one culprit of slow websites -- by a long shot. So it’s important to make your image file sizes as small as possible, which improves download speed. This makes your site load faster for your visitors and gives them a better experience using your site (and who wants to wait for a slow site these days?)
Below is an outline of what you can do to shrink your images’ dimensions and file size.
1. Bring the image down to an ideal pixel size
Images straight from a digital camera are usually too large to go on the web. They are thousands of pixels wide, which also makes for large file sizes. You will rarely need images to be this large, as most websites’ content areas are only around 960 pixels wide. So you need to bring the pixel size down. A good rule of thumb is to keep the size no larger than the dimensions that you need.
Here are a few guides for bringing pixel size down:
2. Decrease the file size
As an added benefit of bringing the pixel size down, your image’s file size also goes down. If you want to get into the nitty gritty, you can remove the extra data inside image files also.
Images that aren’t web-optimized usually have a lot of extra data in the image file. The data isn’t actually visible when you look at the image, but embedded in the file itself. The data adds to the file size and slows down page loading time for your site visitors.
Fortunately, you can easily remove this data without any fuss. Soholaunch does this for you automatically in the file manager. Before you upload your image files, make sure the “format images for the web” checkbox is ticked. And that’s it! Soholaunch takes care of removing the data during the upload.
An added feature of the Soholaunch file manager is that it lets you know when your images may be too large. It indicates this by putting a red square mark next to their file name, like this:
Try to keep image file size well below 1MB, as a rough guide.
As an alternative, if you have Photoshop, you can use its “Save for web” option. Go to File > Save for web. Then use the slider on the next screen to bring the quality and size down.