The image that is sent, say, 1600x800 pixels, from our server to the html page - is sent as a 1600x800 file and only then, thanks to CSS, it becomes 600x800, 432x222, etc.

How to make the server "reduce the image" to the desired one in CSS and send the image of the desired size to the server?

The question arose after a curious verification of the site page via www.gtmetrix.com and PageSpeed Insight , where I wrote on each of them https://***.jpg s resized in HTML or CSS from 1600x800 to 255x127. Serving a scaled image could save 43.0KiB (97% reduction). https://***.jpg s resized in HTML or CSS from 1600x800 to 255x127. Serving a scaled image could save 43.0KiB (97% reduction). etc.

An answer with a manual image change is not accepted. It is worth imagining that if you need to upload 1000 pictures to a page. Each of them can not edit

  • can gzip customize? - Nikita Fast
  • @NikitaFast is squeezing the image itself. And I'm talking about reducing the size itself) - Antonio112009
  • then ffmpeg read online how to use it, it will work if hosting is not shared - Nikita Fast
  • one
    @AlexanderProkoshev yes yes for sure .. I apologize ... but I also processed photos of them but in Linux - Nikita Fast
  • one
    @AlexanderProkoshev I did a slideshow in the sense of ... - Nikita Fast

2 answers 2

You need to make it so that in the html-code, when the image is requested, its size is transferred to the server, for example: <img src="//site.com/img/image.jpg?w=432&h=222"> Next, you need the site.com/img folder site.com/img configure .htaccess (or something else, depending on the server) so that any access to this folder runs a script whose task is to parse the request to the server and run some kind of software or plug-in (I don’t know what form they are in) which will resize your graphics. The general principle is as follows.

PS: There is software for the desktop, which can perform operations on graphics in batch mode, incl. to process 1000 images according to a certain rule - there are no problems. For win, this is an imbatch for example. Another thing is that one and the same picture lies on the server in several sizes and eats a place ...

  • Some horror. And each time you open the page, it will constantly run the script on the resize? - Suvitruf ♦
  • with each request for graphics in the right size. the server will be difficult, but what are you offering? - Andrey Fedorov
  • one
    I propose to do, as most do - to store on the server all the options and give the right. - Suvitruf ♦
  • Well, the author asked not to offer this. Although the place is probably still cheaper performance. You can additionally use caching or resized file to store a certain time after the last request. - Andrey Fedorov

Not the best option, but it is written relatively quickly, the server almost does not load and is ideal for those places where the pictures stretch "automatically" (catalogs, galleries, etc)

Create a php handler for images and a folder for storing cached images

  public static function resizeImage($imgPath, $width, $height="") { //генерируйте имя картинки на свой вкус $path = "/path/to/cahched/image" . $width . "_" . $imgName; $fullPath = $_SERVER['DOCUMENT_ROOT'] . $path; if (file_exists($fullPath)) { return $path; } //Пишите логику резайза любым удобным вам способом return $path; }

Next to the page, insert the image in this way:

 <picture> <source srcset="<? resizeImage("/image.jpg", 300) ?>" media="(min-width: 600px)"> <source srcset="<? resizeImage("/image.jpg", 600) ?>" media="(min-width: 900px)"> <img src="/image.jpg" alt="MDN"> </picture>