tips to improve image quality while blogging // Blogger & WordPress

Did you ever edit a photo, think, Gosh this is the most beautiful thing I have ever created, post it online, and then shriek in horror at the reduced image quality? Been there. Reduced image quality is my archnemesis. We’ve had several fights over the years. And while I definitely don’t pretend to be an expert and am really still a young Padawan when it comes to photography, I have picked up a few tips and tricks over the years, especially with my switch from Blogger to WordPress.

Things to note before reading:

– I prefer image quality over image speed. I want my photos to look beautiful, even if that means compromising the load time of my site. A lot of people feel differently about this, and that’s fine. Just know that these tips will focus on getting the best image quality, not getting the best speed. I haven’t noticed a big change in speed once implementing these, but if you post a lot of photos, you’ll probably have to sacrifice some load time.

– I use WordPress.org and have very limited experience with WordPress.com, so I’m not sure if all of these will apply if you’re using the free version. If you are, please let me know your tips in the comments!

– Every monitor/screen/computer is different. I primarily use a desktop with 1080p resolution while blogging. I know a lot of people use laptops and other mobile devices. If I view my blog on my phone, I don’t really notice problems with image quality like I do when viewing on my desktop. And if some of you out there have 4k screens, what looks good to me might look really bad to you.


Tips for Blogger
(Does anyone use Blogger anymore? IDK.) I used Blogger for six years, and I must say that I actually prefer the way it handles images. I found that it was a lot easier to achieve the look and size I wanted, though to do so I had to use a 3rd party image hosting service.

(Keep in mind that some of these tips might be outdated because I haven’t been on Blogger for ages. It’s quite possible they’ve updated things so that these aren’t issues anymore.)

 

1. Don’t upload pictures directly to Blogger.
I hope this has changed since I left, but Blogger used to be awful about decreasing the image quality of photos when uploaded directly to the site, much like Facebook does when you upload photos. I always, always tried to avoid this if possible.
(update: I tried a comparison for this post and didn’t notice much of a difference, so I think they’ve probably updated this since I last used Blogger!)

 

2. Use Flickr!
Flickr was my lifesaver when I was on Blogger. I originally used Photobucket (wayyy back in the day), but the photos still didn’t look great. Flickr didn’t have this problem. The photos showed up exactly the way I wanted to, and I simply embedded the image code into my post on Blogger and went on my merry way (you can also select which size you want when you embed). But do note: a few years ago, Flickr changed its embed code so that it automatically has a frame around it that shows the image name, your name, Flickr logo, and share buttons whenever you hover over the images. If you don’t like this frame (I kinda hate it, personally), you can just delete those bits of the code.

 

Delete the parts of the code marked in red if you don’t like the hover-over Flickr frame:

 

3. Use PNG if possible.
I never thought that JPEG images showed up very well in Blogger. Since they’re a lossy image format, they lose image quality every time they’re uploaded and downloaded, so I always tried to use PNG or TIFF instead. You can’t export to PNG in Lightroom, so I usually exported as TIFF and then uploaded my TIFF files to Flickr. But word of caution: TIFF files are very large. Gorgeous, but big. If space or speed is a concern, avoid TIFFs (or at least use them sparingly). If PNG is an option, choose PNG (especially if you’re adding text to the photo) because it is a lossless file type. (JPEG also doesn’t have transparency support, whereas PNG does.)

 

4. Know the width of your page.
Blogger will not automatically resize your images if they bleed into your sidebar; it will just overlap the two. To avoid things looking messy, I recommend looking up the width of your main body (which is much easier to find in Blogger than WordPress), and keeping your photos within that width. If you have a sidebar, find out the maximum width by subtracting the sidebar width from your entire blog width (for mine, it was 1080 px, but Blogger makes this super easy to adjust if you want it to be more or less).

(My skin is crawling just seeing how awful this looks. The things I do for you guys.)

 


