images size issue

[david5FC3]

I used to edit pictures from Adobe for my website.The problem for me is that these pictures used to be very large in size.When I uploaded these pictures to my website, the speed of my website decreased a lot.Slow speed is consedering as a negative impact for a website. So i decided to use Canva. Now the issue is that i am not satisfied with canva because i cannot edit pictures according to my choice. i just wanna ask is there any way to reduce the size of picture without losing its quality?

[JonathanArias]

You are correct, if you upload huge images to your website the website will be slow.

You however need to understand that in order to reduce the size of images, pixels are subtracted. You can't reduce size without losing quality. 

You can however setup media quaries so different images load at different browsers sizes.

Or

You can learn what is the actual image you need to have for your website and cut images to that size. 

which of these sounds like the correct option for you set up?

you may benefit from watching some videos in this course:

https://www.linkedin.com/learning/creating-optimized-web-graphics/welcome?u=76821178

and this one:

https://www.linkedin.com/learning/responsive-images/welcome?u=76821178

[Jumpenjax]

For a website you can have a resolution of 72 dpi. Which would greatly reduce the size of a high resolution photo. 

[david5FC3]

okay thank you so much for helping me if i need any help will contact you again thanks

[Per Berntsen]

The PPI number (it's PPI, not DPI) is optional metadata used for calculating the printed size of an image.

Pixel dimensions divided by PPI value = Printed dimensions in inches.

For on screen viewing, images will display according to their pixel dimensions, regardless of the PPI value.

Photoshop's Export and Save for Web will normally strip out the PPI value, because it's not required.

Other applications may assign a PPI value when opening these exported images, Photoshop will assign an (arbitrary) value of 72. It has to assign something, to enable rulers to work with physical dimensions, and for type to display correctly.

@david5FC3 

Take a look at this thread:

https://community.adobe.com/t5/photoshop/imaging-resizing-for-web/m-p/11981360#M532859

[david5FC3]

Thank You berntsen...

[Test Screen Name]

You need to be looking at the actual size (in MB or KB) of your pictures. It isn't about the software you use (well, only a bit), it's about being responsible for the size yourself. Don't wait to upload to find it's slow, fix big sizes first.

Find the size you found OK. Now find the size you don't find OK. Check old images - it COULD be that your link slowed down, or you put too much on one page.

[david5FC3]

Thank you so mcuh...

[mistress5E6C]

Resizing the image will significantly reduce the image's file size. ... Moving to the left of the scale will reduce the image's file size, but also its quality. Moving it to the right will increase the file size and quality.

[mistress5E6C]

Bitmap is the most commonly used image type online. All JPEG and PNG files are also Bitmap files, which are made up thousands of tiny pixels. If you download a JPEG or PNG file, zoom in real close and you will see what I’m talking about. Thousands of tiny square pixels that have assigned colors and positions on an image, hence the name:

[link to spam website behind innocuous word removed by moderator]