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:
How Can I Resize Photos for a Website?
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!
“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.
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!