Tips for WordPress
I haven’t been using WordPress nearly as long as I was on Blogger (it will be one year in March), but in that time getting my photos to look right has been the ultimate struggle. My initial thought was hey, I’m paying for this now. It will be easier, right? Well…wrong. It’s taken me forever to learn these tricks.

 

1. Upload photos directly to WordPress.
(WordPress.org offers unlimited media storage, so this works well for me, but keep in mind that if you’re using WordPress.com, you only have 3 GB of free storage.) Unlike Blogger, I don’t notice automatic image reduction whenever I upload straight to WordPress, so I’ve pretty much completely cut out Flickr now. (sorry, Flickr. you served me so well.) WordPress doesn’t link photos from Flickr as well as Blogger does anyway, so it’s great that I can just upload directly to the site.

 

2. Use PNG or JPEG file types.
Sorry, but no big, beautiful TIFFs in WordPress; it won’t recognize the files. This was a real blow to me at first, but I’ve found that WordPress actually handles JPEGs pretty well. I don’t notice a huge difference. I still go PNG whenever I can, though.

 

3. Know the maximum width your template allows for images.
Just like in Blogger, it’s essential to know the width of your page. But whereas Blogger will bleed over into your sidebar, WordPress will attempt to resize the photo for you, and in doing so will decrease the image quality. The problem is that it’s harder to know what your width is, especially if you’re using a template that’s not very common. I had to go through a lot of trial and error before finding out that the maximum width my template will allow before resizing photos is 840 px. The photos won’t look any different in your editor, but you’ll see the difference on the actual post.

 

4. Do not resize in WordPress.
Always upload the exact size you want in WordPress. I find that any time I try to resize, even it’s just making something smaller, it tends to reduce the image quality. This happens even if I upload a perfectly fine photo at 840 px and make it a little smaller. I don’t know why! If it’s something like a book cover, I don’t really mind, but if it’s something I spent time on in Lightroom, you can bet that I’m resizing it before it goes on WordPress. (This doesn’t only affect text; the actual image quality is reduced, which you can see in the photo below by comparing the book’s cover.)

 

5. Use RGB color space.
I didn’t even realize I was exporting images from Lightroom using Adobe RGB until I tried to upload photos to WordPress and was horrified to find the color all muted. After some research, I found that WordPress uses RGB, which has less colors than Adobe RGB (although I don’t know how this works on a technical level). So if you’re uploading to WordPress and want to keep the same color vibrancy, be sure that your images are converted to RGB. (but maybe they fixed this recently because I tried to show an example and both photos looked exactly the same to me…)

 

6. Turn OFF speeding up images in Jetpack.
When I finally found this setting and turned it off, I  instantly saw a major jump in image quality. It was the thing that had been plaguing me the most. Turning it off means you can’t used tiled galleries, but I never used those anyway (I’m not even sure what they are?) so it didn’t bother me. But word of caution: I find that every time WordPress updates, this setting is automatically turned back on. So I constantly have to go and check it. It’s such a pain!

 

7. Change image compression to 100%
I’m not sure if I had to download a widget or if this slider is automatically available in settings, but WordPress automatically compresses your images unless you tell it otherwise. If you want to maintain the original image quality, set this to 100%.


–Emily

 

Do you have any tips for achieving the best image quality?
Do you prefer how Blogger or WordPress handles photos?
Which of these tips did you find most helpful?

2 Comments

  1. Valerie
    January 30, 2018

    Yes to all of this advice! I recently had this problem between loading speed and image quality a couple weeks ago. I noticed that the images on my blog weren’t as clear, but it was because I got a new Mac which had Retina display and all that jazz. So I made better graphics, but made them too big, leading to slower loading speed. Now I think I’ve reached a good medium, where everything on my blog looks good without sacrificing loading time.
    Valerie recently posted…Review: Reign of the FallenMy Profile

    Reply
    1. Emily @ Mixed Margins
      February 1, 2018

      Your blog design is the perfect blend of cute and professional! It’s gorgeous!
      Interesting about the Retina display on your Mac. I’ve only ever been a Windows user, so I hadn’t heard of that before. Good to know!

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

%d bloggers like this: