Today I'm going to show you three ways that you decrease picture file Size to keep your pages loading quickly and converting more sales. So I've done a post about picture size versus file size before but basically, all you need to know is that there are 3 key ways that you can resize your picture to get the overall file size down.
3 Ways to Decrease Picture File Size
First step
The first step is to check and change the resolution of your file. So say for example you've had a photographer come in and take some pictures or some product pictures for your website. Most photographers will give you two versions of your picture, they'll give you the high-resolution version and then they'll give you the low-resolution version.
This is the DPI or the dots per square inch of an image. High-resolution files are great for print because they can be scaled up and scaled down without losing quality but not so much for the web. Because the more dots you have per square inch the larger the image file is going to be.
So, for the most part, if you're working with the print you'd be looking at a file that is around 300 DPI but for the web, we really only want something that is around 72 dpi. You'll be able to check the resolution of a picture by right-clicking on the file. If you're on a pc and clicking on properties. If you're on mac try opening the picture in preview and then hitting command "I" which will bring up the picture information.
If you have a picture that's over 72 DPI there are a number of tools either free ones online or if you know how you can use photoshop, to change the resolution of your image. But here's the thing the 72 DPI image can still be quite a big file size so, there are other ways that we can look to resize this image to bring that file size down.
Second step
The next step is to just decrease picture file size for the space that you needed to fill on your website and yes this does mean that perhaps sometimes you might need to have a few different versions of the same picture. Which can take a little bit more time to put together but the speed savings are worth it. So, take this picture for example.
This is the 300 dpi picture of the original file from the photographer. Here's that same file size at 72 dpi.
So, you can see that we can keep the pictures roughly the same size on a screen without losing any quality. Now for good measure here's a version of the picture which has been cropped to fit a very specific space on my website. So, you can see from all three versions every time we've resized that picture the file size has also gotten smaller.
Third step
Now the third step is one a lot of people often forget which is to decrease picture file size online as much as you can without losing quality. And my favorite tool for this is TinyJPG or TinyPNG which is a free service you can use online. Then all you need to do is drag and drop the image onto the web page it'll compress the file for you and then you can download it in a new format. The thing that I like about this is they use a thing called lossless technology which means that the image file size doesn't actually lose a lot of quality in the process but the file size can be cut by 50 to 70 in a lot of cases.
That's it so if you have any questions about how to resize or reformat your images for the web or if you've got any questions about site speed in general feel free to just drop a comment below.
