How to Optimize Images for Web

Hi, It’s Eldar. Today, I am going to teach you how to prepare and optimize images before uploading them to your website.

5 things to take into consideration:
Image File Type
Image File Name
Image Ratio
Image Resolution
Image Size

[stevenespinal]

Short and sweet and to the point. Thanks Eldar. Well done!

[davidfain]

Thank you Eldar! Your explanation was concise and very instructive. Good job!

[jimmyaugustsen]

Finally someone can explain it and show it in Pixelmator. Just saved my day, because I always got to blurry images on my website. Thanks a lot!

[acxcilliersx]

Thank you very much for a well presented tutorial on a subject that was troublesome for me but solved my problems, very well done !!

[davidwillsofthenorth]

Hello Eldar! Thank you for taking the time ro post this. It is short, illustrative, and gets right to the point.

[daniels]

Hi! Thanks for this and please: Why not to use WebP images?

[vaylx]

Thanks a bunch. Short and super useful.

[MuchoHop]

Wonderful video, very, very clear and easy to follow!! Thanks

[TheSchoolForCreativeMusic]

You are a very, very good teacher! thank you so much!

[emmap]

Finally in short to the point terms. Thanks Eldar you saved the day / night and a lot coming.

[knowhow]

Many thanks Eldar for this wonderful video content. Well done and please keep up the good work.

[amitabat]

Any idea how to do this process in bulk?

[claudianicolaiyoga]

great video! You explained very well the process :)

[bontonroulet]

You made a great video, thank you Eldar

[anazeer]

Very Helpful...Thanks for a great knowledge. It will be nice if you can tell which software is best to resize image on Windows PC. Thanks

[brahimbenhammou]

very useful video to me, I ve got all what i need in one short video, Bravo!

[noahdiez]

What do you do for those who are using 4k, 2k, HD screens? You don't scale images accordingly?

[Wayne-hzbz]

NOVICE INQUIRY!

I'm not a pro and I'm not planning to be one in photography. I used my phone to capture photos and I really like the simplicity and quality of it every time I take a snap of something. The thing is every time I upload it on Facebook, the quality gets downgraded. I have noticed that pros use a "web-sized" photo every time they upload their stuff and the megapixels, image size, and file size has been reduced but the photo quality on Facebook is not compromised.

QUESTIONS:

1. How do I use Photoshop (or any other apps) to reduce the megapixels, image size, and file size of my photo without compromising the image quality on Facebook?
2. What would be the recommended megapixels, image size, and file size of a vertical and horizontal photo before uploading it on Facebook? I am willing to transfer my photos from my mobile to a pc/laptop and go from there.

I would really appreciate it if you could help me with this and thank you so much in advance! :)

[markcasebeer]

Great advice! You see a lot of designers that build websites really don’t follow good practices like your examples. It’s key to making images look great and have a site that loads fast. Thank you for sharing.

[JamesMoscovar]

That was excellent. I was struggling with that. But one question; should I consider the device where the site will be displayed or that would be done by the theme in case of using CMS?