Tips & tricks for resizing photos for your personal website
If you’re a sex worker designing your own website, adding great-looking photos is a must. But did you know that the size of your images can affect how quickly your website loads?
Big, heavy files can slow things down, which isn’t great for your visitors (or for getting found in search results).
Luckily, resizing and compressing your images can help keep things running smoothly. And while yes, it’s a pain in the butt, it’s easy to do.
Best Media Formats for the Web
When it comes to choosing the right file format for your website images, it’s important to pick one that offers a balance of quality and file size.
Here are the three most common types of image formats:
- JPEG (or JPG): Best for photos with lots of colors and detail. JPEGs allow for good quality at smaller file sizes and are great for most website images.
- PNG: Best for images that require transparency (like logos). PNG files are usually larger than JPEGs, but they maintain high quality, especially for graphics and images with sharp lines
- WebP: A newer format that offers even smaller file sizes while keeping the image quality high. It’s great for speeding up your website. However, keep in mind that Squarespace does not currently support WebP.
Ideal Image Dimensions for Your Website
One common mistake people make is uploading images that are much larger than necessary.
You want to upload for desktop sizing since you can always scale down, but images that are too small will become pixelated when blown up.
However, you do not want to upload your original files that are 5MB! Keep them less than 500kb.
For most website images, you don’t need anything wider than 1200 to 2000 pixels. Here are a few common image sizes:
- Full-width banners or background images: 1920×1080 pixels
- Standard website images: 1200×800 pixels
- Thumbnails or small images: 300×300 pixels
Keeping your images within these dimensions helps prevent long load times and improves the overall performance of your website.
How to Resize and Compress Photos
Now, I’ll share some easy ways to resize and compress your images.
Whether you’re using Canva, Photoshop, or Mac Preview, these methods will help you prepare your photos for the web.
Method 1: Resizing Photos with Canva (For All Platforms)
Canva’s free, user-friendly tool makes resizing images super simple.
- Go to Canva and sign in (or create an account).
- Upload your image by clicking on Upload Files.
- Once your image is uploaded, click on it to open the editor.
- In the top-right corner, click on Resize.
- Enter your desired dimensions (for example, 1200×800 pixels).
- Download your resized image as a JPEG or PNG.
After resizing, you can use a free online tool like TinyPNG to compress the image, reducing its file size without losing quality.
Method 2: Resizing Photos in Photoshop
If you have access to Photoshop, resizing images can be done quickly with these steps:
- Open Photoshop and load your image.
- Click on Image in the top menu, then select Image Size.
- Enter your desired dimensions (again, 1200×800 pixels works well for most images).
- Choose Bicubic Sharper for resizing, which helps maintain image quality.
- After resizing, go to File > Export > Save for Web.
- Select JPEG or PNG as your file format, adjust the quality slider to balance file size and quality, then click Save.
For an even smaller file, you can save the image as WebP by using plugins or converters like CloudConvert or Squoosh. Just remember, WebP is not currently supported by Squarespace.
Method 3: Resizing Photos on a Mac with Preview
If you’re on a Mac, you can resize and compress your photos without any special software. Here’s how to do it using Preview:
- Open your image in Preview.
- Go to Tools in the top menu, then click Adjust Size.
- Enter your desired width (for example, 1200 pixels), and Preview will adjust the height automatically to keep your image proportional.
- Click OK to resize the image.
- To compress, go to File > Export, choose JPEG, and adjust the quality slider to reduce the file size.
For compression, you can also use online tools like TinyPNG or JPEG-Optimizer. These will reduce the file size while maintaining quality.
If you need to convert the image to WebP, you can use free tools like Convertio or CloudConvert.
Bonus Method: Compressing and Resizing Images for WordPress with Plugins
WordPress users can make resizing and compressing even easier by using plugins like Smush or EWWW Image Optimizer.
These plugins automatically compress your images when you upload them and can even resize them if needed.
- Install and activate Smush or EWWW Image Optimizer from the WordPress plugin directory.
- Once installed, the plugin will optimize and compress your images as you upload them.
- You can also go to the plugin settings and run a Bulk Optimizer to compress all your existing images.
These plugins also support WebP, so you can take advantage of the smaller file sizes for faster loading times.
Final Thoughts
Resizing and compressing your images is an important step for making your website fast, easy to use, and more visible to search engines.
Just remember to choose the right format for your images (JPEG, PNG, or WebP), and keep your image dimensions in check to make sure your website runs smoothly.
So go forth and get to resizing, compressing and converting to see how much faster your website can run!
