Completely Free Course

Connect with Facebook

or

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free Course

Connect with Facebook

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Module 2: Customize The Design

How To Download, Crop, Resize, and Compress Free Stock Photos

Action Plan

Step 1: Download Free Stock Photos Using Unsplash


Visit Unsplash

Unsplash is our pick for the best place to download completely free photos for both personal and commercial use (attribution is appreciated but not required). For more sites similar to Unsplash, click the “Unsplash alternatives” link below.

Watch Our Video Tutorial For This Step

This video will walk you through how to find photos using Unsplash and download them to your computer. You will also learn some pro tips for choosing the right photos for your site.

Video Summary

  • Visit Unsplash
  • All photos are free for personal and commercial use (0:11)
  • Attribution is encouraged but not required (0:21)
  • Search for any term or view their photo collections (0:38)
  • Click on a photo and click the “Download free” button to download the photo (1:08)
  • Giving credit to the photographer by linking to their profile url (1:25)
  • Photos will be very large so don’t use them on your website yet, we will teach you how to resize and compress in the next video (2:00)
  • Searching for emotions or actions will result in more interesting photos (2:21)
  • View our recommended Unsplash alternatives such as Pexels, StockSnap, Burst, and Pixabay to find more photos (3:14)

(I downloaded a photo from Unsplash)

Step 2: Crop, Resize, And Compress Your Photos Using BeFunky


Why This Step Is Important

It’s important that you learn how to crop, resize, and compress your photos before adding them to your site. Cropping your photos will allow you to choose the exact area of the photo that you want to use. Resizing and compressing your photos will dramatically reduce the image file size so that your site loads faster (this is one of the biggest mistakes people make in terms of slowing down their site).

Visit BeFunky

BeFunky is our favorite free online tool for editing photos.

Recommended Photo Sizes

Here are some general photo size recommendations when adding photos to our Elementor templates. These recommendations are based on the 1400 pixel content width we configured in our Elementor installation tutorial.

Full background = 1600 pixel width
One-column section = 700 pixel width
Two-column section = 700 pixel width
Three-column section = 500 pixel width
Four-column section = 400 pixel width

*Based on a page layout width of 1400 pixels

Watch Our Video Tutorial For This Step

This video will walk you through how to crop, resize, and compress your photos using the BeFunky photo editor. We will also show you how to add a few cool effects to your photos such as blur, vignette, etc.

Video Summary

  • Visit BeFunky
  • Click “Photo Editor” at the top of the page (0:23)
  • Go to Open > Computer and choose the file you just downloaded in the previous video (0:28)
  • Browse the navigation menu on the left-hand side (0:48)
  • Click “Crop” to start cropping your photo (0:55)
  • Choose your aspect ratio (1:01)
  • 16×9 aspect ratio works well for full-width background photos (1:11)
  • Drag/resize the crop box and click the checkmark to crop the photo (1:20)
  • Click “Resize” to resize your photo (1:39)
  • If you don’t resize your photos they’re going to really slow down your website (1:50)
  • How to know which dimensions to use when resizing photos (1:59)
  • Most of our template blocks include image size recommendations (2:05)
  • In our Elementor installation tutorial we set the site content width to 1400 pixels (2:30)
  • We recommend using a 1600 pixel width for full-width background photos (2:59)
  • How to adjust the width and height of your photo (3:45)
  • Using the “Vignette” effect (4:12)
  • Using the “Blur” effect for full-width background photos (4:48)
  • Using the “Blur Edges” effect (5:08)
  • Using the “Blur Edges” effect (5:08)
  • Browsing more effects in the sidebar, many will require upgrading to a paid account (5:23)
  • Go to Save > Computer (6:01)
  • Compress your photo by adjusting the “Quality” bar (6:07)
  • Start with 50% quality to reduce the file size of your photos, this will help improve the load time of your website (6:17)
  • Background photos that use an overlay can be compressed even more (6:44)
  • Always use JPG format when saving photos (7:23)
  • Adding photos to your page in Elementor (7:37)
  • Use the “Square 1×1” aspect ratio for circle photos (8:27)

(I cropped, resized, and compressed my photo)

Continue To The Next Tutorial Below

Module 2

Customize The Design

Module 2 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.