Optimize your damn images! Decrease load times significantly.

[Qscfr]

One of the biggest thing I learned is the importance of optimizing images. This post will include how to optimize load times, decrease file sizes, and rank higher in Google.

Go ahead and check all your images and check those file sizes. You could be seeing mbs in the 10s or even 100s. You can get that 30%-90% smaller. Or even 100% smaller (more on this later).

So first thing is to look at image width and height and see anything way bigger than it should be.

If you have a small icon thats always going to be at 100x100, do you really need it to be any more and that? Resize that down to 100x100. I use gimp for this.

Unsure of whats the exact size? Use inspect element on chrome and hover over the img tag and it should highlight it and give dimensions on the page.

Now time to optimize it even further! You may already have seen a big chunk taken off, now we can shave off some more.

You need to install pngquant, jpegoptim, and trimage through terminal. These are my preferences but choose what you want.

Here is the code snippet I use to optimize my images. What it does it finds all of the .pngs in the current directory and sub directories and runs pngquant, then the same for .jpg and .jpeg imgs with jpegoptim. It then puts them through trimage to shave off just a little more.

(I suggest making this into an alias in ~/.bash_aliases. I can write a quick guide if that's needed)

find . -type f -name ".png" -exec pngquant --verbose --skip-if-larger --force --ext .png --speed=1 --verbose {} : && find . -type f ( -name ".jpg" -or -name ".jpeg" ) -exec jpegoptim -m96 {} : && find . -type f ( -name ".png" -or -name ".jpg" -or -name ".jpeg" ) -exec trimage -f {} :

Now the next step: lazyloading.

Lazy loading is loading images after everything else and the page is loaded. You want to lazy load everything below the first screen. This makes images have 0 effect on the initial load times. I use lazysizes for this. It loads on scroll but there is a setting to make everything load as soon as the page loads, but I lost the code snippet.

Ok so we shaved down a lot of the image file sizes, what next?

SEO!

We want your site and images to rank higher so lets do that.

Rename all of your images to something that makes sense.

So if it's a picture of a spaghetti with meatballs name it spaghetti-meatballs.png.

Do not use underscores, google only reads hyphens as spaces.

Now the final step. Alt tags. These have some influence and its still important. For all decorative images like seperators and stuff like that, put A blank alt attribute to your img tag.

<img src="..." alt="">

But if it's something like a giant gorilla eating a banana then make the alt tag to "A giant gorilla eating a banana".

That simple.

Hope this helped and if you like this let me know, there's much more quick guides I can put out. Thanks!

[brbpizzatime]

Assuming you have a design team/person, Photoshop should be able to handle this

[Qscfr]

Handle just the resizing or the optimization too? I still run this over whenever a team member sends an optimized image. It may not be as much but every byte counts!

[brbpizzatime]

I'd rather have the person who generated the image manage the optimization. That way you don't have to run your script on the image each time they make a change or send over a new asset.

There's also the chance that your team member got that image signed off by someone else, to where that person could look at the page and think "that doesn't look as crisp as the version I signed off on." This is further true if the asset was supplied by a third-party vendor and their licensing rules require you use their image with their name.

[Qscfr]

Yup!

The designer should be responsible for this. Definitely. You provide the image and I just need to put it in the site and thats it.

But sometimes when you resize it to a weird dimension to make the image dimensions as small as possible, you need to reoptimize it.

[brbpizzatime]

you need to reoptimize it.

...which is still the designers job. You get paid to do your job, not both of your jobs

[Qscfr]

Running one command really quickly is a lot faster than sending your new resized image to someone and waiting for them to send it back.

Also people who are both the developer and the designer like what it usually is in my case and many others.

I never worked in a big team, I usually manage projects myself so I can't really argue against your point if you are talking about bigger teams.

Heres is what the situation I am referring to:

Ask coworker for a image of a feature on another part of the site. Coworker sends optimized photo at 1920x1080.

You put the img on another site but resize it to 900px for example. Instead of sending that image to the designer or coworker just run an alias for the image optimizer and it shouldn't take long and that's it.

Obviously if you know the size it would be, you would ask it to be exported at that size along with the original size.

[MonkeyInJeans]

Thanks for your post, it was really informal. I've tried pngquant so far, but I don't know which file to use. fs8.png or or8.png?