Adding Photo’s to Your Website – Newbies

I like to share what I have learned from creating my websites so that maybe you won’t have to stumble over the same things I did. If sharing what I’ve learned can make creating your own website just that much easier then it’s worth it.

Adding photos to your website sounds simple enough right? Wrong. Photos can be an insidious addition to a website, for a couple of reasons. One is they take up a huge amount of memory if your not careful. And second, a website wouldn’t be a website without several photos right? When these memory hogs are uploaded to your website, and you place two maybe three photos on a page, they will slow down your page load time significantly!

If you’re thinking, “I don’t use a fancy digital camera. I take pictures with my cell phone so they can’t be very big.” Guess again. The highest pixelated photos I take are with my Samsung cell phone. On average they contain 5312 x 2998 pixels. That is a humongous number of pixels!! Considering that your average profile picture online is recommended to be 200 x 200. Now 5312 x 2998 looks huge!

I found out about posting huge pictures on my website when I was running out of memory. I had been so busy filling in the content I didn’t even consider the size of the photos!

The image below is straight off of my cell phone. It’s an enormous 5312 x 2988 pixels!! To put it on my website I would want to get rid of as much of the background as possible so the focus will be on the flower. But I also want to reduce the size of the resulting photo. I’m using GIMP to do this.

Enormous photo off of my cell phone at more than 5000 pixels!
I select the specific part of the photo I want the focus to be on….the flower. So I select and copy it.
I open a new file and set the pixels at 500 x 300 and paste my selected flower onto the page.
As you can see the flower is way bigger than my new 500 pixel area so I use the GIMP scale tool. The box reflects the size of the flower at over 2000 pixels. I just delete the numbers the arrow is pointing at and enter 500 x 300 or click the down arrows until 500 x 300.
After entering or arrowing down to 500 x 300 I hit enter and there is your new reduced size photo. This does not reduce the pixels! It reduces the dimensions of the photo.

Reducing a photo isn’t difficult to do. You do need a software that can reduce and not just resize your photo. There is a difference. I use GIMP for all my photo needs. It’s free and very functional. It takes a little bit of practice to get good with GIMP but there are tons of tutorials online to help.

Photoshop has a resize/reduce feature as well and Adobe has a photo manipulation tool. There is also Irfanview. This is another totally free software you can download like GIMP. It doesn’t have all the functionality that GIMP has but it does have photo reducing abilities.

Check your photo’s for optimal page load and save your memory!

Originally posted 2019-05-28 06:35:01.