How Can I Resize Photos for a Website?

How to resize photos for a website is our current #1 question. Here is a short tutorial to make resizing easier. There are three factors here:

Dimensions
This refers to the actual dimensions of the image. For example, you will probably need to crop the image, width by height, 900 pixels by 600px. The width, in this case, is 900 pixels, which is always listed as the first number.

Size
The actual size of an image is expressed as kilobytes/KB or megabytes/MG. For websites, you want your photos to be small and light. We try to keep them in the 100-300 KB range. Once you post images in the larger MG or the GB range, these pics will probably make your website load slowly. Note: KB, MB, GB – A kilobyte (KB) is 1,024 bytes. A megabyte (MB) is 1,024 kilobytes. A gigabyte (GB) is 1,024 megabytes.

Resolution
Resolution for web images is 72 ppi, ( ppi=pixels per inch) often called “screen resolution.” Images prepared for printing are usually 300 dpi.(dpi=dots per inch) Desktop printers typically print at 150 dpi.

Yes, image size matters.

Page speed is one of the factors that Google’s algorithms use to determine page ranking. Google prioritizes good UX or User Experience. Slow sites are ranked lower than similar sites that are faster.

Your smartphone probably has an eight-megapixel camera in it. An 8-megapixel camera can produce images that are 3264px x 2448px. Cameras that take photos at 20 megapixels may output an image of 5472 x 3648px.

Any print-quality images you get from a professional photographer will be huge unless they have been resized for the web.

Files this big, say over 2000 px wide, will slow your website load time, so be sure you’ve downsampled them to a reasonable size.

Devine Design websites are hosted on a fast, modern server, so you may not see any slow-to-load images. BUT you can’t rely on this. Mobile phones are being used more and more, and cell phone service out there can be sketchy in many areas. So, do your site a favor,  and make your images light and easy to load!

Read on, learn more!

Parrot Large File, 300dpi: 862 KB, 2500x1667 pixels, 300 dpi, jpg
Parrot Max Quality Web: 1 MB, 2500x1667 pixels, 72 dpi, jpg
Parrot High Quality Web: 612 KB, 2500x1667 pixels, 72 dpi, jpg
Parrot Medium Quality Web: 277 KB, 2500x1667 pixels, 72 dpi, jpg
Parrot Low Quality Web: 176 KB, 2500x1667 pixels, 72 dpi, jpg
Parrot png file: 3 MB, 2500x1667 pixels, 72 dpi, png

Image by Couleur from Pixabay

“What???” you say. “The images look the same”

It’s true. They do look similar. But the file size and load times are very different.

To resize images

In Preview, on a Mac:

1. Open your File.
2. Select File> Export.
3. Choose JPEG as your file type, and set the quality manually to reduce the size even more.
4. Save for web, photos as jpg, illustrations as png files

In Pixlr, a Free Web App:

1. Go to: https://pixlr.com/editor/
2. Google “Pixlr instructions”
3. Here’s a nice video tutorial from 2021. Things change, so maybe just Google it!
4. Save photos as jpg, illustrations as png files.

In MS Paint

Paint on a Windows platform. MS Paint is found in All Programs > Accessories.
1. Open the application, then Open the Image.
2. From the Home Tab, select the Resize and Skew Icon (note the original pixel size shown near the bottom).
3. Make sure there is a checkmark in the box next to “Maintain aspect ratio”; then set the width and click OK.
4. You can also add a caption using the Text tool in Paint.
5. Click the main tab; choose Save as; select JPEG. Enter a short descriptive name, no spaces, and save. Your image is now ready to upload.

Crop Your Image

Remember to crop your image to size! Many website blogs /posts use the same size featured image. This makes the photos line up nicely and look great on any device. Sometimes you can can’t crop both directions because it cuts off too much vital information, So you JUST crop the width to, say, 1200 px and leave the height as is. Here are various crops to see what a difference cropping can make.

Cropped High Quality: 1250 pixels, 316 KB, saved for web
Cropped Medium Quality: 1250 pixels, 262 KB, saved for web
Cropped 1024 px square
Full size, cropped 1024px wide, original height
Cropped 1024px wide by 693px height
Cropped-1024 px width by 504px height
Cropped 653px width by 1024px height
Cropped 653px width by 1024px height

Image by Couleur from Pixabay

In Conclusion

Trust us. You DO NOT want Google to hate your website. Fortunately, reducing your image file sizes is Google friendly, and will help improve your website performance.

Follow these steps to make your pics load fast AND look great. Nobody wants to look at images that are fuzzy/dithered and ugly!

So, learn how to optimizing images to decreasing their file size, which speeds up the load time of the page. Then use a plugin, like SMUSH to compress. But that’s for another blog!