Skip to content

One of the most common questions we get from photographers and adventure bloggers alike is how to properly size images for web use, without losing image quality.

We’re going to give you the scoop on how to size your images for your website so you can streamline your photography process and optimize your website.

1. Export your images at web resolution

Chances are, you’re exporting your images at a much higher resolution than they need to be for your website. If you’re a professional photographer or content creator who provides images for clients, you’re likely exporting your images at 300-500 PPI (pixels per inch).

When exporting images for your website, set your image resolution to 72 PPI.

2. Limit your image file size

Far too often, we see images on client website that are waaaay bigger than they need to be (think: 14MB and up!) Unnecessarily large images can slow down your website speed and clog up storage space on your web host. To avoid bogging down your site with larger-than-life images, make sure that your images are properly sized.

Limit your file size to under 1MB for images on your website.

elopement-photographer-website-design

Ready to get to the next level?

Imagine if you could build your business with ease, land your dream clients, and create a magnetic brand that showcases the incredible service you provide. It's time to create an unforgettable experience your dream clients will LOVE.

3. Choose the right file type

Not all images are created the same. You might have multiple different types of files on your website, including logos, graphics, templates, or photos. It’s important to remember which file type is needed for each.

Ideally, you should use JPEG or JPG for images with lots of color and detail, like your photos. For logos, graphics or images with a transparent background, use PNG files.

Compress your images

Once you are ready to upload your images to your website, use a compression tool to further reduce image size. Our recommended compression plugin for WordPress is Smush. This plugin uses lossless compression, which keeps image quality high.

PIN THIS POST FOR LATER!