Why My Website Loaded So Slow Until I Fixed My Images

So last summer I finally decided to build myself a portfolio website. I had been putting it off for months because honestly the whole thing felt overwhelming. But I sat down one weekend, put on some music, and just started building.

By Sunday night I had something I was actually pretty proud of. It looked clean. The colors worked together. My projects were organized nicely. I showed it to my friend and she said it looked professional. I was feeling good about it.

Then I tried to open it on my phone.

The Spinning Wheel of Death

I am not exaggerating when I say it took almost 15 seconds to load. Fifteen seconds. That is an eternity on the internet. I sat there watching that little loading spinner go round and round and I could feel my excitement just draining away.

At first I thought maybe it was my wifi acting up. So I turned wifi off and tried loading it on mobile data. Same thing. Waited and waited. Finally the page loaded but it felt like it came in chunks, with images popping in one at a time.

I asked my dad to try loading it on his phone. He gave up after about ten seconds. Said he thought the link was broken.

So much for my professional looking website.

What I Did Wrong

I spent the next few days trying to figure out what was going on. I thought maybe my code was bad or maybe the hosting was slow or maybe I just needed to pay for something better.

Then I stumbled across this tool called Google PageSpeed Insights. You just put your website address in there and it tells you what is making it slow. And wow. It told me exactly what my problem was.

Images. All my images were massive.

See what I had done was just drag and drop photos straight from my camera and phone onto the website. I did not think twice about it. A photo is a photo right. Turns out a single photo from my phone was like 4 megabytes. And I had probably 12 or 13 images on my homepage alone.

Quick math says that is almost 50 megabytes just for the first page. No wonder it was crawling.

What I Learned About Image Sizes

I started reading about this stuff and honestly it is kind of fascinating once you get into it. Our eyes cannot really tell the difference between a perfect quality image and one that has been compressed a bit. But computers definitely can tell the difference in file size.

A 4 megabyte image and a 150 kilobyte image might look exactly the same on your screen. But one of them takes way longer to download. And when someone is visiting your website on their phone while waiting for the bus, they do not have time to wait for 50 megabytes of images.

Here is what I figured out works best:

Make Images the Right Size First

My photos from my phone are like 4000 pixels wide. But on my website they only display at maybe 800 pixels wide. So I was basically loading this huge image and then the browser was shrinking it down. Total waste.

Now I resize my images to the actual size they will be displayed at before I put them on my site. This alone made a huge difference.

Compress Everything

Even after resizing, images can still be compressed more. There is a lot of data in an image file that you do not really need. Compression squeezes out that extra stuff while keeping the image looking basically the same.

I was nervous about this part because I did not want my images looking all pixelated and gross. But honestly at 80 percent quality I literally cannot tell the difference. I have held my phone up to my face comparing the original and compressed versions side by side. They look identical to me.

Use the Right Format

This one took me a while to understand but basically different image formats are good at different things. JPG is great for photos with lots of colors and detail. PNG is better when you need a transparent background like for logos. WebP is kind of the new one that does a good job at everything.

For my portfolio I switched most of my photos to WebP and they got even smaller. Like a photo that was 200KB as a JPG became 120KB as a WebP. And it still looks the same.

The Actual Results

After I went through and fixed all my images my homepage went from almost 50 megabytes to under 2 megabytes. That is a massive difference.

Now my site loads in about 2 seconds. Sometimes faster. I tested it on different phones and different wifi networks and it works consistently well. No more spinning wheel of death.

The funny thing is that nobody can tell my images are compressed. Nobody has ever said hey your photos look kind of low quality. They just see a website that loads fast and looks good.

My friend who saw the original slow version was surprised when I showed her the fixed version. She asked if I had switched to a better hosting service. Nope. Same hosting. Just smaller images.

Why This Actually Matters

Here is something I did not know before. Google actually looks at how fast your website loads when deciding where to rank it in search results. So a slow website is not just annoying for visitors. It can actually hurt your chances of people finding you in the first place.

And think about it from a visitor perspective. If a website takes forever to load you probably just hit the back button and try the next search result. I know I do. We have all gotten so used to fast loading pages that anything slow feels broken.

Studies say most people will leave a website if it takes more than 3 seconds to load. Three seconds. My original site was taking fifteen. No wonder my dad gave up.

Simple Steps That Worked for Me

If you have a website that feels slow here is what I would suggest based on what I learned:

First run it through PageSpeed Insights. It is free and it will tell you exactly what is wrong. No guessing needed.

If images are the problem which they probably are then go through each one and ask yourself two questions. Is this image bigger than it needs to be. And has it been compressed.

Resize images to the size they actually display at. No bigger. Use a tool to compress them without making them look bad. Consider switching to WebP if you are still using JPG or PNG for everything.

Then test again. You will probably be surprised at how much faster things get.

What I Wish I Knew Earlier

Looking back I wish someone had told me about this stuff before I launched my site. It would have saved me a lot of frustration and embarrassment from showing people a broken seeming website.

The thing is it is not complicated once you know about it. It took me maybe an hour to fix all my images once I understood the problem. An hour of work for a website that actually works properly. Totally worth it.

Now whenever I add new images to my site I automatically resize and compress them first. It has just become part of my process. And my site stays fast.

If you are building a website or have one that feels sluggish check your images. Seriously. It might be the easiest fix you ever make.

Tools That Made This Easy

• Image Compressor – Shrink file sizes without quality loss
• Image Resizer – Get dimensions right before uploading
• PNG to JPG Converter – Switch formats easily
• JPG to PNG Converter – When you need transparency