Another technical blog post today. Last time, I mentioned some of my issues in trying to keep photo quality up while minimizing file size. In this post, I thought I’d document some of those technical adventures in case it’s of interest to others who need to adjust online photo quality. Not really gardening/plant related, but it’s what I’ve been focusing on instead of working on my other posts.
The main issue as I understand it is this: I’ve been trying to maximize image resolution (to avoid everything looking all pixelated), which has resulted in file sizes that are too big and take up valuable space on the server. For example, this is a photo that I took with my iPhone 13 pro (12 megapixel camera). This is my main tool for taking pictures because it is super convenient and I don’t want to take a separate, stand-alone camera for taking photos. All of the photos taken for this blog, so far, have been with this iPhone or a previous version (iPhone 11 something or other).
When I import the photos from my iPhone into photoshop, they come in at 56 inches (4032 pixels) wide with a resolution of 72 pixels per inch (ppi) and a file size of 6000-10,000 kb. This one was 10,165 kb. Too big. So lately, I’ve been editing them to change the width to 8 inches (1440 pixels) and to increase the resolution to 180 ppi, thinking this would make them look better on the blog. I then saved them with a jpg image quality of 8. That results in the photo above with a file size of 817 kb, which is approximately 1/10 the size of the original photo and iit still looks good online.
I’ve been forgetting that I can compress the files, so I did that next using tinypng. That resulted in this next photo, coming in at 562 kb. It looks the same as the photo above to my eye. Opening it up in Photoshop reveals that it reduced resolution to 72 ppi, but upped the photo width to 20 inches (1440 pixels). Hmmm. I just noticed that 8 inches wide × 180 pixels per inch = 1440 pixels wide. And, 20 inches wide × 72 pixels per inch = 1440 pixels wide. They are the same! Forgive the newbie insight here, but I just figured out that the picture width in inches × resolution (pixels per inch) = width of picture in pixels. Just another example of high school algebra coming in useful.
I’ve read online that the resolution in photoshop mainly has to do with printing resolution and doesn’t really affect the resolution of photos published online. Confusing. Maybe that means if I reduce the resolution from my photo at the top of the page from 180 ppi to 72 ppi, while keeping photo width the same, it will result in the same quality photo? Let’s see if that’s true.
Yuck! Although the overall file size is much less at 172 kb, the photo appears much smaller in my browser and it is heavily pixelated. Looking at the math shows me why because 8 inches × 72 ppi = a measly 576 pixels of information, which is much less than the 1440 pixel width of my original photo at the top of the post. Hmm. Fewer pixels = photos that look pixelated.
Next, I decided to snoop and download a few pictures from some other bloggers’ websites and see what size their pictures were. (Actually, I did a lot of other confusing photo editing first to see how that affected picture quality, but we are skipping over that rather pointless journey).
Blogger 1 had these settings: Photos were 14-16 inches wide (1040-1155 pixels) with a resolution of 72.
Let’s see what happens when I process my photo with similar settings, but comparing whether jpg quality makes a difference (12 = maximum versus 8 = high) and whether compression makes a difference (compressed versus not). All four photos below were set to a width of 1040 pixels (resulting in a width of 14.4 inches). The upper row was set at jpg quality 12, the lower row was at jpg quality 8. Photos in the left column were not compressed, photos in the right column were compressed.
They all look the same to me. Compressed files at jpg quality 8 wins for smallest file size.
Blogger 2 had these settings: All photos were 9 inches wide (640 pixels) with a resolution of 72. Plugging in a similar formula for mine (with maximum jpg quality and not compressed) results in this very pixelated photo, which looks worse than the 368 kb photo above, lower right.
Below I compare my original uploaded photo to my favorite choice from this photo editing experiment. The details are:
Original photo (top): 8 inches wide x 180 ppi = 1440 pixels wide, jpg quality 8, not compressed, file size = 817 kb.
Favorite photo edit (bottom): 14.4 inches wide x 72 ppi = 1040 pixels wide, jpg quality 8, compressed, file size = 368 kb.
To my eye, these look the same. If I use this new editing procedure on similarly sized photos, it could save me about 449 kb of server storage space per photo (817-368 = 449 kb). I’m thinking I need to go in and re-edit all of the photos in my past posts to save space. This could take a while…
But first, let’s check on a few things. My server, where my blog photos are stored, has a maximum capacity of 10 gb (10,000,000 kb) and I have used 7.78 gb of it. According to my calculations, IF all my photos were fairly large and about 1000 kb in size, then I should be able to store 10,000 photos total! (That’s 10,000,000 kb storage space/1000 kb per photo = 10,000 photos). Uh oh. Something’s wrong here. Looking at my media library, I’ve only posted 1,100 photos and I know most of them are well below 1000 kb in size. I should have plenty of space left. What is going on here??? What could be taking up so much space on my server?
Hang on, I just thought of something…
Ok, I can’t believe it, but I’ve just figured it out after weeks of overwrought emotions and wasted time! I was poking around on my server and I noticed I have three backups for my website. I deleted the oldest one and suddenly the amount of server space that I have available for photos increased by 1.63 gb! Holy moly batman! How dense could I be?! First, there was an update that made uploading pictures verrrrrry slow, which made me think my website server was getting too full at 7.78 gb, which made me go through this weeks-long process of trying to compress my pictures, which was all pointless in the end because: the next wordpress update resolved the slow upload issue AND I just had too many backups that were taking up space on my server! Gosh, do I feel dumb. But at least I’ve got it solved and now I know how to better maximize photo resolution while minimizing file size. Time to work on the post for my trip to the Port Defiance Zoo!
ah, you have your own server…use blogger and it does what it wants to do to the photos. Computer stuff–I’d rather be gardening.
I actually don’t own my own server, it’s part of the subscription price for running my wordpress blog – it’s a similar package to what blogger provides, although I see blogger users get 15 gb of server space compared to my 10 gb. I remember trying to decide between the two platforms when I started blogging and getting confused on which to choose. Eventually, I went with wordpress, I think because most of the blogs I had been reading used that platform. Ah well, I don’t really want to move my blog and then have to learn how to use a new interface. You are right – I’d much rather be gardening than dinking around with computer stuff.
Does WordPress automatically back up your blog? Or is that something you do? I can’t even remember the last time I backed up mine, and the back-up’s I have been able to do are words only, no photos.
As for the storage one gets with Blogger I long ago exceeded that and now pay $1.99 a month…
No, I’ve got a plug-in that automatically backs up everything to the server where my blog is hosted. I paid someone to help train me and set up some structure when I first started blogging because it was such an overwhelming process. It’s still quite a bit over my head. Blogger sounds much easier in that way and 1.99 is pretty reasonable for extra storage. Not sure what I will do when I reach that point.