Photopea for Design | SEC Marketing Group

At SEC Marketing Group, we don’t believe you need a $600/year Adobe subscription to produce high-impact SEO assets. Instead we use Photopea. A powerful, browser-based Photoshop alternative that allows us to stay agile, edit on the fly, and keep our overhead low as we scale toward 50 clients.

If you know Photoshop, you already know Photopea. If you don’t, this guide will show you how to handle the most common design tasks an SEO strategist faces.

1. Why Photopea?

Zero Friction: It runs in your browser. No installation, no updates, and it works on any machine.
Full PSD Support: It opens and saves .psd files, allowing us to collaborate on professional design templates without the “Adobe Tax.”
SEO-Centric Exporting: It has built-in tools for “Exporting for Web,” which is crucial for our site speed standards.

2. Common SEO Design Tasks

A. The “WebP” Conversion (Core Web Vitals)

Large JPEGs and PNGs are the #1 cause of slow page speeds. We prioritize the WebP format.

Open your image in Photopea.
Go to File > Export As > More > WebP.
Adjust the quality slider to find the “Sweet Spot” (usually 70-80%). Aim for a file size under 100KB for standard blog images.

B. Creating “Featured Images” for Blog Posts

Every blog post we publish needs a high-quality thumbnail ($1200 \times 630$ px for social sharing).

New Project: Alt + Ctrl + N. Set dimensions to $1200 \times 630$.
Layering: Drag in a high-quality stock photo.
The SEC Overlay: Add a semi-transparent black rectangle over the image and place the blog title on top in a bold, readable font. This ensures the text “pops” when shared on LinkedIn or Facebook.

C. Removing Backgrounds for Team Photos

Client sites often need “clean” headshots for their Meet the Team pages.

Use the Magic Wand or Object Selection tool (shortcut W).
Click the subject.
Go to Select > Refine Edge for a professional finish.
Hit Delete to remove the background and save as a transparent PNG.

3. The “AI-Assist” Workflow

Just like our content and code, we use AI to speed up design.

Rapid Iteration: Use color.co to generate specific color palettes (HEX codes) for a client’s brand.
Smart Content: If you need to expand the background of a photo, use Photopea’s “Content-Aware Fill” (Edit > Fill > Content-Aware). It uses internal algorithms to “guess” what the rest of the image should look like, saving you hours of manual cloning.

4. The SEC “Preview First” Integration

When we create a mockup for a client (as detailed in our “Preview First” Rule), we use Photopea to “slice” our designs.

Design the landing page layout.
Use the Slice Tool (C) to cut the design into individual assets (buttons, icons, headers).
Export all slices at once to quickly populate your HTML mockup.

5. Documenting the Assets

Design files are part of the client’s digital property.

The Naming Convention: Never name a file final_v2_edit.png. Use SEO-friendly names: miami-plumber-emergency-services.webp.
The Work Log: [Date] - Created 5 custom blog headers for [Client]. Optimized as WebP (<80KB each). Uploaded to Media Library.

Pro-Tip: Keyboard Shortcuts (Speed is Scaling)

To move at the speed required to manage 50 clients, memorize these:

V: Move Tool (Select and move things).
T: Type Tool (Edit text).
Ctrl + Alt + I: Image Size (Check your dimensions quickly).
Ctrl + S: Save as PSD (Do this often! Browser tabs can crash).

Optimizing for Speed (DPI & File Size Constraints)

In SEO, “Quality” isn’t just about how an image looks—it’s about how much it weighs. A beautiful 5MB image is a ranking killer. To hit our “Extra Mile” performance standards, we often have to manipulate the DPI and Total File Size to ensure lightning-fast load times.

1. Understanding DPI (Dots Per Inch)

While DPI is crucial for print, 72 DPI is the standard for the web. Anything higher (like 300 DPI meant for high-quality printing) adds unnecessary data that the human eye cannot even perceive on a digital screen.

How to change DPI in Photopea:

Go to Image > Image Size.
Look for the DPI (or “Resolution”) field.
If it is higher than 72, change it to 72.
Ensure the “Resample” box is checked so the physical dimensions of the image remain consistent while the data density is reduced.

2. Scaling to a Target File Size

We aim for a “Performance Ceiling”: Hero images should be under 150KB, and blog images should ideally be under 100KB.

How to force a specific file size:

Go to File > Export As > WebP (Our preferred high-efficiency format).
Look at the bottom left corner of the preview window. Photopea will show you the estimated file size (e.g., 342.1 KB).
Drag the Quality Slider down. Watch the file size update in real-time.
Stop when the number hits your target (e.g., 85.4 KB).
The SEC Secret: If the quality looks “crunchy” or pixelated at your target size, go back to Image Size and reduce the width (e.g., from 3000px down to 1920px). It is better to have a smaller, clear image than a large, blurry one.

3. Why This Reclaims SEO Rankings

Google’s Core Web Vitals measure “Largest Contentful Paint” (LCP). This is almost always triggered by the largest image on the page. By dropping the DPI and forcing a low file size, you:

Decrease the time it takes for the browser to render the page.
Improve the user experience for visitors on slow mobile connections.
Provide a direct technical boost to the site’s ranking potential.

The Work Log Note

Whenever you optimize a batch of images, log the performance gain:

[Date] - Performance Optimization: Compressed 10 header images to <100KB using Photopea (72 DPI). Page load speed improved from 4.2s to 1.8s.

Key Takeaway

Photopea is the “Great Equalizer.” It gives us the power of a professional design studio directly in our browser. Use it to ensure every image we post for our clients is fast, beautiful, and on-brand.

Culture, Ethics, Logistics, & Technology (The "SEC" Way)