What is the best image size for your blog? Are you inadvertently slowing down your blog’s load time? What is this PPI/DPI thing? I’ve heard the questions being asked on different forums so I thought I’d try to explain a little of what I know, especially as it pertains to my own blog. Who knows, maybe you’re in the same boat and have some of the same questions, and these little tips might come in handy!
I’m not a graphic designer and I’m not a photographer, although I dabble in fun printables occasionally and take photos for my blog. In terms of software, I use Adobe Lightroom and a free program called Gimp.
Size your images only as large as your blog content width. For example, my blog content area is 690 pixels wide. There is no need for me to size my photos any larger than 690 pixels, since the content area will only display up to 690 pixels. An image of 800 pixels will automatically be shrunk when shown on screen.
This image is actually 800×533 pixels.
There is no concept of “per inch” in a web layout. So PPI (pixels per inch) and DPI (dots per inch) are not relevant when editing your photos for your blog, even though they may be available as options in your software. The 3 images below are saved at different PPIs, but you can see there is no difference in picture quality!
An image at 600 pixels wide by 400 pixels in height will have the same file size regardless of what the PPI is set to. This image will have 240000 pixels of information, and that’s what determines the file size. However, an image at 800×600 will have a larger file size than one at 600×400 because it contains 480000 pixels of information. Since the larger image contains more data and the file is larger, this will slow down your page load time – See Tip #1. The 3 images above are all 102 KB in size.
PPI and DPI are not relevant to web displays, but they are important when creating printables. Images that are meant to be downloaded and printed should be created at 300 PPI. If you download the photos above and try to print them, you’ll see they print at different sizes, with the 1000 PPI image printing at under 1 inch wide.
Save your JPEG images somewhere around the 80% quality range. This would mean about a 20% compression. Do some experiments with different JPEG qualities to see what works best for you. The image below was saved at 30% quality, or a 70% compression. The file size is now 43 KB as compared to the 102 KB of the photos above, but you can see the quality difference.
Do not scale your photos too small, and then try to re-enlarge them for display on your blog, as this will result in pixelation and blurriness.
This photo is the original image from above, scaled down in Gimp by 50%. Enlarging this image back up to 640×427 pixels gives the below result, which shows slight blurriness.
Adjusting the width and height attributes in an <img> tag in HTML does not affect the image size stored on the server. It only affects the display size seen on the website.
When using the <img> tag to adjust image size, only specify either the width or height attribute, not both. This allows you to keep the same ratio. Specifying both width and height attributes could distort the image being displayed.
WordPress stores multiple copies of your uploaded images in different sizes – a thumbnail, a medium copy and a full size copy – and they are different in file size. If you need to display an image at a particular size, pick the smallest copy that is the same or larger than your desired display size, and use the <img> tags to adjust display size. To display an image at 400 pixels wide, use the full size copy and shrink down to fit – do not enlarge the medium copy, as that will result in pixelation or blurriness – See Tip #5.
400 pixels wide, shrunk from full size copy
400 pixels wide, enlarged from medium size copy
Make all edits on your original photo. Do this prior to scaling/cropping/compressing so you’re working with all of your data.
Whew, that was a lot of information! If you’d like to read more on this topic, I found this website to be very useful, if a little bit technical. Or, ask questions in the comments below and I’ll try my best to answer them!