Images are killing your website's performance! Optimize Your Website Images for Non-developers.
Youssef Hefnawy
Website developer | Front-end developer | React developer | Next.js developer | Typescript developer
The first thing I look for when examining a website's performers is images!
It is the easiest to fix and the most common cause of bad performers, People just can't resist adding a 4K image to their site, and it's not just the quality of the image, image type, size, and even the way the image is called can be the reason!
Here's a quick guide to improving your website's images for Non-Developers.
The Non-Developers Guide:
If you use WordPress or something similar, there are plugins or some settings that you can use to improve images at least a little, so the first step is usually to start here. But often more than this alone will be needed if the basics themselves are wrong!
WordPress plugins:
but If you are a smart person and do not use WordPress, follow the following guide:
Do you really need an image? Font/Svg!
If you hire a designer for 10,000 and he gives you a logo consisting only of a fancy font, at least make sure he gives you the name of the font.
using Fonts
The font is smaller in size and can be easily modified compared to the image, so If you find an image consisting of text with a colored background, replace it with real text and background. This is not only better for the site’s performance, but also for SEO!
visit Google Fonts to get all the fonts you want!
using SVG
what’s an SVG you ask!
it’s the smarter but less beautiful sister of the image, as Instead of storing pixels, it performs mathematical equations to determine its shape, which makes it super easy to customize and so much smaller in size compared to the image but this is in exchange for less complexity.
So if all you want is a Facebook icon or a down arrow, use SVG.
If you want to know the best Icon sites, you can read → Top 5 Icon websites
Use the right size/type!
If you are using an image of an entire forest to display only one tree, this might be the reason for your bad performance. maybe!
so crop the image to display only what you want from the image.
Right image size:
If your phone is 400px wide, do not use a 4k image, believe me, a low-quality image will look good in a small size, so for a 400px screen use a 400px image!
You can use one of the following tools to resize images:
Right image type:
I would be filling the article with filler if I started talking about the difference between types of images so here's the general rule:
Recommended by LinkedIn
Your site is bad from the beginning, so use WebP and don't bother with browser support — said your customer
You can use one of the following tools to convert images:
Compress your image.
Image compression is the second closest thing we have to black magic after AI
When compressing the image, its size may reach half the original size without noticing any noticeable difference in image quality, If you're wondering why images aren't this small in the first place, Keep wondering because I don't know either, but I'm sure Adobe had something to do with it.
You can use one of the following tools to Compress images:
Improve your site's performance for Free!
“you don't have to be a developer to improve your site's performance”, well I lied!
the performance of your site does not depend only on images. Things such as unused code, frequent use of libraries, and in general poor quality code may be the reason for poor performance, and do not let me start talking about WordPress.
But you can still improve your site's performance for free and without being a developer!
Free gift:
Free Website Speed Optimization Services — Elevate your site's performance effortlessly.
How does image Compression work?
an AI-generated explanation of how image compression works:
Imagine you have a slice of bread, and you want to spread butter on it. The bread is like your original image, and the butter represents the details and colors in that image.
Now, to make it easier to carry or store, you decide to compress it. Compression, in this case, is like melting the butter and spreading it more thinly across the bread while still keeping its taste. You use less butter, but you can still enjoy the flavor.
In the same way, image compression reduces the amount of data needed to represent the picture, but it tries to keep the essential details intact. So, just like you can have a smaller amount of spread-out butter that retains the essence of the taste, compressed images take up less space but aim to preserve important visual information.
Quote of the day
looking back, every single time I’ve been inspired to do something difficult, I was in a soft environment, because it all sounds doable when you’re chilling on your fucking couch -Can't Hurt Me- David_Goggins
These stats are definitely not here to spook you into joining my free service:
Free Website Speed Optimization Services — Elevate your site's performance effortlessly.