The Non-developers Guide to Optimize Your Website Images!
Tags: performance, webdev, image, programming
Published: 2023-12-18 18:56:49

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:

- **WP Smush**
- **ShortPixel Image Optimizer**
- **Imagify**

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbgmd9b50s6tt0svzejq.jpg)



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](https://fonts.google.com/) 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](https://medium.com/@Youssef_Hefnawy/top-5-icon-websites-for-devs-and-designers-4ff2b44f1c12)**

## Use the right size/type!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgu38blq39xvvncy6d7g.jpg)



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:

- [Image Resizer](https://imageresizer.com/)
- [adobe resizer](https://www.adobe.com/express/feature/image/resize)
- [I love image resizer](https://www.iloveimg.com/resize-image)

### 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:

1. **JPEG:** For photographs, good compression.
2. **PNG:** For transparency, lossless quality.
3. **WebP:** Good balance of quality and size (browser support may vary).
4. **HEIF:** Efficient compression, newer devices.

> 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:

- [CloudConvert](https://cloudconvert.com/image-converter)
- [I love image](https://www.iloveimg.com)

## Compress your image.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sph7r3vjrv38o3ymg90k.jpg)



> 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:

- [TinyPNG](https://tinypng.com/)
- [I love image](https://www.iloveimg.com)


### 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****
> 


## More From Us:

- [Newsletter](https://hefnawystudio.substack.com/?utm_source=navbar&utm_medium=web&r=31jf6o)
- [Twitter / X](https://twitter.com/hafanwy)
- [Instagram](https://www.instagram.com/hefnawystudio/)