[02] Optimizing Your Images

Подписаться 342 тыс.

Просмотров 70 тыс.

50% 1

In this lesson, we’ll explore the importance of optimizing images used on your website. We’ll help you to understand the common web based image types and also learn where and when to use them.
Watch the full Website Performance Optimization course here: elemn.to/optimizationcourse
This lesson will provide you with:
✓ A clear understanding of common web based image formats: JPG, SVG, GIF and PNG
✓ The correct use of images and what to avoid
✓ Optimizing your images for web use before uploading them
✓ Editing & optimizing your website images in Photoshop, Illustrator, PhotoPea, Inkscape & TinyPNG
✓ And much more!
Don’t forget to subscribe to our channel!
Get Elementor: elementor.com/
Get Pro: elementor.com/pro

Опубликовано:

16 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 58

@slavetotheparasites413 3 года назад

In the first video of the playlist , you added a dark overlay to the hero images in elementor to ensure the text was readable over it. If you instead apply this overlay in photoshop as a semi-transparent rectangle, then export and optimise, you'll reduce the image file size even further, achieve the same effect, and have one less piece of html and css on the website.

@frontweb9984 3 года назад

Thanks

@emreergul2218 3 года назад

I've always thought about that in every single web dev. video on RU-vid which puts an overlay on an image, i wonder why nobody applies that.

@slavetotheparasites413 3 года назад

@@emreergul2218 I guess in some outside cases applying the overlay makes sense... Like if the client has to be able to add images to the section later, maybe. But for any set images it makes sense to apply it before.

@madleafsfan 3 года назад

photoshop be pricey. I think that is why tbh

@jakemacleay 3 года назад

For those of us who change their minds frequently (or who have clients who change their minds), the reason to avoid overlaying via PS is that is then part of the image and you cant make changes to the overlay intensity / colour etc without making another trip to photoshop and doing it all over again.

@TroyDettwiler 3 года назад

Thanks for the tip on the Chrome Developer tools. I've read so many articles on image compression, but this is the first useful one to troubleshoot a site. This video series is gold.

@thepurpleufo 3 года назад

Hello!!!!! I've seen two of your videos now, and they are great. I hope you continue making more. Thank you.

@wpmudev-wordpress 3 года назад

Hey Ash 👋great website performance optimization series! Thanks for mentioning Smush in this video ✌

@kianiano 2 года назад

PERRRRRRFECT!!! No item skipped! Very wel explained. I really THANK YOU, not only fr this video, but for all you make.

@teddchilless5645 Год назад

After watching numerous videos on preparing images THIS IS THE BEST!!!

@SimonVeredon 3 года назад

Thank you for this! We are working on our Wordpress Website and really needed this quick information before batch optimizing all our images abd uploading them! Thank you!

@Elementor 3 года назад

Thanks Big story! I love hearing how these videos help users like you. It really makes my day 🤩. Thank you for sharing!

@SimonVeredon 3 года назад

@@Elementor Absolutely! I'm glad to let you know!! Thank you!

@FocalPointTours 3 года назад

Thank you. This is very helpful!

@pedrorodriguezjimenez5738 2 года назад

Awesome videos, we need more optimization videos! Thanks a milliom

@bySterling 3 года назад

TINY PNG (though Photoshop my Jam 20 + years) ROCKS 💯 🙌🏻⚡️🎉

@thepurpleufo 3 года назад

Yes, TINY PNG is GREAT!!!!!

@twincatcreativeagency5996 3 года назад

Many thanks!!

@rayeaglenz 2 года назад

Amazing explained, thank you 👍😊

@dannygrio 3 года назад

thank you for the video. Could you explain how you came up with 2000 px width resolution for the hero? Is that the ideal size when building a website?

@lijinbabu8601 3 года назад

Amazing explained

@ritaravinsky8262 3 года назад

Thank you!

@epictrailer_ 3 года назад

Thanks for sharing the knowledge. Very useful.

@Elementor 3 года назад

I'm happy that you found it useful Joe😁💯

@web-atelier 3 года назад

Thanks 👌

@maxtrenck8511 7 месяцев назад

Super video!

@MrCindywill317 3 года назад

Really useful! Thanks a lots

@Elementor 3 года назад

Happy to help Merci 😊

@kayatkinson9000 3 года назад

I'm having an issue with the Featured Image shifting. I have the file optimized to a small size, but the featured image is still shifting on loading the page. How do I stop the content shifting?

@tendencymagazine 2 года назад

What image size settings in the media settings do you recommend for Elementor Hello Theme?

@sofiafernandez7150 Год назад

This video is gold!

@andihutajulu 3 года назад

usefull tutorial 👍

@spyrosnikolaidis 2 года назад

What about WebP files for photos instead of jpeg??

@cameron9695rhysd 11 месяцев назад

Is it better to have a separate mobile view image? My hero section will be the same picture so do I need to have a 1920px image for desktop and upload a 700px ish to display on mobile or will add bloat ?

@treasuresnownthen 2 года назад

We have a website that includes many photographs in a gallery that changes from month to month. What is the optimal size for these photos?

3 года назад

How do you go about finding the max width of an image? You say 2000px, but it would be great to know your process :)

@levelclimbingvideos5819 3 года назад

Great question. I would also like to know.

@adrijumastopo 3 года назад

Maybe because the width of the monitor screen today generally has a resolution of 1920 pixels. So an image width of 2000 pixels is more than enough.

@BradK02 2 года назад

Is the width standard as 2000px for all full width images. Is this the recommended standard.

@coolestnerdever2128 2 года назад

Great video. Thank you. Is there a recommended method to do bulk optimization without using a plugin? Any tool(s) that has a better option outside of optimizing one by one - like if I wanted to make multiple photos the same size and % reduction?

@hcf797 2 года назад

This video from PiXimperfect may help ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-BlIHilgAyCg.html

@coolestnerdever2128 2 года назад

@@hcf797 thank you so much. I appreciate it.

@CrystalRicotta 2 года назад

Lookup batch resize.

@meshtarua Год назад

you are best

@vincetan7604 4 месяца назад

Is webp format recommended?

@rodinnyfotograf 3 года назад

Hi - I need oyur help. Somehow I got my picture pixelated when loading on website - and it gets full quality just after its fully loaded. And I have no idea know I did it :D But I like it. I was reducing size and quality of photos in photoshop - but I dont know which option it was :( I think its much better to load pixelated picture that will go full quality than to wait for whole clear images.... Any ideas please???

@Elementor 3 года назад

Hi , I recommend posting your question in the Elementor Community Facebook group. You'll be able to share screenshots and more information about this issue and get great advice from other web creators: facebook.com/groups/Elementors/permalink/3707554449370314