Hello, I have a question please. How are websites like https://pngoptimize.com (which provide image compression and optimization services online) created? What are the main tools or technologies (programming languages, libraries, or servers) usually used to build such platforms? And is it possible for a beginner to develop a similar website with practical steps?
How to build a website like this one ?
- Thread starter Aliafr586
- Start date
-
- Tags
- website website + domain
- Oct 28, 2020
- 11,663
- 14,626
- Sep 25, 2025
- 132
- 96
Domain, Wordpress, Image Converter Plugin, Text and AdSense
p3n7357
Power Member
- Dec 10, 2016
- 582
- 402
Yes but there is also a custom made js can and that is the heart of website which processes the image and returns optimised one without that website has no value
MaxGuard
Supreme Member
- Nov 13, 2010
- 1,283
- 534
That's just the site made with wordpress.
The backend is probably written in some other language or maybe even php. OP - you can make a program to take the input image from user, do processing on the backend likely using a image processing library and send out the response image back to your frontend.
Or you could try looking for some ready-made scripts, there are usually scripts available or some opensource project that could do this whole thing.
p3n7357
Power Member
- Dec 10, 2016
- 582
- 402
Or he can integrate ready made apis
MaxGuard
Supreme Member
- Nov 13, 2010
- 1,283
- 534
Yes, that's what i suggested in my last line.
Personally I'd recommend a self-hosting script on some vps than getting rate-limited by API when it's just a small utility project.
- Oct 28, 2020
- 11,663
- 14,626
I didn't want to spend too much time with the analysis (and I wouldn't know what to look for anyway since I'm not very good at this geeky stuff), I just plopped his site into BulitWith, looked for something related to Wordpress (as I did have a feeling that it's WP), I found Elementor being mentioned there, and that was enough for me to bring the news out
But good thing that we have members like you, always happy to explain everything. And nope, I'm not making fun of you, without geeky nerds like you I would be lost too as I suck at this stuff, so I appreciate the help!
p3n7357
Power Member
- Dec 10, 2016
- 582
- 402
I didn't take it bad i sm s nerd and always be one that's my nature
Hansio
Junior Member
- Oct 14, 2024
- 134
- 54
Hey, great question. Building a tool like that is an awesome project. Here’s a breakdown of how it's typically done.
It's a combination of a frontend (what you see), a backend (the engine), and a server powerful enough to run it.
The Tech Stack:
- Frontend: Standard HTML/CSS/JavaScript. JS is the key here for handling the file uploads smoothly without page reloads (using AJAX). Frameworks like React or Vue are common, but you can do it with vanilla JS.
- Backend: This is where you have options. Node.js is very popular; you'd use a library like sharp or imagemin, which are incredibly fast for image processing. Python is also a great choice, especially for beginners, with the main library being Pillow. PHP is still a solid option too with built-in libraries like GD and Imagick.
- The Compression Magic: This is the most important part. The backend code uses specialized command-line tools under the hood. Things like optipng, pngquant, and jpegoptim. The libraries mentioned above (sharp, Pillow) are often just convenient wrappers for these powerful tools.
Is it possible for a beginner?
Yes, 100%. But you have to start simple. Don't try to build the final polished product first.
Here's a practical roadmap:
1. Build a basic HTML upload form. No fancy drag-and-drop, just a standard file input that submits to your backend.
2. Set up a simple backend (Python with Flask is great for this). Your first goal is just to successfully receive the uploaded file and save it to a folder.
3. Add the compression logic. Using Python and Pillow, you can open the saved image and re-save it with the optimize=True flag. That's your core compression function right there.
4. Send the compressed file back. Modify your backend to send the new, smaller file back to the user for download.
5. Then, and only then, improve the frontend. Add the drag-and-drop, the progress bars, and the nice styling.
You will need a small VPS (like from DigitalOcean or Vultr) to run this, as shared hosting usually can't handle the CPU load from image processing. It's a fantastic learning project. Good luck!
@Aliafr586 @tazarbm @logancole @Hansio @V @MaxGuard Can someone please suggest one thing? I can able to build 10's of these kind of websites as i'm a web developer and heavily using AI tools. My question is how to rank these websites?
Hansio
Junior Member
- Oct 14, 2024
- 134
- 54
Hey @dorasdr , thanks for the tag. The "how to rank it" part is pure SEO. Here's a quick checklist for a new tool site:
1. On-Page SEO: Make sure your landing page has a great title tag and description targeting your main keyword (e.g., "Free Online PNG Optimizer").
2. Supporting Content: Create a blog and write articles about the problems your tool solves (e.g., "How to Speed Up Your Website"). This is how you attract traffic from Google.
3. Trust Signals: Create an "About" page to show who you are. This is important for Google's E-E-A-T guidelines.
4. Backlinks: This is the most important part for a new site. You need other websites to link to yours. A great way to start is by getting listed in online tool directories or asking bloggers who write about your topic to include your tool in their articles.
Building the site is the first step. Building its authority through content and links is how you rank it.
- Oct 28, 2020
- 11,663
- 14,626
now that, my friend, is the $1,000,000 question
You can start with finding approachable niches (for newbies, "approachable" niches almost always are found in huge, evergreen industries like health & medical, finance, tech, pets, self-improvement, education, home improvement, parenting, etc...)
As long as you find something that you like / are remotely interested in, from these big industries and which is profitable and not very competitive (you need to analyze the 1st page of google for the main keywords of your niche in order to figure out whether it's approachable or not) you can safely go with that.
And then you need to find a few main keywords (let's say 3 to 10 for start, but it can be more than 10, but start with few in the beginning).... actually, I should probably say "topics" instead of keywords, even if - most of the time - these 2 terms are identical.)
But, in the context of what I'm referring to, topics usually means high volume and / or short keywords (1-word to 3-word usually) that are very relevant in the niche you found, and which you can create your site's structure around (and site structure is one of the important parts of SEO nowadays, so you'd better do it properly, or else you might start your SEO with a handicap)...
Anyway...
1) find a good niche (profitable, easy to tackle, evergreen)
2) find 3-10 main topics in your niche that you can structure your site around, and center your content around
3) find 3-20 sub-topics (usually long tail keywords, ie. keywords with more than 4 words, but usually more than 5-6 words, or even longer) that are relatively easy to rank for when compared to the main topics
4) create content around all of these topics (by content I don't necessarily mean walls of text that nobody - except for the bots - reads and which bores people to death, although - most of the time - that's what content refers to
... Content can mean anything from walls of text like I said, to images and videos - this type of content is particularly useful in industries like food recipes, travel, or software tutorials - to everything in between, such as infographics, tables, charts, stats... even memes are useful sometimes)5) interlink all of this content (both from the main topics to the supporting content / sub-topics, as well as the other way around)
6) generate a sitemap and submit it to your GSC (if you do want to use GSC, some people prefer not to work with google anymore - which is cool if you asked me
- otherwise, I don't know if it's worth generating the sitemap, as for me sitemaps are only good for making google's job easier in crawling your site... But anyway, as a newbie you probably want to submit your sitemap to GSC, so do that if you're not a passionate google hater like I am)7) backlinks... start building links, slowly, safely, but continuously, and aim only for quality links in the beginning. What quality links are is a topic that will require its own separate section to discuss, but - in general - links that come from legitimate sites that are constantly getting organic traffic from search engines and which are not seen as link farms can be considered quality links... Also brand mentions are pretty good nowadays, so if your brand is somewhat popular and if people mention in on social media, UGC sites, or on their blogs that's a good sign and it will probably skyrocket the rankings of your easier keywords like no other type of backlink will.
8) monitor, track, adjust, improve, etc... that is, keep an eye on your site's health, on your ranked keywords, on your indexed pages, on your content performance, etc. so you can spot any issues with these and fix / adjust / improve as needed...
And that's pretty much it, in a nutshell. I know that I could have gone into way more details on each one of these steps, but this post is already long enough, so I'll stop here. But if you're stuck on some step ask for help and one of us will help you out...
k0derr
Newbie
- Oct 17, 2025
- 5
- 4
if you look into the core. It's the easiest thing ever. especially if written in Python, ca there are buil-in functions that compress/convert images in one line of code