Rotanz Design

Squarespace Website Designer NC | Freelance Graphic Design

Formatting images for the web without Photoshop (for free!)

I’m often asked how to edit and resize photos without Photoshop and for the longest time I had no idea. Although I love Photoshop and use it personally, it doesn’t make sense for a lot of people to pay for it if they’re not using it regularly. For this month’s blog I decided to explore a couple free options for people that don’t have (or need) Photoshop and explain the proper way to format images for the web. The website app I’m recommending in this blog is called Pixlr and I’ll show you step by step instructions on how to properly save your image for the web. I tried a few different applications and I found this one to be the easiest. You don’t have to download anything and you don’t even have to create a login (you will need internet access and enable Flash). 


Why you need to format images for the web

You know those times when you’re visiting a website and it takes forever to load? Sometimes you sit and wait, but most of the time you click out and begin searching for other websites. It’s important to make sure your own website isn’t loading slowly so this doesn’t happen to you. Another important reason why you want a fast website is because Google uses site speed as part of their algorithm for ranking sites. If you have a slow site it takes longer for Google to crawl your pages and so it might negatively affect your SEO (see my blog: What is SEO?). There are a few reasons why your site might be loading slowly:

  1. You have too much content on one page

  2. You don’t have the best connection

  3. You’re viewing the site on an older browser

  4. Your image sizes are too large

There are other reasons why your site may be loading slowly, but we’re going to focus on number 4 for now.

I’ve struggled with this in the past because I always uploaded large images to ensure that my portfolio pieces were crisp and beautiful. What I found was that my website (while it looked great) was not very fast. It’s necessary to find the sweet spot in resolution and speed.


How to check image size

Before you upload your image to your website, check out your image size by doing the following:

Mac - Right click the image, then select Get Info. Or you can select the image and click File and then Get Info in the toolbar at the top.

PC - Right click on the image file and select Properties to find the file size. You'll then click on the Details tab to find the pixel dimensions.

You'll want to pay attention to the dimensions and the size of the file. If the size of the image is less than 500kb and the pixel width is below 2500px then you can go ahead and upload it! If your image is looking bigger than that (like 2MB file size), then follow the instructions below to optimize the image for the web.


Recommended file type, size and width:

File type: Images should be saved as .jpg, .png or .gif files (use png when you need a transparent background).

File size: Squarespace recommends uploading images under 500kb (*you’re able to upload files as big as 20MB, but it’s recommended to stay under 500kb for faster loading times).

File Width: Squarespace recommends uploading images between 1500 - 2500px wide (*images smaller than 1500px may be pixelated on your site).


How to adjust image size on Pixlr

1. Go to https://pixlr.com/editor/ (you’ll need to enable Flash)

2. Select Open Image from Computer when the small window pops up. If you’ve already clicked out, click File (within the editor), Open image and then select the image you want to downsize.

3. I'm going to use my favorite picture of my boyfriend as an example. The original file is 3.4MB and is 4032 x 3022px (way too big!). First we’ll change the pixel dimensions. With the image open, click Image in the toolbar and then select Image Size.

4. Since Squarespace recommends a pixel width between 1500 - 2500, lets type in 2000 for the Width and make sure Constrain proportions is checked. Click OK.

5. Next we'll click File in the toolbar at the top and then Save.

6. Now we’ll change the file size. You’ll notice the file size in the lower right hand part of the window (right above the OK button). Drag the quality bar to the left until the file size is lower than 500kb. You don't need to pay attention to the number beside quality, you just want to see how dragging the quality bar directly affects the number above the OK button. I typically drag it a little bit to the left and let go to see the size refresh. If the number is still above 500, then scoot it a little more to the left until it's just below 500. I typically aim between 400-500kb. You can see in my example that I dragged it to 452kb. Rename the image and make sure jpeg or png is selected. Click OK.

7. In the next screen you’ll choose where you want to save this image. Make sure the file has a new name from the original and put it in a place where you’ll remember. You want to create a new name so you don’t save over the original and so you upload the correct image when it comes time to put it on your website.

8. Now when you recheck the size, your image should be under 500kb and in between 1500 - 2500px (*sometimes an image can’t be both if it’s a really small or really large image… in this case it’s important to just make sure the file size is under 500kb).

9. Upload to your website!


Hopefully this tutorial helps you better optimize your images for your website. If you run into any problems, feel free to reach out: katie@rotanzdesign.com.

 

     
    WebsitesKatie Rotanz