How do I resize photos and images?
Should you resize your pictures? If you have a full resolution photo or graphic then the answer is probably yes. Your images shouldn’t be wider than your page width (1100px max for a one column, 800 px for two column, 550 px for three column). Aim for a file size of around 300KB or less per image.
Because images shouldn’t be larger 1100px wide, you might be tempted to scale down an oversized image in Omni or WordPress. Don’t do that – resize your pictures before you upload them. Just because you resize your image on the page doesn’t mean it’s a smaller file size. For example, if you upload a 5MB picture with dimensions 2000×2000 px, changing the dimensions to 100x100px will only change the display of that 5MB image. Every site visitor will have to download that 5MB image which has been only been scaled down in the browser. This makes it difficult and frustrating for your website visitors when they have slow internet connections. In the case noted here, it would be better to scale down your picture to 100x100px in a photo editor like Pixlr and upload it to your website. The file size will be much smaller and your page will load faster without a large image file slowing it down.
If you come across a slow or unresponsive web page, it’s often because someone uploaded a huge file. We have seen users upload image files as large as 34MB! Don’t do that! Keep your file size low and in kilobytes (KB) not megabytes.
It’s also important to note that you can make large photos smaller, but you cannot make small photos larger; they will look pixelated and bad!
How to Resize Your Photos in Pixlr
Pixlr is a free image editing website.
Go to the Pixlr editor site https://pixlr.com/e/
Click Open Image from Computer
We are going to upload a picture we found on the Vanderbilt Flickr stream.
Kirkland Hall with downtown Nashville. (Daniel Dubois / Vanderbilt University)
Image Details
File Size: 2 MB
Dimensions: 1640 x 1429
Resize your Image
Click on Image > Image size…
Type in the width and height dimensions for your image. Make sure Constrain Proportions is selected so the image scales proportionately. Click OK
General Image Sizing Guidelines
One Column Page: Width: 1100px
Two Column Page: Width: 800px
Three Column Page: Width: 550px
The width is suggested instead of the height because you don’t want your images to be wider than the width of your total page width. Most Vanderbilt websites are 1100 pixels wide total, but the content area is smaller for two and three column pages. These image guidelines will help you stay within the width of your page layout to account for page margins and padding. You also wouldn’t want a really tall image either that pushes down the rest of your content.
Slideshow Image Sizes
You’ll need to use different image sizes for your slideshow images. Notice that both width and height are specified for the slideshow images.
Slideshow Setting Image Sizes
Edge to edge: 2600 x 500
Full width: 1100 x 400
Standard: 800 x 400
Mini: 550 x 300
File Size
Keeping your file sizes low makes your pages download friendly to your site visitors with slow internet connections. Images displayed on your pages are automatically downloaded by site visitors. Large images (1MB and higher) can take a long time to load and your site visitors might leave before they even see your page. Large image files also create a lot of unnecessary strain on server resources.
Save your Image
Go to File > Save to save your image
Pick either PNG or JPEG from the format dropdown. These are the only two image formats that will work on your website.
PNG
PNG will save the file full resolution which will sometimes result in a larger file size.
JPEG
If you select JPEG format you can adjust the quality setting to reduce the file size. Don’t lower the image quality too much or the picture will become pixilated and distorted.
Image Details
Compressions: 30% (Quality: 70 in Pixlr)
File size: 69KB
Dimensions: 450 x 302
70% compression gave us a 69KB image with dimensions of 450×302
A Note about Compression
Lowering the quality a bit can can slim down the file size, but don’t overdo it. Let’s see what happens when we crank the compression all the way down to zero
Will give you a result like this.
Image details
Compression: 100% (Quality 0 in Pixlr)
Size: 6KB
Dimensions: 450 x 302
It’s only 6KB but image quality has been deteriorated so much that it can’t be used
(unless you are making pixel art).
Summary:
Resizing your images in Omni or WordPress changes the width and height, but not the file size
Resize your images in a photo editor like Pixlr before uploading them to Omni or WordPress
You can make big photos smaller, but you can’t make small photos bigger