A high-quality photo on the main page of the site, but how to reduce its weight?

A

Alexey Cheremnykh2016-10-03 17:56:17

Image optimization

Alexey Cheremnykh, 2016-10-03 17:56:17

Good day!
It is necessary to place a photo of 1440 resolution or more on the title page of the site (scrolling landing).
The only requirement is a small file size for easy page loading.
An example of using "large pictures": www.templatemonster.com/en/website-templates-type/...
Is it possible to compress large resolution photos up to 300-400 kb? Ways?
Which format should I use JPG or PNG or...?
Or in the weather, for less "weight" of the graphics, use alternative graphic methods, degrading the quality? What and how?
Thank you for your help!

Reply

Answer the question

In order to leave comments, you need to log in

5 answer(s)

M

Mark Rosenthal, 2016-10-03
@font

Choose any:
https://compressor.io/
www.jpegmini.com
resizeimage.net
https://tinypng.com/
www.optimizepng.com
www.jpegmini.com - the most ok. An Israeli startup with a cool lossless compression algorithm.

A

Alexey Cheremnykh, 2016-10-03
@Gbyrda

Comrades, thank you for the prompt replies. I will take all the advice and experiment.
But in my questions I tried to reveal one more topic, not only photo compression .... but graphically its deterioration to minimize the size .... but it's not about allowing or deleting metadata, ... but, for example: add at a certain interval "Empty" (white pixels).

A

Alexander Chernykh, 2016-10-03
@sashkets

i have imagemagic in linux

D

Dmitry, 2016-10-03
@dimasmagadan

I do this:
1 I make a preview of a lower resolution and weighing 5-15 kb with the same aspect ratio
2 I insert it as an inline picture
3 I apply the blur filter to this picture
4 I hang the script, either on document ready, either immediately, or when scrolling, so that it starts loading the image in full size
5 after loading the image, I change the inline version to full size, and animate the blur to 0
, it goes something like this
https://youtu.be/PhSVRzYsSFA
on medium, just like the images were loaded
, we connect the CDN and put the images there
, reduce the weight the pictures themselves, a list of utilities for optimizing the size was written to you in other answers
Additionally, in the header we shove a link to a large image with rel="prefetch" or the like.
we enable caching, gzip
, etc. on the hosting to improve the speed of work
from the minuses - the traffic will be a little more