How to Optimize Images for Web

• Best Settings for FilM... - How to Record Perfect Video with iPhone
New Blocs Master Channel - / blocsmaster
Free Blocs Trial: BlocsMaster.com/get-blocs
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
Website: EldarGezalov.com
Templates: BlocsTemplates.com
Courses: BlocsMaster.com

[@davidfain1454]

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

[@EldarGezalov]

Hi David! Thanks! I am glad you found this video helpful!

[@davidwillsofthenorth]

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

[@EldarGezalov]

I’m glad it was helpful for you!

[@acxcilliersx3057]

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

[@EldarGezalov]

I’m happy to hear that you find this helpful! :)

[@emmap4339]

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

[@EldarGezalov]

I am really happy to hear that! :)

[@stevenespinal5939]

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

[@jimmyaugustsen1437]

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!

[@EldarGezalov]

I'm glad it was helpful! :)

[@elnurakazybek3898]

thank you Eldar!

[@MuchoHop]

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

[@EldarGezalov]

Glad it was helpful!

[@knowhow1242]

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

[@EldarGezalov]

Thanks for kind words! I’m glad you find this video helpful.

[@bontonroulet1851]

You made a great video, thank you Eldar

[@EldarGezalov]

Thank you 🙏🏻

[@ronmasseyphd8135]

Very useful video. Thanks so much!

[@claudianicolaiyoga1029]

great video! You explained very well the process :)

[@EldarGezalov]

Thanks! I'm glad you find it helpful!

[@brandonmarines5253]

Awesome video! Thank you!

[@EldarGezalov]

I am glad you liked it!

[@juliesamooc667]

very helpful video, thanks a lot!

[@EldarGezalov]

Glad it was helpful!

[@markcasebeer8273]

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.

[@EldarGezalov]

Yeah, finding the right balance between quality and size if very important. Thanks!

[@vaylx2253]

Thanks a bunch. Short and super useful.

[@EldarGezalov]

I'm glad it was helpful!

[@abnoco]

Good content. Thank you.

[@TheSchoolForCreativeMusic]

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

[@EldarGezalov]

Thank you! 😃

[@nikoletadart]

thats amazing.thank you so much!

[@EldarGezalov]

Thanks! I’m glad you find it helpful! If you need any help, I’m alway here :)

[@jimcampbellphotography1515]

Thank you Eldar, great job.

[@EldarGezalov]

Thanks, Jim!

[@thepatientuniversitypresen272]

Nice video, thanks

[@brahimbenhammou2495]

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

[@EldarGezalov]

I’m glad to hear that!

[@saltygoat]

Good job. Well explained.

[@EldarGezalov]

Thank you, Barry!

[@withOsamaNatto]

Thank you for making this video

[@EldarGezalov]

Thank you for watching! :)

[@danielo8097]

thanks brother

