Learn how to create web-friendly images using Adobe Photoshop. Get tips on selecting a plan, uploading images from top stock photo sites, using screen capture shortcuts, resizing images, and quick export options. Perfect for students, teachers, and professionals.
Steps to Editing Images for your Website
- Get Adobe Photoshop
- Upload an image or a screen grab
- Change image size
- Export and upload to your website
Get Adobe Photoshop
Go to Adobe Photoshop and Select a Plan. If you plan on making logos, editing photos, and maybe add a video or two you should sign up for the Creative Cloud All Apps. If you are a Student or work in a school/university then sign up for the Student/Teachers account and save $30 per month!
Once you sign up, access your account and download Photoshop.
Upload An Image
Free online Resources
To get web-friendly images you may want to explore one of these free resources:
- Pixabay: Offers over 5.2 million high-quality stock images, videos, and music shared by a vibrant community of creatives. All content is released under the Pixabay Content License, making it safe to use without asking for permission or giving credit to the artist, even for commercial purposes.
- Pexels: Provides millions of high-quality, royalty-free stock images and videos. No attribution is required, making it a great resource for various projects
- Unsplash: Known for its large collection of high-resolution photos contributed by photographers worldwide. The images are free to use for both personal and commercial projects without needing to credit the photographer.
- Freepik: Offers a wide range of free vectors, stock photos, PSD, and icons. While some resources require attribution, there are plenty of options available for free use.
- Burst by Shopify: The images are high-quality and can be used for commercial purposes without attribution. According to their website “burst is powered by Shopify, a leading ecommerce platform. You don’t have to be a customer to use our open source image library, but we’d encourage you to check out Shopify to see if there are more free tools or guides that could help accelerate your business”.
Screen Grabs from Anywhere Online
Shortcut: PC
- Print Screen (PrtScn): Captures the entire screen and copies it to the clipboard. You can paste it into an image editor like Paint.
- Alt + Print Screen: Captures the active window and copies it to the clipboard.
- Windows Key + Print Screen: Captures the entire screen and saves it directly to the “Screenshots” folder in your Pictures library.
Shortcut: MAC
- Command (⌘) + Shift + 3: Captures the entire screen and saves it to your desktop.
- Command (⌘) + Shift + 4: Turns the cursor into a crosshair, allowing you to select a portion of the screen to capture. The screenshot is saved to your desktop.
- Command (⌘) + Shift + 4, then Spacebar: Changes the crosshair to a camera icon, which you can use to capture a specific window. Click the window to capture it, and the screenshot is saved to your desktop.
- Command (⌘) + Shift + 5: Opens the screenshot toolbar, which provides options to capture the entire screen, a selected portion, or a specific window. You can also record your screen from here.
Change image size
Selecting the correct size very important for web-friendly images. Images too large will take up too many resources and cause your page to load slowly. It also places additional strain to your web server. To change the image size in Adobe Photoshop, you can use the following shortcuts:
For PC:
- Ctrl + Alt + I: Opens the Image Size dialog box, where you can adjust the dimensions of your image
For MAC
- Command (⌘) + Option + I: Opens the Image Size dialog box, allowing you to modify the image dimensions
Export Your Images
To quickly export your work in Adobe Photoshop, you can use the following shortcuts:
For PC
- Ctrl + Alt + Shift + W: Opens the “Export As” dialog box, allowing you to choose the format and settings for your export
For MAC
- Command (⌘) + Option + Shift + W: Opens the “Export As” dialog box, where you can select the desired export options
Now to Export
- Shortuct to export
- Change format to JPG
- Reduce quality to 5 or 4
- Change image size if needed
OPTIONAL: Change Image size
- Example from image
- Initial size 1873×815 at quality118.5kb
- Reduce quality to:
| Dimensions | Format | Quality | Size |
| 1873 x 815 | JPG | 6 | 118.5KB |
| 1873 x 815 | JPG | 5 | 78.6KB |
| 1873 x 815 | JPG | 4 | 52.5KB |
Or reduce size of image and then update quality
| Dimensions | Format | Quality | Size |
| 1000 x 435 | JPG | 6 | 60.5KB |
| 1000 x 435 | JPG | 5 | 42.4KB |
| 1000 x 435 | JPG | 4 | 30.8KB |
Julz Talks Tech dives into web design, graphic design, technology, AI, and all things nerdy. If you enjoyed this article, please like, comment, and share it with a colleague who might find it interesting or helpful. Your support on Patreon helps us grow and reach a wider audience. Let’s expand this community together!
For help with Web-Friendly Images or if you need a new website, visit South County Creative and schedule a time to chat with one of their web professionals