[@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?

[@EldarGezalov]

Hi James! You can optimize images for each device size, but most of the time, a well optimized image will look great on all devices.

[@anazeer11]

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

[@EldarGezalov]

Hello. Thanks, I am glad you find it helpful! I haven’t used Windows for a long time, but a regular Photoshop or any alternative will do.

[@livaholvik6396]

THNK YOU!!!!!

[@jomama1513]

Arigatoo!!eldher sama!!!

[@techeekssolution8977]

Do you know uploading pictures without resizing them reduces the uploading speed of your website? You can lose 97% of potential users if your website takes over 2 seconds to download the images. Image optimization and resizing are no more a headache! There is a solution! You can use image resize tools to optimize images as per your desire. It automatically adjusts or applies the effects and resizes the images. Corel Draw speeds up the process of applying multiple effects simultaneously in bulk form. It drastically increases the page uploading speed. www.techeeks.com/product/pic-magic-tools

[@TamilTop5]

thanks

[@vasylzelinskiy7348]

Tnx

[@sufailkandampatt545]

Super ... thanks sir

[@EldarGezalov]

I am glad you find it helpful!

[@mike_qbik]

Any chance to see tutorial on how you optimise videos. Are those GIFs you are using in your templates? Thanks

[@EldarGezalov]

Hi Mike. I rarely use GIFs in my templates. I will make a video about optimizing videos soon!

[@ahshah322]

Soo informative👍

[@EldarGezalov]

Thanks! I'm glad it was helpful to you

[@darko.ristanovic]

Hi, great video mate, one question, when you say max of 2500px is enough, would you say it would still look good on larger screens, like 4k?

[@EldarGezalov]

Yes, it will look absolutely fine.

[@asestrand]

Very useful

[@EldarGezalov]

Happy to hear that

[@noahdiez9400]

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

[@amitabat12]

Any idea how to do this process in bulk?

[@daniels1982]

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

[@EldarGezalov]

Hi Daniel! When I was making this video 2,5 years ago, WEBP format wasn't as widely supported as today. Today, most of my websites use WebP, as the browser and OS support is over 97%. I guess it is time for me to update this video, and release a new version.

[@leesweets4110]

What exactly is being modified with the "image quality" option? JPEG is a well defined file format; your resolution was predetermined by you, your color space is predetermined. Ive actually studied the mathematics hidden in the binary data of the JPG file, so Im a bit confused what image quality is affecting. How is that distinct from resolution and the like in this context?

[@PLANETWATERMELON]

Great video. More Pixelmater Pro videos please. Thanks!

[@EldarGezalov]

Thanks! I will make another Pixelmator Pro video soon!

[@Wayne-hz2bz]

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

[@michaeljohnmagistrado1166]

The 500kb is for the indivudual image sizes, right? How about for the aggregated image sizes in a single page? Do you set a limit for that? idk if my question made sense as google is not returning any meaning result.

[@michaeljohnmagistrado1166]

thank you, btw. great infos!

[@desleykakoulidisgallaway3382]

You know what Eldar, your info was excellent and I kind of understood it, but I also felt defeated as there is so much I don't know or understand with the terminology. I am an artist, calligrapher but not a lot of knowledge to do this properly. I'm in the process of getting my website updated. and want to change the pictures but many of what I've email to the web designer tell me it's not a good image....I wish I could find someone like you who knows what to do and what looks good. These guys are nice but they have no artistic design skills in my opinion nor can I communicate well with them...anyway, thanks for you work...all the best

[@EldarGezalov]

Hello Jessica, you can get in touch with me ([e-mail]) and I will help you and explain in detail everything you need

[@tvledbacklights]

SuppaDuppa!!!

[@ajuzumaki73]

What about the numbers in file-name?

[@wimrotor]

In the new version the crop tool has been moved to the "tools" menu

[@EldarGezalov]

Thanks! I will probably update this video soon!

[@anthonymoldezfitness3048]

Finally i found your video helpful of all, but i just have a little confusion. Coz i see some clothing websites where you click a model's photo it will zoom in to a very large full screen size where you can also see every detail of that picture and also loads up fast. Now is that around 2500pix/500kb also or maybe more? Because im just thinking that you cannot get the same quality with 2500pix/500kb or maybe i'm just wrong. I can show you the website i'm talking about if you let me know your email. Please help me understand and thank you so much i just subscribed to your channel.

[@EldarGezalov]

Thanks! 2500px at 500kb is not bad. Send me the website to [e-mail], and I will take a look

[@stealthbusiness]

I think this video may need updating. There is WebP and AVIF available for use. More than likely over time AVIF will win in the long run.

[@EldarGezalov]

Soon, but I don’t believe it’s time, yet. I use WebP for my website, but there are still some compatibility issues, and AVIF is also not mainstream yet.

[@elgato2491]

I cant find the video can you link it?

[@EldarGezalov]

Hi, what do you mean?

[@marcusgoodwincreative]

I'm confused as to WHY you want to go to all the trouble of reducing the size of the image? ....What is the problem if you leave it as a 5MB file?

[@EldarGezalov]

Hi Marcus, because I am talking about optimzing images to use for web design. Basically, 5MB image is very very bad for website loading speed and SEO performance.

[@maxinef6654]

Where is the image SEO video?

[@sanjayjain4611]

Link please

[@EldarGezalov]

link to what?

[@mpguirey]

Awesome Sweater! Then you cropped out the best bit :( Haha

[@EldarGezalov]

Thanks!

[@naturalhealthrevolution1518]

Can I have your email? I have some questions

[@EldarGezalov]

Hi! Sure, you can contact me at [e-mail]