{"id":289076,"date":"2018-09-06T21:55:02","date_gmt":"2018-09-06T17:55:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=289076"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=289076","title":{"rendered":"\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0434\u043b\u044f \u0432\u0435\u0431\u0430: \u0441\u0430\u043c\u043e\u0435 \u0432\u0430\u0436\u043d\u043e\u0435"},"content":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/422531\/\" class=\"post__text post__text-html js-mediator-article\"><font color=\"gray\">\u0410\u0432\u0442\u043e\u0440 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 \u2014 \u042d\u0434\u0434\u0438 \u041e\u0441\u043c\u0430\u043d\u0438, \u043e\u0434\u0438\u043d \u0438\u0437 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Google Chrome<\/font> <\/p>\n<h1>tl;dr<\/h1>\n<p>  <\/p>\n<h4>C\u0436\u0430\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e<\/h4>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0434\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041e \u043d\u0435\u0439 \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u0431\u044b\u0442\u044c, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u0434\u0430 \u0438 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u043e\u0441\u043a\u043e\u043b\u044c\u0437\u043d\u0443\u0442\u044c \u043c\u0438\u043c\u043e \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u0430 \u0441\u0431\u043e\u0440\u043a\u0438. \u0414\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/imagemin\/imagemin\">imagemin<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/jcupitt\/libvips\">libvips<\/a>. \u0415\u0441\u0442\u044c \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445.<\/p>\n<p>  \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e CDN (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/www.akamai.com\/us\/en\/solutions\/why-akamai\/image-management.jsp\">Akamai<\/a>) \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/cloudinary.com\">Cloudinary<\/a>, <a href=\"https:\/\/imgix.com\">imgix<\/a>, <a href=\"https:\/\/www.fastly.com\/io\/\">Fastly Image Optimizer<\/a>, <a href=\"https:\/\/www.instartlogic.com\/technology\/machine-learning\/smartvision\">Instart Logic SmartVision<\/a> \u0438 <a href=\"https:\/\/imageoptim.com\/api\">ImageOptim API<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u041d\u0430 \u0447\u0442\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0432\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u0440\u043e\u0436\u0435 \u043e\u043f\u043b\u0430\u0442\u044b \u0438\u0445 \u0443\u0441\u043b\u0443\u0433 (\u0443 Cloudinary \u0435\u0441\u0442\u044c <a href=\"http:\/\/cloudinary.com\/pricing\">\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439<\/a> \u0442\u0430\u0440\u0438\u0444). \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0430\u0443\u0442\u0441\u043e\u0440\u0441\u0438\u043d\u0433 \u043f\u043e \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u0438\u0437-\u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 latency, \u0442\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c. \u041f\u0440\u043e\u0435\u043a\u0442\u044b <a href=\"https:\/\/github.com\/imazen\/imageflow\">Imageflow<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/thumbor\/thumbor\">Thumbor<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0435.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h4>\u0412\u0441\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0441\u0436\u0438\u043c\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/h4>\n<p>  \u041a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/imageoptim.com\/\">ImageOptim<\/a>. \u041e\u043d \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u0415\u0441\u0442\u044c <a href=\"https:\/\/imageoptim.com\/versions.html\">\u0432\u0435\u0440\u0441\u0438\u0438<\/a> \u043f\u043e\u0434 Windows \u0438 Linux.<\/p>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u0442\u0449\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434: \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0439\u0442\u0435 JPEG-\u0444\u0430\u0439\u043b\u044b \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/github.com\/mozilla\/mozjpeg\">MozJPEG<\/a> (\u0434\u043b\u044f \u0432\u0435\u0431-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e <code>q=80<\/code> \u0438\u043b\u0438 \u043d\u0438\u0436\u0435) \u0438 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 <a href=\"http:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\">Progressive JPEG<\/a>. \u0424\u0430\u0439\u043b\u044b PNG \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u0439\u0442\u0435 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/pngquant.org\/\">pngquant<\/a>, \u0430 SVG \u2014 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/github.com\/svg\/svgo\">SVGO<\/a>. \u042f\u0432\u043d\u043e \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u043e\u0447\u0438\u0441\u0442\u043a\u0443 \u043e\u0442 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 (<code>--strip<\/code> \u0434\u043b\u044f pngquant), \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0440\u0430\u0437\u0434\u0443\u0442\u0438\u044f \u0444\u0430\u0439\u043b\u043e\u0432. \u0412\u043c\u0435\u0441\u0442\u043e \u0441\u0443\u043c\u0430\u0441\u0448\u0435\u0434\u0448\u0438\u0445 \u0433\u0438\u0433\u0430\u043d\u0442\u0441\u043a\u0438\u0445 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 GIF \u043e\u0442\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0438\u0434\u0435\u043e <a href=\"https:\/\/en.wikipedia.org\/wiki\/H.264\/MPEG-4_AVC\">H.264<\/a> (\u0438\u043b\u0438 <a href=\"https:\/\/www.webmproject.org\/\">WebM<\/a> \u0434\u043b\u044f Chrome, Firefox \u0438 Opera)! \u0415\u0441\u043b\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0435\u0431\u0435 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c, \u0442\u043e \u0445\u043e\u0442\u044f \u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/pornel\/giflossy\">Giflossy<\/a>. \u041a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u044c \u043f\u0430\u0440\u0443 \u0446\u0438\u043a\u043b\u043e\u0432 CPU, \u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u0441\u043c\u0438\u0440\u0438\u0442\u044c\u0441\u044f \u0441 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0435\u043c \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0442\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 <a href=\"https:\/\/research.googleblog.com\/2017\/03\/announcing-guetzli-new-open-source-jpeg.html\">Guetzli<\/a>.<\/p>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u0443\u044e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Accept. \u042d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0434\u043b\u044f \u0432\u044b\u0434\u0430\u0447\u0438: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u043e\u0440\u043c\u0430\u0442 <a href=\"https:\/\/developers.google.com\/speed\/webp\/\">WebP<\/a> \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Blink, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Chrome, \u0438 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 JPEG\/PNG \u0434\u043b\u044f \u0434\u0440\u0443\u0433\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432.<\/p>\n<p>  \u0421\u0436\u0430\u0442\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c. \u0415\u0441\u0442\u044c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0438 \u0432\u044b\u0434\u0430\u0447\u0438 <code>srcset<\/code>. \u0412 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 Blink \u0432\u044b\u0431\u043e\u0440 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/developers.google.com\/web\/updates\/2015\/09\/automating-resource-selection-with-client-hints\">client-hints<\/a> \u2014 \u0438 \u0432\u044b \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u0435 \u0442\u0440\u0430\u0444\u0438\u043a \u043d\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u0430\u043b\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043e\u043f\u0446\u0438\u044e \u00ab\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445\u00bb \u0447\u0435\u0440\u0435\u0437 \u043f\u043e\u0434\u0441\u043a\u0430\u0437\u043a\u0443 <a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/02\/save-data\">Save-Data<\/a>.<\/p>\n<p>  \u0427\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0442\u0435\u043c \u0443\u0434\u043e\u0431\u043d\u0435\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u2014 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0441 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u043c\u0438. \u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0441\u0436\u0430\u0442\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u043c\u0435\u0442\u043e\u0434\u0430\u043c\u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u043b\u0438\u044f\u043d\u0438\u0435\u043c \u043d\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e.<\/p>\n<h1>\u0421\u043e\u0434\u0435\u0440\u0436\u0430\u043d\u0438\u0435<\/h1>\n<p>  <\/p>\n<ul>\n<li><a href=\"#01\">\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/a><\/li>\n<li><a href=\"#02\">\u041a\u0430\u043a \u0443\u0437\u043d\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f?<\/a><\/li>\n<li><a href=\"#03\">\u041a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442?<\/a><\/li>\n<li><a href=\"#04\">\u0421\u043a\u0440\u043e\u043c\u043d\u044b\u0439 JPEG<\/a><\/li>\n<li><a href=\"#05\">\u0420\u0435\u0436\u0438\u043c\u044b \u0441\u0436\u0430\u0442\u0438\u044f JPEG<\/a>\n<ul>\n<li><a href=\"#06\">\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 JPEG<\/a><\/li>\n<li><a href=\"#07\">\u041a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435?<\/a><\/li>\n<li><a href=\"#08\">\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e JPEG<\/a><\/li>\n<li><a href=\"#09\">\u041a\u0430\u043a \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e JPEG?<\/a><\/li>\n<li><a href=\"#10\">\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/a><\/li>\n<li><a href=\"#11\">\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 JPEG<\/a><\/li>\n<li><a href=\"#12\">JPEG-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u044b<\/a><\/li>\n<li><a href=\"#13\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 MozJPEG?<\/a><\/li>\n<li><a href=\"#14\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Guetzli?<\/a><\/li>\n<li><a href=\"#15\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 MozJPEG \u0441 Guetzli?<\/a><\/li>\n<li><a href=\"#16\">Butteraugli<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#17\">\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 WebP?<\/a>\n<ul>\n<li><a href=\"#18\">\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 WebP?<\/a><\/li>\n<li><a href=\"#19\">\u041a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebP \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435?<\/a><\/li>\n<li><a href=\"#20\">\u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 WebP?<\/a><\/li>\n<li><a href=\"#21\">\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 WebP<\/a><\/li>\n<li><a href=\"#22\">\u041a\u0430\u043a \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 WebP?<\/a><\/li>\n<li><a href=\"#23\">\u041a\u0430\u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f WebP \u043d\u0430 \u043c\u043e\u0435\u0439 \u041e\u0421?<\/a><\/li>\n<li><a href=\"#24\">\u041a\u0430\u043a \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c WebP?<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#25\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f SVG<\/a><\/li>\n<li><a href=\"#26\">\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0436\u0430\u0442\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430<\/a><\/li>\n<li><a href=\"#27\">\u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430<\/a>\n<ul>\n<li><a href=\"#28\">\u0414\u043e\u0441\u0442\u0430\u0432\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 HiDPI \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e srcset<\/a><\/li>\n<li><a href=\"#29\">\u0425\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/a><\/li>\n<\/ul>\n<\/li>\n<li><a href=\"#30\">\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u043c<\/a><\/li>\n<li><a href=\"#31\">\u0421\u043f\u0440\u0430\u0439\u0442\u044b<\/a><\/li>\n<li><a href=\"#32\">\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0435\u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/li>\n<li><a href=\"#33\">\u041a\u0430\u043a \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043b\u043e\u0432\u0443\u0448\u043a\u0438 display:none<\/a><\/li>\n<li><a href=\"#34\">\u0415\u0441\u0442\u044c \u043b\u0438 \u0441\u043c\u044b\u0441\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f CDN \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439?<\/a><\/li>\n<li><a href=\"#35\">\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/li>\n<li><a href=\"#36\">\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0430\u0436\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/a><\/li>\n<li><a href=\"#37\">\u0411\u044e\u0434\u0436\u0435\u0442\u044b \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a><\/li>\n<li><a href=\"#38\">\u0417\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/a><\/li>\n<li><a href=\"#39\">\u041c\u0435\u043b\u043e\u0447\u0438<\/a><\/li>\n<\/ul>\n<p>  <a name=\"01\"><\/a><\/p>\n<h1>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435<\/h1>\n<p>  <\/p>\n<h4>\u0413\u0440\u0430\u0444\u0438\u043a\u0430 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439 \u043e\u0436\u0438\u0440\u0435\u043d\u0438\u044f \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/h4>\n<p>  \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u0443\u044e \u0434\u043e\u043b\u044e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442-\u0442\u0440\u0430\u0444\u0438\u043a\u0430. \u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"http:\/\/httparchive.org\/\">HTTP Archive<\/a>, 60% \u043e\u0431\u044a\u0451\u043c\u0430 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u2014 \u044d\u0442\u043e \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445 JPEG, PNG \u0438 GIF. \u041f\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043d\u0430 \u0438\u044e\u043b\u044c 2017 \u0433\u043e\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u043b\u0438 1,7\u00a0\u041c\u0411 \u043d\u0430 \u0441\u0440\u0435\u0434\u043d\u0435\u0439 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043e\u0431\u044a\u0451\u043c\u043e\u043c 3,0\u00a0\u041c\u0411.<\/p>\n<p>  \u042d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442 \u0422\u044d\u043c\u043c\u0438 \u042d\u0432\u0435\u0440\u0442\u0441\u0430 <a href=\"https:\/\/calendar.perfplanet.com\/2014\/images-are-king-an-image-optimization-checklist-for-everyone-in-your-organization\/\">\u0434\u043e\u043a\u0430\u0437\u0430\u043b<\/a>, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u0438 (\u043f\u0440\u043e\u0446\u0435\u043d\u0442 \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u043a\u043b\u0438\u0435\u043d\u0442\u0430\u043c\u0438 \u2014 \u043f\u0440\u0438\u043c.\u00a0\u043f\u0435\u0440.). \u0422\u0430\u043a \u0447\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u0434\u0435\u043d\u0443\u0442\u0441\u044f \u2014 \u0432\u043e\u0442 \u043f\u043e\u0447\u0435\u043c\u0443 \u0432\u0430\u0436\u043d\u043e \u0432\u043b\u043e\u0436\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u043f\u043e \u0438\u0445 \u0441\u0436\u0430\u0442\u0438\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/4a3\/3b0\/2b6\/4a33b02b6a5429884129920cb5795047.jpg\"><br \/>  <i><font color=\"gray\"><a href=\"https:\/\/www.thinkwithgoogle.com\/marketing-resources\/experience-design\/mobile-page-speed-load-time\/\">\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 Soasta\/Google<\/a> \u043e\u0442 2016 \u0433\u043e\u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e, \u0447\u0442\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u2014 \u044d\u0442\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u043f\u0440\u0435\u0434\u0438\u043a\u0442\u043e\u0440 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u0438, \u0430 \u0443 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 \u043d\u0430 38% \u043c\u0435\u043d\u044c\u0448\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a<\/font><\/i><\/p>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0440\u044f\u0434 \u043c\u0435\u0440. \u0412\u044b\u0431\u043e\u0440 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a\u0443\u044e \u043f\u043e\u0442\u0435\u0440\u044e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/717\/0e8\/588\/7170e85883225b9e08b09ea84cc3ae72.jpg\"><br \/>  <i><font color=\"gray\">\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f: \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442, \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e \u0441\u0436\u0430\u0442\u044c \u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/font><\/i><\/p>\n<p>  \u0422\u0438\u043f\u0438\u0447\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0441\u0436\u0430\u0442\u0438\u0435, \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u0443\u044e \u0432\u044b\u0434\u0430\u0447\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u043e\u0432 <code>&lt;picture&gt;\/&lt;img srcset&gt;<\/code> \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/8ba\/36c\/69c\/8ba36c69c745b99a1bb0b25d803ae15c.jpg\"><br \/>  <i><font color=\"gray\">\u0421\u043e\u0433\u043b\u0430\u0441\u043d\u043e <a href=\"http:\/\/jsfiddle.net\/rviscomi\/rzneberp\/embedded\/result\/\">HTTP Archive<\/a>, \u043d\u0430 95-\u043c \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0438\u043b\u0435 (\u0432 \u043a\u0443\u043c\u0443\u043b\u044f\u0442\u0438\u0432\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f) \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u0434\u0434\u0430\u0451\u0442\u0441\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044e \u043d\u0430 30\u00a0\u041a\u0411!<\/font><\/i><\/p>\n<p>  \u0423 \u043d\u0430\u0441 \u0435\u0449\u0451 \u043e\u0447\u0435\u043d\u044c \u043c\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/640\/bb3\/f22\/640bb3f22116b34da321bc72f5ffd360.jpg\"><br \/>  <i><font color=\"gray\">\u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 ImageOptim \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0441\u0436\u0430\u0442\u0438\u044f \u0438 \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 EXIF<\/font><\/i><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u0435\u0441\u0442\u044c \u0435\u0449\u0451 <a href=\"https:\/\/github.com\/ImageOptim\/Sketch-plugin\">\u043f\u043b\u0430\u0433\u0438\u043d ImageOptim \u0434\u043b\u044f Sketch<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435. \u042f \u043d\u0430\u0448\u0451\u043b, \u0447\u0442\u043e \u043e\u043d \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u043c\u0430\u0441\u0441\u0443 \u0432\u0440\u0435\u043c\u0435\u043d\u0438.<\/p>\n<p>  <a name=\"02\"><\/a><\/p>\n<h1>\u041a\u0430\u043a \u0443\u0437\u043d\u0430\u0442\u044c, \u043d\u0443\u0436\u043d\u043e \u043b\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f?<\/h1>\n<p>  \u041f\u0440\u043e\u0432\u0435\u0434\u0438\u0442\u0435 \u0430\u0443\u0434\u0438\u0442 \u0441\u0430\u0439\u0442\u0430 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.webpagetest.org\/\">WebPageTest.org<\/a>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/bd7\/5ed\/eb7\/bd75edeb7a6ded48fcb74b79acc9b01f.jpg\"><br \/>  <i><font color=\"gray\">\u0412 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Compress Images \u043e\u0442\u0447\u0451\u0442\u0430 WebPageTest \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0436\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e, \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0442\u0435\u043d\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0444\u0430\u0439\u043b\u043e\u0432<\/font><\/i><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c45\/d66\/afa\/c45d66afa348cb8c00124c6d3c95bb99.jpg\"><\/p>\n<p>  \u0421\u0435\u0440\u0432\u0438\u0441 <a href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\/\">Lighthouse<\/a> \u0442\u043e\u0436\u0435 \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0430\u0443\u0434\u0438\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041e\u043d \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0441\u0436\u0430\u0442\u044c \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432 \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443.<\/p>\n<p>  \u041d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Chrome 60 \u044d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0438\u0441 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 <a href=\"https:\/\/developers.google.com\/web\/updates\/2017\/05\/devtools-release-notes#lighthouse\">\u043f\u0430\u043d\u0435\u043b\u0438 \u0430\u0443\u0434\u0438\u0442\u0430<\/a> Chrome DevTools:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f98\/cbe\/eb0\/f98cbeeb0a10a2faf610981cecf07400.jpg\"><br \/>  <i><font color=\"gray\">Lighthouse \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442 \u0430\u0443\u0434\u0438\u0442 \u0441 \u043f\u0440\u0438\u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438 \u0438\u043b\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 (\u043d\u0430 \u0432\u044b\u0431\u043e\u0440)<\/font><\/i><\/p>\n<p>  \u0412\u0430\u043c \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0430\u0443\u0434\u0438\u0442\u0430, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\">PageSpeed Insights<\/a> \u0438 <a href=\"https:\/\/webspeedtest.cloudinary.com\/\">Website Speed Test<\/a> \u043e\u0442 Cloudinary, \u0432\u043a\u043b\u044e\u0447\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u0430\u0443\u0434\u0438\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <a name=\"03\"><\/a><\/p>\n<h1>\u041a\u0430\u043a \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442?<\/h1>\n<p>  \u041a\u0430\u043a \u043e\u0442\u043c\u0435\u0442\u0438\u043b \u0418\u043b\u044c\u044f \u0413\u0440\u0438\u0433\u043e\u0440\u0438\u043a \u0432 \u0441\u0432\u043e\u0451\u043c \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u043e\u043c <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/image-optimization\">\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043f\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a>, \u00ab\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442\u00bb \u0441\u043e\u0447\u0435\u0442\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u0435 \u0436\u0435\u043b\u0430\u0435\u043c\u044b\u0439 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f. \u0423 \u0432\u0430\u0441 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u0430\u044f \u0438\u043b\u0438 \u0432\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430?<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/69b\/fc1\/e44\/69bfc1e44304fbf9877fe53a86ff80b2.png\"><\/p>\n<p>  <a href=\"https:\/\/en.wikipedia.org\/wiki\/Raster_graphics\">\u0420\u0430\u0441\u0442\u0440\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430<\/a> \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u044f \u043d\u0430 \u043f\u0440\u044f\u043c\u043e\u0443\u0433\u043e\u043b\u044c\u043d\u043e\u0439 \u0441\u0435\u0442\u043a\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439. \u041e\u043d\u0438 \u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u044f\u0442 \u043e\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438\u043b\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430. \u0421 \u0442\u0430\u043a\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439 \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f WebP \u0438\u043b\u0438 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a JPEG \u0438\u043b\u0438 PNG. \u0420\u0430\u0441\u0442\u0440\u043e\u0432\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u043d\u0443\u0436\u0435\u043d \u0444\u043e\u0442\u043e\u0440\u0435\u0430\u043b\u0438\u0437\u043c. Guetzli, MozJPEG \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438.<\/p>\n<p>  <a href=\"https:\/\/en.wikipedia.org\/wiki\/Vector_graphics\">\u0412\u0435\u043a\u0442\u043e\u0440\u043d\u0430\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0430<\/a> \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0442\u043e\u0447\u043a\u0438, \u043f\u0440\u044f\u043c\u044b\u0435 \u0438 \u043f\u043e\u043b\u0438\u0433\u043e\u043d\u044b \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u0440\u043e\u0441\u0442\u044b\u043c\u0438 \u0433\u0435\u043e\u043c\u0435\u0442\u0440\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u0438\u0433\u0443\u0440\u0430\u043c\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432). \u041e\u043d\u0430 \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0432\u044b\u0441\u043e\u043a\u043e\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0414\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0432\u0440\u043e\u0434\u0435 SVG.<\/p>\n<p>  \u0412\u044b\u0431\u043e\u0440 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0434\u043e\u0440\u043e\u0433\u043e \u0432\u0430\u043c \u043e\u0431\u043e\u0439\u0434\u0451\u0442\u0441\u044f. \u041c\u0435\u043d\u044f\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u043e\u0441\u0442\u044c\u044e, \u043f\u0440\u043e\u0432\u0435\u0434\u044f \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u044b \u0441 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0439 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0435\u0439 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445.<\/p>\n<p>  \u0414\u0436\u0435\u0440\u0435\u043c\u0438 \u0412\u0430\u0433\u043d\u0435\u0440 \u0432 \u0441\u0432\u043e\u0435\u0439 \u043b\u0435\u043a\u0446\u0438\u0438 <a href=\"http:\/\/jlwagner.net\/talks\/these-images\/#\/2\/2\">\u043e\u0441\u0432\u0435\u0442\u0438\u043b \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u044b<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u043e\u0438\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043e\u0446\u0435\u043d\u043a\u0435 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438.<\/p>\n<p>  <a name=\"04\"><\/a><\/p>\n<h1>\u0421\u043a\u0440\u043e\u043c\u043d\u044b\u0439 JPEG<\/h1>\n<p>  \u0412\u0435\u0440\u043e\u044f\u0442\u043d\u043e, <a href=\"https:\/\/en.wikipedia.org\/wiki\/JPEG\">JPEG<\/a> \u2014 \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u0432 \u043c\u0438\u0440\u0435 \u0444\u043e\u0440\u043c\u0430\u0442 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u041a\u0430\u043a \u043e\u0442\u043c\u0435\u0447\u0430\u043b\u043e\u0441\u044c \u0440\u0430\u043d\u0435\u0435, <a href=\"http:\/\/httparchive.org\/interesting.php\">45% \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a> \u043d\u0430 \u0441\u0430\u0439\u0442\u0430\u0445 \u0432 HTTP Archive \u2014 \u044d\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 JPEG. \u0412\u0430\u0448 \u0442\u0435\u043b\u0435\u0444\u043e\u043d, \u0446\u0438\u0444\u0440\u043e\u0432\u0430\u044f \u043a\u0430\u043c\u0435\u0440\u0430, \u0441\u0442\u0430\u0440\u0430\u044f \u0432\u0435\u0431-\u043a\u0430\u043c\u0435\u0440\u0430 \u2014 \u0432\u0441\u0435 \u043e\u043d\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0434\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u0434\u0435\u043a. \u041e\u043d \u043e\u0447\u0435\u043d\u044c \u0434\u0440\u0435\u0432\u043d\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0436 \u0441 1992 \u0433\u043e\u0434\u0430. \u0417\u0430 \u044d\u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u043e \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0439, \u043a\u0430\u043a \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u044e JPEG.<\/p>\n<p>  JPEG \u2014 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c \u0441\u0436\u0430\u0442\u0438\u044f \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u00ab\u043b\u0438\u0448\u043d\u044e\u044e\u00bb \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0434\u043b\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u043c\u0435\u0441\u0442\u0430. \u0417\u0430\u0434\u0430\u0447\u0430 \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0444\u0430\u0439\u043b\u043e\u0432.<\/p>\n<h4>\u041a\u0430\u043a\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e \u0432 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435?<\/h4>\n<p>  \u0424\u043e\u0440\u043c\u0430\u0442\u044b \u0432\u0440\u043e\u0434\u0435 JPEG \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0446\u0432\u0435\u0442\u043e\u0432. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0436\u0430\u0442\u0438\u044f: \u0431\u043e\u043b\u0435\u0435 \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0441\u0436\u0430\u0442\u0438\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043d\u0435\u0441\u0442\u0438 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b: \u0433\u0430\u043b\u043e \u0438\u043b\u0438 \u0431\u043b\u043e\u0447\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ef8\/c24\/b8e\/ef8c24b8ea845d7f5ba216762c72f60c.jpg\"><br \/>  <i><font color=\"gray\">\u0412\u0438\u0434\u0438\u043c\u044b\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u0441\u0436\u0430\u0442\u0438\u044f JPEG \u043d\u0430\u0440\u0430\u0441\u0442\u0430\u044e\u0442 \u043f\u043e \u043c\u0435\u0440\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043e\u0442 \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a \u0445\u0443\u0434\u0448\u0435\u043c\u0443. \u0417\u0430\u043c\u0435\u0442\u044c\u0442\u0435, \u0447\u0442\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0445 \u043c\u043e\u0433\u0443\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f<\/font><\/i><\/p>\n<p>  \u041f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u0443\u0440\u043e\u0432\u043d\u044f \u0441\u0436\u0430\u0442\u0438\u044f \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0442\u044c, \u043a\u0430\u043a\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439:<\/p>\n<ul>\n<li><b>\u0421\u0430\u043c\u043e\u0435 \u043b\u0443\u0447\u0448\u0435\u0435<\/b>: \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0432\u0430\u0436\u043d\u0435\u0435, \u0447\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u0432\u044f\u0437\u0430\u043d\u043e \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0438\u0434\u043d\u043e\u0435 \u043c\u0435\u0441\u0442\u043e \u0432 \u0434\u0438\u0437\u0430\u0439\u043d\u0435 \u0438\u043b\u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u043e\u043b\u043d\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438.<\/li>\n<li><b>\u0425\u043e\u0440\u043e\u0448\u0435\u0435<\/b>: \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0434\u0443\u043c\u0430\u0435\u0442\u0435 \u043e\u0431 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0442\u0440\u0430\u0444\u0438\u043a\u0430, \u043d\u043e \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u0432\u0430\u0436\u043d\u043e \u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439.<\/li>\n<li><b>\u041d\u0438\u0437\u043a\u043e\u0435<\/b>: \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0437\u0430\u0431\u043e\u0442\u0438\u0442\u0435\u0441\u044c \u043e \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c \u0442\u0440\u0430\u0444\u0438\u043a\u0435 \u0438 \u043c\u0438\u0440\u0438\u0442\u0435\u0441\u044c \u0441 \u0434\u0435\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0441\u0435\u0442\u0435\u0439 \u0441 \u043f\u043b\u043e\u0445\u0438\u043c \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435\u043c \u0438 \u0442\u043e\u043d\u043a\u0438\u0445 \u043a\u0430\u043d\u0430\u043b\u043e\u0432.<\/li>\n<li><b>\u0421\u0430\u043c\u043e\u0435 \u043d\u0438\u0437\u043a\u043e\u0435<\/b>: \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f \u043f\u043e\u043b\u043e\u0441\u044b \u0438\u043c\u0435\u0435\u0442 \u043f\u0435\u0440\u0432\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u044b \u043d\u0430 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u043b\u043e\u0445\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0434\u0438 \u0431\u043e\u043b\u0435\u0435 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/li>\n<\/ul>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0440\u0435\u0436\u0438\u043c\u0430\u0445 \u0441\u0436\u0430\u0442\u0438\u044f JPEG, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043c\u044b \u0438\u043d\u043e\u0433\u0434\u0430 \u043f\u0435\u0440\u0435\u043e\u0446\u0435\u043d\u0438\u0432\u0430\u0435\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c. \u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u0438\u0435 \u043e\u0442 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430. \u042d\u0442\u043e \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c.<\/p><\/blockquote>\n<p>  <a name=\"05\"><\/a><\/p>\n<h1>\u0420\u0435\u0436\u0438\u043c\u044b \u0441\u0436\u0430\u0442\u0438\u044f JPEG<\/h1>\n<p>  \u0412 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JPEG \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0440\u0435\u0436\u0438\u043c\u043e\u0432 \u0441\u0436\u0430\u0442\u0438\u044f. \u0422\u0440\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445: \u0431\u0430\u0437\u043e\u0432\u044b\u0439 (\u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439), \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG (PJPEG) \u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c.<\/p>\n<h4>\u0427\u0435\u043c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0431\u0430\u0437\u043e\u0432\u044b\u0439 (\u0438\u043b\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439) \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG?<\/h4>\n<p>  \u0411\u0430\u0437\u043e\u0432\u044b\u0439 JPEG (\u0440\u0435\u0436\u0438\u043c \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0435 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u043e\u0432) \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442 \u0438 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e: \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. \u041a\u043e\u0433\u0434\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 JPEG \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043f\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c\u0443 \u0438\u043b\u0438 \u043d\u0435\u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u043e\u043c\u0443 \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044e, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0443\u0432\u0438\u0434\u0438\u0442 \u0432\u0435\u0440\u0445\u043d\u044e\u044e \u0447\u0430\u0441\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0420\u0435\u0436\u0438\u043c \u0441\u0436\u0430\u0442\u0438\u044f JPEG \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0431\u0430\u0437\u043e\u0432\u044b\u0439, \u0442\u043e\u043b\u044c\u043a\u043e \u0441 \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u044c\u044e \u0441\u0436\u0430\u0442\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d23\/6db\/cbe\/d236dbcbedb51e84a7ab3531543008f9.jpg\"><br \/>  <i><font color=\"gray\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439 JPEG (baseline JPEG) \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437, \u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u043e\u0433\u043e \u0434\u043e \u0440\u0435\u0437\u043a\u043e\u0433\u043e<\/font><\/i><\/p>\n<p>  \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG \u0434\u0435\u043b\u0438\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0440\u044f\u0434 \u043f\u0440\u043e\u0445\u043e\u0434\u043e\u0432. \u041f\u0435\u0440\u0432\u044b\u0439 \u043f\u0440\u043e\u0445\u043e\u0434 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 \u0440\u0430\u0437\u043c\u044b\u0442\u043e\u043c \u0432\u0438\u0434\u0435 \u0438 \u043d\u0438\u0437\u043a\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435, \u0430 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u044b \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0430\u044e\u0442 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e. \u041a\u0430\u0436\u0434\u044b\u0439 \u043f\u0440\u043e\u0445\u043e\u0434 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432 \u0441\u043e\u0437\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/576\/cd4\/82c\/576cd482ced17692a2dd98fc68cf7eb7.jpg\"><br \/>  <i><font color=\"gray\">\u0411\u0430\u0437\u043e\u0432\u044b\u0439 JPEG \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437. PJPEG \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u044b\u0442\u0443\u044e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u0430 \u043f\u043e\u0442\u043e\u043c \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u041f\u044d\u0442 \u041c\u0438\u043d\u0430\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043b <a href=\"http:\/\/www.patrickmeenan.com\/progressive\/view.php?img=https%3A%2F%2Fwww.nps.gov%2Fplanyourvisit%2Fimages%2FGrandCanyonSunset_960w.jpg\">\u0438\u043d\u0442\u0435\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442<\/a> \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 JPEG<\/font><\/i> <\/p>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f JPEG \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c <a href=\"http:\/\/www.verexif.com\/en\/\">\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u044f EXIF-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432<\/a> \u043e\u0442 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u043a\u0430\u043c\u0435\u0440 \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Huffman_coding\">\u0442\u0430\u0431\u043b\u0438\u0446 \u0425\u0430\u0444\u0444\u043c\u0430\u043d\u0430<\/a> \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0433\u043e \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0422\u0430\u043a\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u043a\u0430\u043a <a href=\"http:\/\/jpegclub.org\/jpegtran\/\">jpegtran<\/a>, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044e\u0442 \u0441\u0436\u0430\u0442\u0438\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c, \u043f\u0435\u0440\u0435\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u044f \u0441\u0436\u0430\u0442\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u0431\u0435\u0437 \u0443\u0445\u0443\u0434\u0448\u0435\u043d\u0438\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. <a href=\"https:\/\/github.com\/kud\/jpegrescan\">jpegrescan<\/a>, <a href=\"https:\/\/github.com\/tjko\/jpegoptim\">jpegoptim<\/a> \u0438 <a href=\"https:\/\/github.com\/mozilla\/mozjpeg\">mozjpeg<\/a> (\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0441\u043a\u043e\u0440\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c) \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0441\u0436\u0430\u0442\u0438\u0435 JPEG \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c.<\/p>\n<p>  <a name=\"06\"><\/a><\/p>\n<h2>\u041f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0445 JPEG<\/h2>\n<p>  \u0421\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0441\u0442\u044c PJPEG \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043f\u0440\u0435\u0432\u044c\u044e \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u2014 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u0447\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0439.<\/p>\n<p>  \u041d\u0430 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0445 3G-\u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f\u0445 \u044d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u0442\u044c \u0444\u0430\u0439\u043b\u0430 \u2014 \u0438 \u043f\u0440\u0438\u043d\u044f\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0434\u043e\u0436\u0438\u0434\u0430\u0442\u044c\u0441\u044f \u0435\u0433\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043b\u0438 \u043d\u0435\u0442. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0443\u0434\u043e\u0431\u043d\u0435\u0435, \u0447\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437, \u043a\u0430\u043a \u0432 \u0431\u0430\u0437\u043e\u0432\u043e\u043c JPEG.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f54\/39b\/acc\/f5439bacc4fb55239d2895ac9817b492.png\"><br \/>  <i><font color=\"gray\">\u0412 2015 \u0433\u043e\u0434\u0443 <a href=\"https:\/\/code.facebook.com\/posts\/857662304298232\/faster-photos-in-facebook-for-ios\/\">Facebook \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 PJPEG (\u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f iOS)<\/a> \u0438 \u0442\u0440\u0430\u0444\u0438\u043a \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0441\u044f \u043d\u0430 10%. \u041e\u043d\u0438 \u0441\u043c\u043e\u0433\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043d\u0430 15% \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0440\u0430\u043d\u044c\u0448\u0435, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0432 \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u0440\u0438\u0441\u0443\u043d\u043a\u0435 \u0432\u044b\u0448\u0435<\/font><\/i><\/p>\n<p>  PJPEG \u043c\u043e\u0436\u0435\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 2\u221210% \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c\/\u043f\u0440\u043e\u0441\u0442\u044b\u043c JPEG \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u043e\u043b\u0435\u0435 10 \u041a\u0411. \u0411\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u0438\u0439 \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442 \u0441\u0436\u0430\u0442\u0438\u044f \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u0440\u043e\u0445\u043e\u0434\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0430\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/Huffman_coding\">\u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0425\u0430\u0444\u0444\u043c\u0430\u043d\u0430<\/a>. \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 JPEG-\u043a\u043e\u0434\u0435\u0440\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"http:\/\/libjpeg-turbo.virtualgl.org\/\">libjpeg-turbo<\/a>, MozJPEG \u0438 \u0434\u0440.) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0433\u0438\u0431\u043a\u043e\u0441\u0442\u044c PJPEG \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0441\u0436\u0430\u0442\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u043f\u043e\u0447\u0435\u043c\u0443 PJPEG \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0435? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0431\u043b\u043e\u043a\u0438 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e JPEG \u043a\u043e\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043f\u043e \u043e\u0434\u043d\u043e\u043c\u0443, \u0430 \u0432 PJPEG \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u044b <a href=\"https:\/\/en.wikipedia.org\/wiki\/Discrete_cosine_transform\">\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u0441\u0438\u043d\u0443\u0441\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/a> \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0431\u043b\u043e\u043a\u043e\u0432 \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u043b\u0443\u0447\u0448\u0435\u043c\u0443 \u0441\u0436\u0430\u0442\u0438\u044e.<\/p><\/blockquote>\n<p>  <a name=\"07\"><\/a><\/p>\n<h2>\u041a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435?<\/h2>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/www.webpagetest.org\/performance_optimization.php?test=170717_NQ_1K9P&amp;run=2#compress_images\">Twitter.com \u0432\u044b\u0434\u0430\u0451\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 JPEG<\/a> \u0441 \u0431\u0430\u0437\u043e\u0432\u044b\u043c \u0443\u0440\u043e\u0432\u043d\u0435\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 85%. \u041e\u043d\u0438 \u0437\u0430\u043c\u0435\u0440\u0438\u043b\u0438 \u0441\u0443\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443, \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u043c\u0443\u044e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c (\u0432\u0440\u0435\u043c\u044f \u0434\u043e \u043f\u0435\u0440\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u0430 \u0438 \u043e\u0431\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438), \u0438 \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e PJPEG \u0432 \u0446\u0435\u043b\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0438\u0441\u0445\u043e\u0434\u044f \u0438\u0437 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u0438, \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f.<\/li>\n<li><a href=\"https:\/\/code.facebook.com\/posts\/857662304298232\/faster-photos-in-facebook-for-ios\/\">Facebook \u0432\u044b\u0434\u0430\u0451\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 JPEG \u0432 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 iOS<\/a>. \u042d\u0442\u043e \u043d\u0430 10% \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u043e \u0442\u0440\u0430\u0444\u0438\u043a \u0438 \u043d\u0430 15% \u0443\u0441\u043a\u043e\u0440\u0438\u043b\u043e \u0432\u044b\u0434\u0430\u0447\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u00ab\u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430\u00bb.<\/li>\n<li><a href=\"https:\/\/engineeringblog.yelp.com\/2017\/06\/making-photos-smaller.html\">Yelp \u043f\u0435\u0440\u0435\u0448\u0451\u043b \u043d\u0430 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG<\/a>. \u042d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u043c\u0435\u0440, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 4,5%. \u041e\u043d\u0430 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u043b\u0441\u044f \u0435\u0449\u0451 \u043d\u0430 13,8% \u0437\u0430 \u0441\u0447\u0451\u0442 MozJPEG.<\/li>\n<\/ul>\n<p>  \u041c\u043d\u043e\u0433\u0438\u0435 \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u0430\u0439\u0442\u044b \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <a href=\"https:\/\/pinterest.com\/\">Pinterest<\/a>, \u0442\u043e\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/106\/3da\/c22\/1063dac226ca94466d408d5eb660ebce.png\"><br \/>  <i><font color=\"gray\">\u041d\u0430 \u0441\u0430\u0439\u0442\u0435 Pinterest \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u043c JPEG. \u0414\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0443\u0434\u043e\u0431\u043d\u0435\u0435, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u0440\u043e\u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e<\/font><\/i><\/p>\n<p>  <a name=\"08\"><\/a><\/p>\n<h2>\u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e JPEG<\/h2>\n<p>  \u0414\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 PJPEG \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u0447\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e JPEG \u2014 \u0438\u043d\u043e\u0433\u0434\u0430 \u0432\u0442\u0440\u043e\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435. \u041d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445 \u043c\u0430\u0448\u0438\u043d\u0430\u0445 \u0441 \u043c\u043e\u0449\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430\u043c\u0438 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u0432\u0430\u0436\u043d\u043e, \u043a\u0430\u043a \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0441 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043d\u044b\u043c\u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u0430\u043c\u0438. \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u043f\u043e\u043b\u043d\u044b\u0445 \u0441\u043b\u043e\u0451\u0432 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u044b, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0432\u044b \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437. \u042d\u0442\u0438 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u044b \u0441\u044a\u0435\u0434\u0430\u044e\u0442 \u0446\u0438\u043a\u043b\u044b CPU.<\/p>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u043c JPEG <i>\u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430<\/i> \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443. \u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0438\u043d\u0438\u0430\u0442\u044e\u0440 \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430) \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440. \u0418 \u0434\u043b\u044f \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0445\u043e\u0434\u043e\u0432 \u0432\u043e\u043e\u0431\u0449\u0435 \u0438\u043c\u0435\u0435\u0442 \u043c\u0430\u043b\u043e \u0441\u043c\u044b\u0441\u043b\u0430.<\/p>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0431\u043e\u0440\u043e\u043c PJPEG \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0430\u0439\u0442\u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u0431\u0430\u043b\u0430\u043d\u0441 \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0444\u0430\u0439\u043b\u0430, \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c CPU.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0435 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 PJPEG (\u0438 \u0432\u0441\u0435\u0445 JPEG). \u042d\u0442\u043e \u043d\u0435 \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438, \u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440. \u041d\u0435 \u0432\u043e \u0432\u0441\u0435\u0445 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430\u0445 Android \u0435\u0441\u0442\u044c \u0430\u043f\u043f\u0430\u0440\u0430\u0442\u043d\u043e\u0435 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u0438\u0435, \u043d\u043e \u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0438 \u0432 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 iOS \u043e\u043d\u043e \u0435\u0441\u0442\u044c.<\/p><\/blockquote>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u043c, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u043c\u0435\u0448\u0430\u0435\u0442 \u043f\u043e\u043d\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0432\u0435\u0440\u0448\u0438\u043b\u0430\u0441\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u0446\u0435\u043d\u0438\u0442\u044c, \u043a\u0430\u043a \u043a \u044d\u0442\u043e\u043c\u0443 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u0432\u0430\u0448\u0430 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u044f.<\/p>\n<p>  <a name=\"09\"><\/a><\/p>\n<h2>\u041a\u0430\u043a \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e JPEG?<\/h2>\n<p>  \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/www.imagemagick.org\/\">ImageMagick<\/a>, <a href=\"http:\/\/libjpeg.sourceforge.net\/\">libjpeg<\/a>, <a href=\"http:\/\/jpegclub.org\/jpegtran\/\">jpegtran<\/a>, <a href=\"https:\/\/github.com\/danielgtaylor\/jpeg-archive\">jpeg-recompress<\/a> \u0438 <a href=\"https:\/\/github.com\/imagemin\/imagemin\">imagemin<\/a> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 JPEG. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0443\u0436\u0435 \u043d\u0430\u043b\u0430\u0436\u0435\u043d \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440 \u043f\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0442\u043e \u0432\u0435\u043b\u0438\u043a\u0430 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c, \u0447\u0442\u043e \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f JPEG \u043d\u0435 \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439:<\/p>\n<pre><code>const gulp = require('gulp'); const imagemin = require('gulp-imagemin');  gulp.task('images', function () {     return gulp.src('images\/*.jpg')         .pipe(imagemin({             progressive: true         }))         .pipe(gulp.dest('dist'));        });<\/code><\/pre>\n<p>  \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 JPEG.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1fe\/8fe\/189\/1fe8fe189888206150a2c92ad28b590f.jpg\"><br \/>  <i><font color=\"gray\">\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442 \u0432 \u0431\u0430\u0437\u043e\u0432\u044b\u0439 JPEG, \u043d\u043e \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u0445. \u0412 Photoshop \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u00ab\u0424\u0430\u0439\u043b\u00bb\u00a0\u2192 \u00ab\u042d\u043a\u0441\u043f\u043e\u0440\u0442\u00bb\u00a0\u2192 \u00ab\u0421\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0434\u043b\u044f \u0432\u0435\u0431\u0430\u00bb, \u0430 \u0442\u0430\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0433\u043e JPEG. Sketch \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 Progressive JPEG \u043f\u0443\u0442\u0451\u043c \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 \u0444\u043b\u0430\u0436\u043a\u0430 \u0432 \u043c\u0435\u043d\u044e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0430 JPG<\/font><\/i><\/p>\n<p>  <a name=\"10\"><\/a><\/p>\n<h2>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/h2>\n<p>  \u041d\u0430\u0448\u0438 \u0433\u043b\u0430\u0437\u0430 \u0445\u0443\u0436\u0435 \u0437\u0430\u043c\u0435\u0447\u0430\u044e\u0442 \u043f\u043e\u0442\u0435\u0440\u044e \u0446\u0432\u0435\u0442\u043d\u043e\u0441\u0442\u0438, \u0447\u0435\u043c \u044f\u0440\u043a\u043e\u0441\u0442\u0438. <a href=\"https:\/\/en.wikipedia.org\/wiki\/Chroma_subsampling\">\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/a> (chroma subsampling) \u2014 \u0432\u0438\u0434 \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u0438, \u0441\u043d\u0438\u0436\u0430\u044e\u0449\u0438\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u0437\u0430 \u0441\u0447\u0451\u0442 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 (luma). \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 <a href=\"https:\/\/calendar.perfplanet.com\/2015\/why-arent-your-images-using-chroma-subsampling\/\">\u0434\u043e 15\u221217%<\/a>, \u043d\u0435 \u0432\u043b\u0438\u044f\u044f \u0437\u0430\u043c\u0435\u0442\u043d\u043e \u043d\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0421\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/41b\/040\/dd9\/41b040dd91221b76f82d9f207646ef4a.jpg\"><\/p>\n<p>  \u041a\u043e\u043d\u0442\u0440\u0430\u0441\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0440\u0435\u0437\u043a\u043e\u0441\u0442\u044c \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 luma \u043e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u0430. \u041d\u0430 \u0447\u0451\u0440\u043d\u043e-\u0431\u0435\u043b\u044b\u0445 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u0445 \u043d\u0435\u0442 \u0446\u0432\u0435\u0442\u0430, \u043d\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u043e\u043d\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0442\u0430\u043a\u0438\u043c\u0438 \u0436\u0435 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438, \u043a\u0430\u043a \u0446\u0432\u0435\u0442\u043d\u044b\u0435 \u0430\u043d\u0430\u043b\u043e\u0433\u0438. \u0426\u0432\u0435\u0442\u043d\u043e\u0441\u0442\u044c \u043c\u0435\u043d\u044c\u0448\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0437\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/1d7\/518\/d2e\/1d7518d2e4020bf3c7b4f58500d2b4e5.jpg\"><br \/>  <i><font color=\"gray\">JPEG \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u043f\u043e\u0434\u0432\u044b\u0431\u043e\u0440\u043a\u0438: \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u043f\u043e\u0434\u0432\u044b\u0431\u043e\u0440\u043a\u0438, \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f, \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f+\u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f. \u0417\u0434\u0435\u0441\u044c \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044f \u0438\u0437 \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/frdx.free.fr\/JPEG_for_the_horseshoe_crabs.pdf\">\u00abJPEG \u0434\u043b\u044f \u043a\u0440\u0430\u0431\u043e\u0432\u00bb<\/a> \u0424\u0440\u0435\u0434\u0435\u0440\u0438\u043a\u0430 \u041a\u0430\u0439\u0437\u0435\u0440\u0430<\/font><\/i><\/p>\n<p>  \u041f\u0440\u0438 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0438 \u043f\u043e\u0434\u0432\u044b\u0431\u043e\u0440\u043a\u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u044f\u0442 \u0440\u044f\u0434 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432: 4:4:4, 4:2:2 \u0438 4:2:0. \u0427\u0442\u043e \u043e\u043d\u0438 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442? \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0447\u0442\u043e \u043f\u043e\u0434\u0432\u044b\u0431\u043e\u0440\u043a\u0430 \u0438\u043c\u0435\u0435\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 A:B:C. \u0417\u0434\u0435\u0441\u044c A \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0441\u0442\u0440\u043e\u043a\u0435, \u0434\u043b\u044f JPEG \u044d\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e 4, B\u00a0\u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0435, \u0430 C\u00a0\u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0446\u0432\u0435\u0442\u043e\u0432 \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u0439.<\/p>\n<ul>\n<li>\u0412 <code>4:4:4<\/code> \u043d\u0435\u0442 \u0441\u0436\u0430\u0442\u0438\u044f, \u0446\u0432\u0435\u0442 \u0438 \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e.<\/li>\n<li>\u0412 <code>4:2:2<\/code> \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u043d\u044b\u0439 \u0441\u044d\u043c\u043f\u043b\u0438\u043d\u0433 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0438 \u0438 \u043f\u043e\u043b\u043d\u044b\u0439 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438.<\/li>\n<li>\u0412 <code>4:2:0<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0446\u0432\u0435\u0442\u0430 \u0438\u0437 \u043f\u043e\u043b\u043e\u0432\u0438\u043d\u044b \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> jpegtran \u0438 cjpeg \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u0443\u044e \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044e \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u0446\u0432\u0435\u0442\u043d\u043e\u0441\u0442\u0438 \u0447\u0435\u0440\u0435\u0437 \u0444\u043b\u0430\u0433 <code>-sample<\/code> (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>-sample 2x1<\/code>). \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430: \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f (<code>-sample 2x2<\/code>) \u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439. \u0415\u0451 \u043b\u0443\u0447\u0448\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u044c (<code>-sample 1x1<\/code>) \u0434\u043b\u044f \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u043e\u0432, \u0431\u0430\u043d\u043d\u0435\u0440\u043e\u0432 \u0438 \u043a\u043d\u043e\u043f\u043e\u043a. \u041d\u0430\u043a\u043e\u043d\u0435\u0446, <code>2x1<\/code> \u043d\u0430 \u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u043d\u0435\u0442 \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u0438, \u043a\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c.<\/p><\/blockquote>\n<p>  \u0423\u043c\u0435\u043d\u044c\u0448\u0438\u0432 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043c\u043e\u0436\u043d\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0432 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0435\u0442\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/6d5\/cbd\/8d3\/6d5cbd8d354285776369025a20c3390c.jpg\"><br \/>  <i><font color=\"gray\">\u0412\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0434\u043b\u044f JPEG \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c 80<\/font><\/i><\/p>\n<p>  \u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0445\u043e\u0442\u044f \u0435\u0441\u0442\u044c \u044f\u0432\u043d\u044b\u0435 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f: \u043b\u0443\u0447\u0448\u0435 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0451 \u0442\u0430\u043c, \u0433\u0434\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u0434\u0435\u0442\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0441\u0442\u043e\u043b\u044c \u0436\u0435 \u0432\u0430\u0436\u043d\u0430, \u043a\u0430\u043a \u044f\u0440\u043a\u043e\u0441\u0442\u044c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043c\u0435\u0434\u0438\u0446\u0438\u043d\u0441\u043a\u0438\u0435 \u0441\u043d\u0438\u043c\u043a\u0438).<\/p>\n<p>  \u041f\u043e\u0441\u0442\u0440\u0430\u0434\u0430\u044e\u0442 \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0427\u0451\u0442\u043a\u0438\u0435 \u043a\u0440\u0430\u044f \u0441\u043b\u043e\u0436\u043d\u0435\u0435 \u0441\u0436\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JPEG, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u0434\u043b\u044f \u043b\u0443\u0447\u0448\u0435\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u0446\u0435\u043d \u0441 \u0431\u043e\u043b\u0435\u0435 \u043c\u044f\u0433\u043a\u0438\u043c\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u043c\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/792\/434\/e28\/792434e286dd698afecc7de662c8ab18.jpg\"><br \/>  <i><font color=\"gray\">\u0412 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u0442\u0435\u043a\u0441\u0442\u043e\u043c \u0443\u0447\u0435\u0431\u043d\u0438\u043a <a href=\"http:\/\/compress-or-die.com\/Understanding-JPG\/\">\u00ab\u0418\u0437\u0443\u0447\u0435\u043d\u0438\u0435 JPEG\u00bb<\/a> \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442 \u043f\u0440\u0438\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 4:4:4 (1\u00d71)<\/font><\/i> <\/p>\n<p>  \u041a\u0441\u0442\u0430\u0442\u0438: \u0432 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f\u0445 JPEG \u043d\u0435 \u0443\u043a\u0430\u0437\u0430\u043d \u0442\u043e\u0447\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u0434\u0435\u0440\u044b\/\u0434\u0435\u043a\u043e\u0434\u0435\u0440\u044b \u043f\u043e\u0441\u0442\u0443\u043f\u0430\u044e\u0442 \u043f\u043e-\u0440\u0430\u0437\u043d\u043e\u043c\u0443. MozJPEG \u0438 libjpeg-turbo \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043e\u0434\u0438\u043d \u043c\u0435\u0442\u043e\u0434, \u0430 \u0431\u043e\u043b\u0435\u0435 \u0441\u0442\u0430\u0440\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 libjpeg \u2014 \u0434\u0440\u0443\u0433\u043e\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u043e\u0432.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> Photoshop \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e \u043f\u0440\u0438 \u00ab\u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0434\u043b\u044f \u0432\u0435\u0431\u0430\u00bb. \u0415\u0441\u043b\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043e \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 51\u2212100, \u0442\u043e \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f (4:4:4). \u041a\u043e\u0433\u0434\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043d\u0438\u0436\u0435, \u0443\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442\u0441\u044f 4:2:0. \u042d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u043f\u0440\u0438\u0447\u0438\u043d, \u043f\u043e\u0447\u0435\u043c\u0443 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u0440\u0435\u0437\u043a\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441 51 \u043d\u0430 50.<\/p><\/blockquote>\n<p>  <\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0432 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0438 \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0447\u0430\u0441\u0442\u043e \u0443\u043f\u043e\u043c\u0438\u043d\u0430\u0435\u0442\u0441\u044f \u0442\u0435\u0440\u043c\u0438\u043d <a href=\"https:\/\/en.wikipedia.org\/wiki\/YCbCr\">YCbCr<\/a>. \u042d\u0442\u043e \u043c\u043e\u0434\u0435\u043b\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 <a href=\"https:\/\/en.wikipedia.org\/wiki\/RGB_color_model\">RGB<\/a> \u0441 \u0433\u0430\u043c\u043c\u0430-\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u0435\u0439. Y \u2014 \u044d\u0442\u043e \u044f\u0440\u043a\u043e\u0441\u0442\u044c \u0441 \u0433\u0430\u043c\u043c\u0430-\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u0435\u0439, Cb \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 chroma \u0441\u0438\u043d\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430, \u0430 Cr\u00a0\u2014 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e. \u0415\u0441\u043b\u0438 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c ExifData, \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435 YCbCr \u0440\u044f\u0434\u043e\u043c \u0441 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u0432\u044b\u0431\u043e\u0440\u043a\u0438.<\/p><\/blockquote>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0441\u043c. \u0432 \u0441\u0442\u0430\u0442\u044c\u0435 <a href=\"https:\/\/calendar.perfplanet.com\/2015\/why-arent-your-images-using-chroma-subsampling\/\">\u00ab\u041f\u043e\u0447\u0435\u043c\u0443 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u0443\u044e \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u044e?\u00bb<\/a><\/p>\n<p>  <a name=\"11\"><\/a><\/p>\n<h2>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u043d\u044b\u0439 JPEG<\/h2>\n<p>  <\/p>\n<h4>\u041a\u0430\u043a\u043e\u0432\u043e \u0442\u0435\u043a\u0443\u0449\u0435\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0441 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u043c\u0438 JPEG \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435?<\/h4>\n<p>  <i>tl;dr: \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f. \u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0442\u043e \u0447\u0430\u0441\u0442\u043e \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b.<\/i> <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/3e2\/26c\/f29\/3e226cf294bca6151e7ab29b3cc8e05d.jpg\"><br \/>  <i><font color=\"gray\">\u0420\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b (\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u044b) \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u044e\u0442 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0436\u0430\u0442\u0438\u044f \u043f\u0440\u0438 \u0446\u0435\u043b\u0435\u0432\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u0430 26\u00a0\u041a\u0411. \u041a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438 <a href=\"https:\/\/en.wikipedia.org\/wiki\/Structural_similarity\">SSIM<\/a> (\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u043e) \u0438 <a href=\"https:\/\/github.com\/google\/butteraugli\">Butteraugli<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435.<\/font><\/i> <\/p>\n<ul>\n<li><b><a href=\"https:\/\/en.wikipedia.org\/wiki\/JPEG_2000\">JPEG 2000<\/a> (2000)<\/b>\u00a0\u2014 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 \u0441\u0436\u0430\u0442\u0438\u044f \u0437\u0430 \u0441\u0447\u0451\u0442 \u0437\u0430\u043c\u0435\u043d\u044b \u0434\u0438\u0441\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u0441\u0438\u043d\u0443\u0441\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430 \u0432\u0435\u0439\u0432\u043b\u0435\u0442\u044b. <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0439 Safari \u0438 iOS<\/b>.<\/li>\n<li><b><a href=\"https:\/\/en.wikipedia.org\/wiki\/JPEG_XR\">JPEG XR<\/a> (2009)<\/b>\u00a0\u2014 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 JPEG \u0438 JPEG 2000, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0430\u044f <a href=\"http:\/\/wikivisually.com\/wiki\/High_dynamic_range_imaging\">HDR<\/a> \u0438 \u0448\u0438\u0440\u043e\u043a\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 <a href=\"http:\/\/wikivisually.com\/wiki\/Gamut\">\u0433\u0430\u043c\u043c\u044b<\/a>. \u0421\u043e\u0437\u0434\u0430\u0451\u0442 \u0444\u0430\u0439\u043b\u044b \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u0447\u0435\u043c JPEG, \u0441\u043e \u0441\u043b\u0435\u0433\u043a\u0430 \u0441 \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f\/\u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: Edge, IE<\/b>.<\/li>\n<li><b><a href=\"https:\/\/en.wikipedia.org\/wiki\/WebP\">WebP<\/a> (2010)<\/b>\u00a0\u2014 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0431\u043b\u043e\u043a\u043e\u0432 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0442 Google \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u0436\u0430\u0442\u0438\u0435 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u0438 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c. \u041e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0435\u0435 \u0441\u0436\u0430\u0442\u0438\u0435, \u0447\u0435\u043c JPEG, \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c, \u043a\u0430\u043a PNG. \u041d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0441\u0443\u0431\u0434\u0438\u0441\u043a\u0440\u0435\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0438\u0436\u0435, \u0447\u0435\u043c \u0443 JPEG. <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: Chrome, Opera. \u042d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 Safari \u0438 Firefox<\/b>.<\/li>\n<li><b><a href=\"https:\/\/en.wikipedia.org\/wiki\/Free_Lossless_Image_Format\">FLIF<\/a> (2015)<\/b>\u00a0\u2014 \u0444\u043e\u0440\u043c\u0430\u0442 \u0441\u0436\u0430\u0442\u0438\u044f \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c, \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u044f\u0449\u0438\u0439 PNG, WebP \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c, BPG \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u0438 JPEG 2000 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u043f\u043e \u043a\u043e\u044d\u0444\u0444\u0438\u0446\u0438\u0435\u043d\u0442\u0443 \u0441\u0436\u0430\u0442\u0438\u044f. <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: \u043d\u0435\u0442, \u043d\u043e \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/UprootLabs\/poly-flif\">JS-\u0434\u0435\u043a\u043e\u0434\u0435\u0440<\/a><\/b>.<\/li>\n<li><b>HEIF \u0438 BPG<\/b>. \u0421 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0441\u0436\u0430\u0442\u0438\u044f \u043e\u043d\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b, \u043d\u043e \u043f\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u043e\u0431\u0451\u0440\u0442\u043a\u0430\u0445:<\/li>\n<li><b><a href=\"https:\/\/en.wikipedia.org\/wiki\/Better_Portable_Graphics\">BPG<\/a> (2015)<\/b>\u00a0\u2014 \u0437\u0430\u043c\u0435\u043d\u0430 JPEG \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 HEVC (<a href=\"http:\/\/wikivisually.com\/wiki\/High_Efficiency_Video_Coding\">High Efficiency Video Coding<\/a>). \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 MozJPEG \u0438 WebP. \u0412\u0440\u044f\u0434 \u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0448\u0438\u0440\u043e\u043a\u0443\u044e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0438\u0437-\u0437\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441 \u043b\u0438\u0446\u0435\u043d\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: \u043d\u0435\u0442, \u043d\u043e \u0435\u0441\u0442\u044c <a href=\"https:\/\/bellard.org\/bpg\/\">JS-\u0434\u0435\u043a\u043e\u0434\u0435\u0440<\/a><\/b>.<\/li>\n<li><b><a href=\"https:\/\/en.wikipedia.org\/wiki\/High_Efficiency_Image_File_Format\">HEIF<\/a> (2015)<\/b>\u00a0\u2014 \u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0435\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0437\u0430\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 HEVC \u0441 \u043c\u0435\u0436\u043a\u0430\u0434\u0440\u043e\u0432\u044b\u043c \u043f\u0440\u0435\u0434\u0441\u043a\u0430\u0437\u0430\u043d\u0438\u0435\u043c. Apple \u0430\u043d\u043e\u043d\u0441\u0438\u0440\u043e\u0432\u0430\u043b\u0430 \u043d\u0430 <a href=\"https:\/\/www.cnet.com\/news\/apple-ios-boosts-heif-photos-over-jpeg-wwdc\/\">WWDC<\/a>, \u0447\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0438\u0437\u0443\u0447\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434 c JPEG \u043d\u0430 HEIF \u0432 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u043e\u043d\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 iOS, \u0447\u0442\u043e \u0434\u0430\u0441\u0442 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0434\u043e \u0434\u0432\u0443\u0445 \u0440\u0430\u0437. <b>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445: \u043d\u0435\u0442 \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u0442\u044c\u0438. \u0414\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u043c Safari \u0438 iOS 11<\/b>.<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0440\u0430\u0432\u0438\u0442\u0441\u044f \u0432\u043e\u0441\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u0432 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0432\u0438\u0434\u0435, \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0446\u0435\u043d\u0438\u0442\u044c <a href=\"https:\/\/people.xiph.org\/~xiphmont\/demo\/daala\/update1-tool2b.shtml\">\u043e\u0434\u0438\u043d<\/a> \u0438\u0437 <a href=\"http:\/\/xooyoozoo.github.io\/yolo-octo-bugfixes\/#cologne-cathedral&amp;jpg=s&amp;webp=s\">\u044d\u0442\u0438\u0445<\/a> \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0437 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432.<\/p>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, <b>\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f<\/b>. \u0427\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u043e\u0439 \u0438\u0437 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u043f\u0438\u0438 \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u0438\u0437 \u0446\u0435\u043b\u0435\u0432\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u041c\u044b \u0432 Google \u0432\u0438\u0434\u0438\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432\u044b WebP, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u0441\u043a\u043e\u0440\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0451\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n<p>  \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, WebP, JPEG 2000) \u0441 \u043e\u0434\u043d\u0438\u043c \u0438 \u0442\u0435\u043c \u0436\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435\u043c .jpg (\u0438\u043b\u0438 \u043b\u044e\u0431\u044b\u043c \u0434\u0440\u0443\u0433\u0438\u043c) \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0431\u0440\u0430\u0442\u044c content-type \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 <a href=\"https:\/\/www.igvita.com\/2012\/12\/18\/deploying-new-image-formats-on-the-web\/\">\u0443\u043a\u0430\u0437\u0430\u0442\u044c content-type<\/a> \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u043c\u0435\u043d\u044f\u044f HTML-\u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442. \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u0432\u0440\u043e\u0434\u0435 Instart Logic \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434.<\/p>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f\u0445, \u043a\u043e\u0433\u0434\u0430 \u043d\u0435\u043b\u044c\u0437\u044f \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445: \u0437\u0434\u0435\u0441\u044c \u043f\u043e\u043c\u043e\u0433\u0443\u0442 <b>JPEG-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u044b<\/b>.<\/p>\n<p>  <a name=\"12\"><\/a><\/p>\n<h2>JPEG-\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u044b<\/h2>\n<p>  \u0421\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u0434\u0435\u043a\u0438 JPEG \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 JPEG, \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u041e\u043d\u0438 \u0438\u0437\u0431\u0430\u0432\u043b\u044f\u044e\u0442 \u043e\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u0414\u0432\u0430 \u0442\u0430\u043a\u0438\u0445 \u044d\u043d\u043a\u043e\u0434\u0435\u0440\u0430 \u2014 MozJPEG \u0438 Guetzli.<\/p>\n<p>  <b>tl;dr: \u041a\u0430\u043a\u043e\u0439 JPEG-\u043a\u043e\u0434\u0435\u043a \u0441 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c?<\/b> <\/p>\n<ul>\n<li>\u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0444\u0430\u0439\u043b\u043e\u0432: MozJPEG<\/li>\n<li>\u0415\u0441\u043b\u0438 \u0432\u0430\u0436\u043d\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438 \u0432\u044b \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u044b \u043d\u0430 \u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435: Guetzli<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u0430 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u0443\u0435\u043c\u043e\u0441\u0442\u044c:<\/li>\n<\/ul>\n<p>  <a name=\"13\"><\/a><\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 MozJPEG?<\/h2>\n<p>  Mozilla \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u043c\u043e\u0434\u0435\u0440\u043d\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 JPEG-\u043a\u043e\u0434\u0435\u0440 \u2014 <a href=\"https:\/\/github.com\/mozilla\/mozjpeg\">MozJPEG<\/a>. \u041f\u043e <a href=\"https:\/\/research.mozilla.org\/2014\/03\/05\/introducing-the-mozjpeg-project\/\">\u0437\u0430\u044f\u0432\u043b\u0435\u043d\u0438\u044e<\/a> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432, \u043e\u043d \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 JPEG \u0434\u043e 10%. \u0424\u0430\u0439\u043b\u044b, \u0441\u0436\u0430\u0442\u044b\u0435 MozJPEG, \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u043e \u0432\u0441\u0435\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0430 \u0441\u0440\u0435\u0434\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u2014 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0441\u043a\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Trellis_quantization\">\u0442\u0440\u0435\u043b\u043b\u0438\u0441-\u043a\u0432\u0430\u043d\u0442\u043e\u0432\u0430\u043d\u0438\u0435<\/a> (\u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u0434\u0435\u0442\u0430\u043b\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0445\u0443\u0436\u0435 \u0432\u0441\u0435\u0433\u043e \u0441\u0436\u0438\u043c\u0430\u044e\u0442\u0441\u044f) \u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 <a href=\"https:\/\/calendar.perfplanet.com\/2014\/mozjpeg-3-0\/\">\u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0442\u0430\u0431\u043b\u0438\u0446 \u043a\u0432\u0430\u043d\u0442\u043e\u0432\u0430\u043d\u0438\u044f<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0433\u043b\u0430\u0434\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f High-DPI (\u0445\u043e\u0442\u044f \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0441 ImageMagick, \u0435\u0441\u043b\u0438 \u0432\u044b \u0433\u043e\u0442\u043e\u0432\u044b \u043f\u0440\u043e\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0447\u0435\u0440\u0435\u0437 \u0434\u0435\u0431\u0440\u0438 XML-\u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438).<\/p>\n<p>  MozJPEG \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 <a href=\"https:\/\/github.com\/ImageOptim\/ImageOptim\/issues\/45\">ImageOptim<\/a> \u0438 \u0434\u043b\u044f \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0434\u0451\u0436\u043d\u044b\u0439 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u0439 <a href=\"https:\/\/github.com\/imagemin\/imagemin-mozjpeg\">\u043f\u043b\u0430\u0433\u0438\u043d imagemin<\/a>. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Gulp:<\/p>\n<pre><code>const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const imageminMozjpeg = require('imagemin-mozjpeg');  gulp.task('mozjpeg', () =&gt;     gulp.src('src\/*.jpg')     .pipe(imagemin([imageminMozjpeg({         quality: 85     })]))     .pipe(gulp.dest('dist')) );<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/4f4\/7fe\/93a\/4f47fe93a97da4bb6e0d1fb491f99d32.jpg\"><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c90\/265\/8a2\/c902658a2ad04db50cf3a5e76d8cffb5.jpg\"><br \/>  <i><font color=\"gray\">MozJPEG: \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043e\u0446\u0435\u043d\u043e\u043a \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430 \u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435<\/font><\/i> <\/p>\n<p>  \u0414\u043b\u044f \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u043e\u0446\u0435\u043d\u043e\u043a SSIM (\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c) \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b <a href=\"https:\/\/github.com\/imagemin\/imagemin-jpeg-recompress\">jpeg-compress<\/a> \u0438\u0437 \u043f\u0440\u043e\u0435\u043a\u0442\u0430 <a href=\"https:\/\/github.com\/danielgtaylor\/jpeg-archive\">jpeg-archive<\/a>.<\/p>\n<p>  \u041f\u043e \u043c\u043e\u0435\u043c\u0443 \u043e\u043f\u044b\u0442\u0443, MozJPEG \u2014 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441\u0436\u0430\u0442\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0440\u0438 \u043e\u0434\u043d\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430. \u0414\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043c\u0430\u043b\u043e\u0433\u043e \u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 MozJPEG (\u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c 80\u221285) \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u043d\u0430 30\u221240% \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e\u0433\u043e SSIM \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435\u043c \u043d\u0430 5\u22126% \u043f\u043e jpeg-turbo. \u041e\u043d \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442 <a href=\"http:\/\/www.libjpeg-turbo.org\/About\/Mozjpeg\">\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e JPEG<\/a>, \u043d\u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043d\u0435 \u043a\u0440\u0438\u0442\u0438\u0447\u043d\u0430.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0449\u0438\u0439 MozJPEG \u0441 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0435\u0439 \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u043c\u0438 \u0443\u0442\u0438\u043b\u0438\u0442\u0430\u043c\u0438 \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435 \u043d\u0430 <a href=\"https:\/\/github.com\/danielgtaylor\/jpeg-archive\">jpeg-recompress<\/a>. \u0410\u0432\u0442\u043e\u0440 \u043a\u043d\u0438\u0433\u0438 \u00ab\u0412\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0438\u00bb \u0414\u0436\u0435\u0440\u0435\u043c\u0438 \u0412\u0430\u0433\u043d\u0435\u0440 \u0441 \u0443\u0441\u043f\u0435\u0445\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0443 \u0432 <a href=\"https:\/\/twitter.com\/malchata\/status\/884836650563579904\">\u0442\u0430\u043a\u043e\u0439<\/a> \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438.<\/p><\/blockquote>\n<p>  <a name=\"14\"><\/a><\/p>\n<h2>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 Guetzli?<\/h2>\n<p>  <a href=\"https:\/\/github.com\/google\/guetzli\">Guetzli<\/a> \u2014 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0435\u0449\u0430\u044e\u0449\u0438\u0439, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0439, \u043f\u0435\u0440\u0446\u0435\u043f\u0442\u0438\u0432\u043d\u044b\u0439 JPEG-\u043a\u043e\u0434\u0435\u043a \u043e\u0442 Google. \u041e\u043d \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043d\u0430\u0439\u0442\u0438 \u0441\u0430\u043c\u044b\u0439 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 JPEG, \u043f\u0435\u0440\u0446\u0435\u043f\u0442\u0438\u0432\u043d\u043e \u043d\u0435\u043e\u0442\u043b\u0438\u0447\u0438\u043c\u044b\u0439 \u043e\u0442 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u0430. \u041a\u043e\u0434\u0435\u043a \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0440\u044f\u0434 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u043e\u0432, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f, \u0438 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u0441\u0438\u0445\u043e\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0448\u0438\u0431\u043a\u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0433\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043d\u0430\u0438\u0432\u044b\u0441\u0448\u0435\u0439 \u043e\u0446\u0435\u043d\u043a\u043e\u0439.<\/p>\n<p>  \u0414\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 Guetzli \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 <a href=\"https:\/\/github.com\/google\/butteraugli\">Butteraugli<\/a> \u2014 \u043c\u043e\u0434\u0435\u043b\u044c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f (\u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u043d\u0438\u0436\u0435). Guetzli \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0437\u0440\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0441\u0447\u0451\u0442 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u0434\u0435\u043a\u0430\u043c\u0438 JPEG. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0432\u0438\u0434\u0438\u043c\u043e\u0433\u043e \u0437\u0435\u043b\u0451\u043d\u043e\u0433\u043e \u0441\u0432\u0435\u0442\u0430 \u0438 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u044e \u043a \u0441\u0438\u043d\u0435\u043c\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0438\u043d\u0435\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u043e\u043a\u043e\u043b\u043e \u0437\u0435\u043b\u0451\u043d\u043e\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u043d\u0435\u0435 \u0442\u043e\u0447\u043d\u043e.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0420\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 <b>\u043d\u0430\u043c\u043d\u043e\u0433\u043e<\/b> \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 <b>\u0443\u0440\u043e\u0432\u043d\u044f \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/b>, \u0447\u0435\u043c \u043e\u0442 \u0432\u044b\u0431\u043e\u0440\u0430 \u043a\u043e\u0434\u0435\u043a\u0430. \u041c\u0435\u0436\u0434\u0443 \u043d\u0438\u0437\u043a\u0438\u043c \u0438 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 JPEG \u043d\u0430\u043c\u043d\u043e\u0433\u043e, \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u00f3\u043b\u044c\u0448\u0430\u044f \u0440\u0430\u0437\u043d\u0438\u0446\u0430, \u0447\u0435\u043c \u043f\u0440\u0438 \u0441\u043c\u0435\u043d\u0435 \u043a\u043e\u0434\u0435\u043a\u0430. \u041e\u0447\u0435\u043d\u044c \u0432\u0430\u0436\u043d\u043e \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u041e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0431\u0440\u0430\u0449\u0430\u0439\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u044d\u0442\u043e\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u044c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d \u043d\u0435 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0432\u044b\u0441\u043e\u043a\u0438\u043c.<\/p><\/blockquote>\n<p>  Guetzli <a href=\"https:\/\/research.googleblog.com\/2017\/03\/announcing-guetzli-new-open-source-jpeg.html\">\u0437\u0430\u044f\u0432\u043b\u044f\u0435\u0442<\/a> \u043e \u0440\u0430\u0437\u043d\u0438\u0446\u0435 \u0432 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 20\u221230% \u0431\u0435\u0437 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043e\u0446\u0435\u043d\u043a\u0438 Butteraugli \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u043e\u0440\u0430\u043c\u0438. \u0411\u043e\u043b\u044c\u0448\u043e\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a Guetzli \u0432 \u0435\u0433\u043e \u0447\u0440\u0435\u0437\u0432\u044b\u0447\u0430\u0439\u043d\u043e\u0439 \u043c\u0435\u0434\u043b\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043e\u043d \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. \u0412 README \u0443\u043a\u0430\u0437\u0430\u043d \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043e\u0431\u044a\u0451\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0435\u043c\u043e\u0439 \u043f\u0430\u043c\u044f\u0442\u0438: \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u043a\u043e\u043b\u043e 1 \u043c\u0438\u043d\u0443\u0442\u044b \u0438 200\u00a0\u041c\u0411 RAM \u043d\u0430 \u043c\u0435\u0433\u0430\u043f\u0438\u043a\u0441\u0435\u043b\u044c. \u041d\u0430 GitHub \u0435\u0441\u0442\u044c <a href=\"https:\/\/github.com\/google\/guetzli\/issues\/50\">\u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0442\u0440\u0435\u0434<\/a> \u0441 \u043e\u0431\u0441\u0443\u0436\u0434\u0435\u043d\u0438\u0435\u043c \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 Guetzli. \u041a\u043e\u0434\u0435\u043a \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u043d\u043e \u0432 \u043c\u0435\u043d\u044c\u0448\u0435\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u043f\u0440\u0438\u0433\u043e\u0434\u0435\u043d \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u043f\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044e.<\/p>\n<p>  \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435 ImageOptim \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e Guetzli (\u0432 <a href=\"https:\/\/imageoptim.com\/\">\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445<\/a>).<\/p>\n<pre><code>const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); const imageminGuetzli = require('imagemin-guetzli');  gulp.task('guetzli', () =&gt;     gulp.src('src\/*.jpg')     .pipe(imagemin([         imageminGuetzli({             quality: 85         })     ]))     .pipe(gulp.dest('dist'))  );<\/code><\/pre>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/734\/9a0\/698\/7349a069854fef62982512c8e3a08f1a.jpg\"><\/p>\n<p>  \u041a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 Guetzli \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 3000\u00d73000 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0443\u0440\u043e\u0432\u043d\u044f\u043c\u0438 \u0437\u0430\u043d\u044f\u043b\u043e \u043f\u043e\u0447\u0442\u0438 \u0441\u0435\u043c\u044c \u043c\u0438\u043d\u0443\u0442. \u042d\u0442\u043e \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0434\u043b\u044f \u0430\u0440\u0445\u0438\u0432\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439 \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/b2b\/6a4\/1a8\/b2b6a41a8799620ebc175fb9c63c1bb0.jpg\"><br \/>  <i><font color=\"gray\">Guetzli: \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043e\u0446\u0435\u043d\u043a\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430 \u043d\u0430 \u0440\u0430\u0437\u043d\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435<\/font><\/i> <\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0442\u044c Guetzli \u043d\u0430 \u0432\u044b\u0441\u043e\u043a\u043e\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043d\u0435\u0441\u0436\u0430\u0442\u044b\u0445 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445, PNG \u0438\u043b\u0438 JPEG \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043e\u043a\u043e\u043b\u043e 100%). \u0425\u043e\u0442\u044f \u044d\u0444\u0444\u0435\u043a\u0442 \u0435\u0441\u0442\u044c \u0438 \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, JPEG \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 84 \u0438\u043b\u0438 \u043d\u0438\u0436\u0435), \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0445\u0443\u0436\u0435.<\/p><\/blockquote>\n<p>  Guetzli \u0442\u0440\u0430\u0442\u0438\u0442 \u043e\u0447\u0435\u043d\u044c (\u043e\u0447\u0435\u043d\u044c) \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442 \u043f\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u0440\u0430\u0441\u043a\u0440\u0443\u0442\u0438\u0442\u044c\u0441\u044f \u043a\u0443\u043b\u0435\u0440 CPU, \u043d\u043e \u043e\u043d\u043e \u0442\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442. \u042f \u0432\u0438\u0434\u0435\u043b \u0440\u044f\u0434 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u0432, \u043a\u043e\u0433\u0434\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u043e\u0432 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u043b\u0441\u044f \u043d\u0430 40% \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0435\u0433\u043e \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u044b\u0431\u043e\u0440\u043e\u043c \u0434\u043b\u044f \u0430\u0440\u0445\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439. \u041d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u043c\u0430\u043b\u043e\u0433\u043e \u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0442\u043e\u0436\u0435 \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f (\u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 10\u221215\u00a0\u041a\u0411), \u043d\u043e \u043d\u0435 \u043d\u0430\u0441\u0442\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f. \u041f\u0440\u0438 \u0441\u0436\u0430\u0442\u0438\u0438 \u0441\u043e\u0432\u0441\u0435\u043c \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 Guetzli \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u043d\u0435\u0441\u0442\u0438 \u00ab\u0436\u0438\u0434\u043a\u043e\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435\u00bb \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u0438\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043e\u0432\u0430\u0442\u044c <a href=\"https:\/\/cloudinary.com\/blog\/a_closer_look_at_guetzli\">\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435<\/a> Guetzli \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0441\u0436\u0430\u0442\u0438\u0435\u043c Cloudinary \u0432 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0438 \u042d\u0440\u0438\u043a\u0430 \u041f\u043e\u0440\u0442\u0438\u0441\u0430.<\/p>\n<p>  <a name=\"15\"><\/a><\/p>\n<h2>\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 MozJPEG \u0438 Guetzli<\/h2>\n<p>  \u0421\u043b\u043e\u0436\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u043a\u043e\u0434\u0435\u043a\u0438 JPEG: \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e, \u0438 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0441\u0436\u0430\u0442\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437\u043c\u0435\u0440. \u041a\u0430\u043a \u043e\u0442\u043c\u0435\u0447\u0430\u0435\u0442 \u044d\u043a\u0441\u043f\u0435\u0440\u0442 \u043f\u043e \u0441\u0436\u0430\u0442\u0438\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u041a\u043e\u0440\u043d\u0435\u043b\u044c \u041b\u0435\u0441\u0438\u043d\u0441\u043a\u0438, \u0431\u0435\u043d\u0447\u043c\u0430\u0440\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u043d\u043e\u0433\u043e, \u0430 \u043d\u0435 \u043e\u0431\u043e\u0438\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432, \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a <a href=\"https:\/\/kornel.ski\/faircomparison\">\u043d\u0435\u0432\u0435\u0440\u043d\u044b\u043c<\/a> \u0432\u044b\u0432\u043e\u0434\u0430\u043c.<\/p>\n<p>  \u041a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 Guetzli \u0438 MozJPEG \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438? \u041f\u043e\u0434\u0445\u043e\u0434 \u041a\u043e\u0440\u043d\u0435\u043b\u044f:<\/p>\n<ul>\n<li>Guetzli \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 (\u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0446\u0435\u043d\u043a\u0430 butteraugli \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0434\u043b\u044f q=90+, \u0430 \u0443 MozJPEG \u2014 \u043e\u043a\u043e\u043b\u043e q=75)<\/li>\n<li>Guetzli \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 (\u043e\u0431\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u044f\u0442 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 JPEG, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0431\u044b\u0441\u0442\u0440\u043e\u0435, \u043a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e)<\/li>\n<li>MozJPEG \u043d\u0435 \u0432\u044b\u0431\u0438\u0440\u0430\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, \u043d\u043e \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/github.com\/danielgtaylor\/jpeg-archive\">jpeg-archive<\/a><\/li>\n<\/ul>\n<p>  \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u0440\u044f\u0434 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0438\u043b\u0438 \u043f\u0435\u0440\u0446\u0435\u043f\u0442\u0438\u0432\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430 \u0441\u0436\u0430\u0442\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u043c. \u0412 \u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u044f\u0445 \u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/en.wikipedia.org\/wiki\/Structural_similarity\">SSIM<\/a> (\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u043e\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u043e). \u041e\u0434\u043d\u0430\u043a\u043e Guetzli \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d \u0434\u043b\u044f Butteraugli.<\/p>\n<p>  <a name=\"16\"><\/a><\/p>\n<h2>Butteraugli<\/h2>\n<p>  \u0421\u0438\u0441\u0442\u0435\u043c\u0430 Butteraugli \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u0447\u0435\u043b\u043e\u0432\u0435\u043a \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0443 (\u043f\u0441\u0438\u0445\u043e\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u043e) \u043c\u0435\u0436\u0434\u0443 \u0434\u0432\u0443\u043c\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. Butteraugli \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u0430\u0451\u0442 \u043e\u0446\u0435\u043d\u043a\u0443, \u043d\u043e \u0438 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u0443\u044e \u043a\u0430\u0440\u0442\u0443 \u0443\u0440\u043e\u0432\u043d\u044f \u0440\u0430\u0437\u043b\u0438\u0447\u0438\u0439. \u0412 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a SSIM \u0441\u0443\u043c\u043c\u0438\u0440\u0443\u0435\u0442 \u0432\u0441\u0435 \u043e\u0448\u0438\u0431\u043a\u0438, Butteraugli \u0438\u0449\u0435\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/798\/5b0\/df8\/7985b0df81227135fd3b432abf490a1b.jpg\"><br \/>  <i><font color=\"gray\">\u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 Butteraugli \u0438\u0449\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u043e\u0440\u043e\u0433 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 JPEG, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0439 \u0440\u0430\u0437\u043d\u0438\u0446\u044b \u043c\u0435\u0436\u0434\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 65%<\/font><\/i> <\/p>\n<p>  \u041d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0432\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442\u0435 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0433\u043b\u044f\u0434\u044f \u043d\u0430 \u043e\u0446\u0435\u043d\u043a\u0438 Butteraugli, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u043c\u0443 \u0431\u0430\u043b\u0430\u043d\u0441\u0443 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430 \u0438 \u0443\u0440\u043e\u0432\u043d\u044f \u0441\u0436\u0430\u0442\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/bf8\/9e1\/b18\/bf89e1b182b3c5e8b89ffab674e1488d.jpg\"><br \/>  <i><font color=\"gray\">\u041c\u043d\u0435 \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043e\u043a\u043e\u043b\u043e 30 \u043c\u0438\u043d\u0443\u0442 \u0434\u043b\u044f \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 Butteraugli \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 Bazel \u0438 \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 C++ \u0434\u043b\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 \u043d\u0430 Mac. \u0415\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0435: \u0443\u043a\u0430\u0436\u0438\u0442\u0435 \u0434\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f (\u0438\u0441\u0445\u043e\u0434\u043d\u0430\u044f \u0438 \u0441\u0436\u0430\u0442\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f) \u2014 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043e\u0446\u0435\u043d\u043a\u0443<\/font><\/i> <\/p>\n<h4>\u0427\u0435\u043c Butteraugli \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043e\u0446\u0435\u043d\u043a\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430?<\/h4>\n<p>  \u041e\u0434\u0438\u043d \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 Guetzli <a href=\"https:\/\/github.com\/google\/guetzli\/issues\/10#issuecomment-276295265\">\u0433\u043e\u0432\u043e\u0440\u0438\u0442<\/a>, \u0447\u0442\u043e Guetzli \u043b\u0443\u0447\u0448\u0435 \u043f\u043e \u043e\u0446\u0435\u043d\u043a\u0435 Butteraugli, \u0445\u0443\u0436\u0435 \u043f\u043e SSIM, \u0430 MozJPEG \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0445\u043e\u0440\u043e\u0448 \u043f\u043e \u043e\u0431\u0435\u0438\u043c \u043c\u0435\u0442\u0440\u0438\u043a\u0430\u043c. \u042d\u0442\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044e \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u042f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e Butteraugli \u0438 \u043c\u043e\u0434\u0443\u043b\u044c Node \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/www.npmjs.com\/package\/img-ssim\">img-ssim<\/a> \u0434\u043b\u044f \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043e\u0446\u0435\u043d\u043e\u043a SSIM \u0434\u043e\/\u043f\u043e\u0441\u043b\u0435 Guetzli \u0438 MozJPEG.<\/p>\n<h4>\u041e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 \u044d\u043d\u043a\u043e\u0434\u0435\u0440\u043e\u0432?<\/h4>\n<p>  \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 Guetzli \u0438 MozJPEG <b>\u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c<\/b> (jpegtran, \u0430 \u043d\u0435 cjpeg, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443, \u043f\u0440\u043e\u0434\u0435\u043b\u0430\u043d\u043d\u0443\u044e Guetzli) \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 10\u221215% (55% \u0432 \u0446\u0435\u043b\u043e\u043c) \u0441 \u0432\u0435\u0441\u044c\u043c\u0430 \u043d\u0435\u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u043e\u0446\u0435\u043d\u043a\u0438 SSIM. \u042d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0430, \u043d\u043e \u0434\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u044b \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/ariya.io\/2017\/03\/squeezing-jpeg-images-with-guetzli\">\u0410\u0440\u0438\u0438 \u0425\u0438\u0434\u0430\u044f\u0442\u0430<\/a> \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u043b\u0438 \u2014 \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043c\u043d\u043e\u0433\u043e\u043e\u0431\u0435\u0449\u0430\u044e\u0449\u0438\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>  MozJPEG \u2014 \u0443\u0434\u043e\u0431\u043d\u044b\u0439 \u043a\u043e\u0434\u0435\u043a \u0434\u043b\u044f \u043d\u043e\u0432\u0438\u0447\u043a\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b \u0434\u043b\u044f \u0432\u0435\u0431\u0430 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412 \u0442\u043e \u0436\u0435 \u0432\u0440\u0435\u043c\u044f Guetzli \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043e\u043a \u0438 \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445, \u0432\u044b\u0441\u043e\u043a\u043e\u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445: \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u044f \u0431\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u043c \u0438 \u043f\u0440\u043e\u0444\u0435\u0441\u0441\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c.<\/p>\n<p>  <a name=\"17\"><\/a><\/p>\n<h1>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 WebP?<\/h1>\n<p>  WebP \u2014 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043e\u0442 Google, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u0442\u0440\u0435\u043c\u0438\u0442\u0441\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0444\u0430\u0439\u043b\u043e\u0432 \u043f\u0440\u0438 \u0441\u0436\u0430\u0442\u0438\u0438 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u0438 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438, \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u044f \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e\u0435 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b (\u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c) \u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e.<\/p>\n<p>  WebP \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u0441\u0442\u0432\u0443\u0435\u0442\u0441\u044f: \u0437\u0430 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0433\u043e\u0434 \u043e\u043d \u043f\u0440\u0438\u0431\u0430\u0432\u0438\u043b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u0436\u0430\u0442\u0438\u0438 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u0438 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438, \u043f\u043e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0430\u043b \u0432\u0434\u0432\u043e\u0435 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0430 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u043b\u0430\u0441\u044c \u043d\u0430 10%. WebP \u2014 \u043d\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043d\u043e \u0435\u0433\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0441\u0442\u0451\u0442. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043f\u043e\u0447\u0435\u043c\u0443.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/f9a\/25d\/5ca\/f9a25d5cafa3418ab89008985e8784d4.jpg\"><br \/>  <i><font color=\"gray\">WebP: \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0444\u0430\u0439\u043b\u043e\u0432 \u0438 \u043e\u0446\u0435\u043d\u043a\u0438 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430 \u043d\u0430 \u0440\u0430\u0437\u043d\u044b\u0445 \u0443\u0440\u043e\u0432\u043d\u044f\u0445 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430<\/font><\/i> <\/p>\n<p>  <a name=\"18\"><\/a><\/p>\n<h2>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 WebP?<\/h2>\n<p>  <\/p>\n<h4>C\u0436\u0430\u0442\u0438\u0435 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438<\/h4>\n<p>  \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0433\u043e\u0432\u043e\u0440\u044f\u0442, \u0447\u0442\u043e \u043f\u0440\u0438 \u0441\u0436\u0430\u0442\u0438\u0438 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u043a\u043e\u0434\u0435\u043a\u0430 VP8 \u0438\u043b\u0438 VP9 \u0444\u0430\u0439\u043b\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044e\u0442\u0441\u044f \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u043d\u0430 <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_study\">25\u221234%<\/a> \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 JPEG.<\/p>\n<p>  \u0412 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 (0\u221250) \u0443 WebP \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e \u043f\u0435\u0440\u0435\u0434 JPEG, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043e\u043d \u0440\u0430\u0437\u043c\u044b\u0432\u0430\u0435\u0442 \u0443\u0440\u043e\u0434\u043b\u0438\u0432\u044b\u0435 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u0431\u043b\u043e\u0447\u043d\u043e\u0441\u0442\u0438. \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 (-m 4 -q 75) \u2014 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044b\u0439 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0431\u0430\u043b\u0430\u043d\u0441 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u0430. \u0412 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 (80\u221299) \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 WebP \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b. WebP \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u0430\u0436\u043d\u0435\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<h4>\u0421\u0436\u0430\u0442\u0438\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c<\/h4>\n<p>  <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_lossless_alpha_study\">\u0424\u0430\u0439\u043b\u044b WebP \u0441\u043e \u0441\u0436\u0430\u0442\u0438\u0435\u043c \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u043d\u0430 26% \u043c\u0435\u043d\u044c\u0448\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 PNG<\/a>. \u0412\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 PNG \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442\u0441\u044f \u043d\u0430 3%. \u041e\u0434\u043d\u0430\u043a\u043e \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0441\u0436\u0430\u0442\u0438\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f. \u0422\u0430\u043a\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043b\u0443\u0447\u0448\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0451\u0442 \u0434\u043b\u044f \u0430\u0440\u0445\u0438\u0432\u043d\u043e\u0433\u043e \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h4>\u041f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c<\/h4>\n<p>  \u0423 WebP \u0435\u0441\u0442\u044c 8-\u0431\u0438\u0442\u043d\u044b\u0439 \u043a\u0430\u043d\u0430\u043b \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438 \u0441\u043e \u0441\u0436\u0430\u0442\u0438\u0435\u043c \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u0432\u0441\u0435\u0433\u043e \u043d\u0430 22% \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e \u0431\u0430\u0439\u0442\u0430\u043c, \u0447\u0435\u043c \u0443 PNG. \u041e\u043d \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c RGB \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438, \u044d\u0442\u043e \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c WebP.<\/p>\n<h4>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435<\/h4>\n<p>  \u0424\u043e\u0440\u043c\u0430\u0442 WebP \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439 EXIF \u0438 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u043e\u0432 XMP, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0444\u0438\u043b\u044c ICC.<\/p>\n<p>  WebP \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0435\u0435 \u0441\u0436\u0430\u0442\u0438\u0435 \u0437\u0430 \u0441\u0447\u0451\u0442 \u0431\u043e\u043b\u044c\u0448\u0435\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 CPU. \u0415\u0449\u0451 \u0432 2013 \u0433\u043e\u0434\u0443 \u0441\u0436\u0430\u0442\u0438\u0435 WebP \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 10 \u0440\u0430\u0437 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u0447\u0435\u043c \u0443 JPEG, \u043d\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043d\u0435 \u0442\u0430\u043a \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430 (\u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0441\u0436\u0438\u043c\u0430\u0442\u044c\u0441\u044f \u0432\u0434\u0432\u043e\u0435 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435). \u0414\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435 \u0441\u0431\u043e\u0440\u043a\u0438, \u044d\u0442\u043e \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439. \u0414\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u043c\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e, \u0432\u044b\u0437\u043e\u0432\u0443\u0442 \u0437\u0430\u043c\u0435\u0442\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 CPU, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0440\u0438\u0434\u0451\u0442\u0441\u044f \u0441\u0447\u0438\u0442\u0430\u0442\u044c\u0441\u044f.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 WebP \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u043d\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c JPEG. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, JPEG \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c 70% \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f WebP \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c 70%, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e WebP \u0434\u043e\u0441\u0442\u0438\u0433\u0430\u0435\u0442 \u043c\u0435\u043d\u044c\u0448\u0438\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0444\u0430\u0439\u043b\u043e\u0432, \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044f \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u0430\u043d\u043d\u044b\u0445.<\/p><\/blockquote>\n<p>  <a name=\"19\"><\/a><\/p>\n<h2>\u041a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 WebP \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435?<\/h2>\n<p>  \u041c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 WebP \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435 \u0434\u043b\u044f \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u044f \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b.<\/p>\n<p>  Google \u0441\u043e\u043e\u0431\u0449\u0438\u043b \u043e\u0431 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 30\u221235% \u043d\u0430 WebP \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0441\u0445\u0435\u043c\u0430\u043c\u0438 \u0441\u0436\u0430\u0442\u0438\u044f \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438. Google \u0432\u044b\u0434\u0430\u0451\u0442 43 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0434\u0435\u043d\u044c, 26% \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0436\u0430\u0442\u044b \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c. \u042d\u0442\u043e \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044f. \u041d\u0435\u0441\u043e\u043c\u043d\u0435\u043d\u043d\u043e, \u043e\u043d\u0430 \u0435\u0449\u0451 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0443\u043b\u0443\u0447\u0448\u0430\u0442 <a href=\"http:\/\/caniuse.com\/#search=webp\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 WebP<\/a>. Google \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 \u043d\u0430 Google Play, YouTube \u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0430\u0439\u0442\u0430\u0445.<\/p>\n<p>  Netflix, Amazon, Quora, Yahoo, Walmart, Ebay, The Guardian, Fortune \u0438 USA Today \u0441\u0436\u0438\u043c\u0430\u044e\u0442 \u0438 \u0432\u044b\u0434\u0430\u044e\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f WebP \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442. \u0418\u0437\u0434\u0430\u0442\u0435\u043b\u044c VoxMedia <a href=\"https:\/\/product.voxmedia.com\/2015\/8\/13\/9143805\/performance-update-2-electric-boogaloo\">\u043d\u0430 1\u22123 \u0441\u0435\u043a\u0443\u043d\u0434\u044b \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u043b \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446<\/a> <i>The Verge<\/i>, \u043f\u0435\u0440\u0435\u0439\u0434\u044f \u043d\u0430 WebP \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 Chrome. \u0421\u0430\u0439\u0442 <a href=\"https:\/\/iso.500px.com\/500px-color-profiles-file-formats-and-you\/\">500px<\/a> \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043b \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 \u0441\u0440\u0435\u0434\u043d\u0435\u043c \u043d\u0430 25% \u0441 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u0438\u043b\u0438 \u043b\u0443\u0447\u0448\u0438\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c.<\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0432\u044b\u0448\u0435\u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0445, WebP \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/c9f\/2a1\/51f\/c9f2a151ff30b5a3dd8b20178a78e64b.jpg\"><br \/>  <i><font color=\"gray\">\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 WebP \u0432 Google: 43 \u043c\u0438\u043b\u043b\u0438\u0430\u0440\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a WebP \u0435\u0436\u0435\u0434\u043d\u0435\u0432\u043d\u043e \u0432\u044b\u0434\u0430\u044e\u0442\u0441\u044f \u043d\u0430 YouTube, Google Play, Chrome Data Saver \u0438 G+<\/font><\/i><\/p>\n<p>  <a name=\"20\"><\/a><\/p>\n<h2>\u041a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 WebP?<\/h2>\n<p>  \u0414\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 WebP \u2014 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 JPEG. \u0412 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u0442\u0440\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u044d\u0442\u0430\u043f\u0430:<\/p>\n<p>  <b>Macro-blocking<\/b> \u2014 \u0440\u0430\u0437\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 (\u043c\u0430\u043a\u0440\u043e) \u0431\u043b\u043e\u043a\u0438 \u043f\u043e 16\u00d716 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0438 \u043d\u0430 \u0431\u043b\u043e\u043a\u0438 \u043f\u043e 8\u00d78 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0446\u0432\u0435\u0442\u043d\u043e\u0441\u0442\u0438. \u042d\u0442\u043e \u043f\u043e\u0445\u043e\u0436\u0435 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a JPEG \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0440\u0430\u0437\u0431\u0438\u0432\u0430\u044f \u0435\u0433\u043e \u043d\u0430 \u0431\u043b\u043e\u043a\u0438 \u0438 \u043f\u043e\u043d\u0438\u0436\u0430\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0430\u0445 \u0446\u0432\u0435\u0442\u043d\u043e\u0441\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/65f\/45b\/705\/65f45b70532300058c0e9a00fe08b6de.png\"><\/p>\n<p>  <b>\u041f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/b> \u2014 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u0434\u0431\u043b\u043e\u043a\u0430 4\u00d74 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0434\u0435\u043b\u044c \u043f\u0440\u043e\u0433\u043d\u043e\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0444\u0438\u043b\u044c\u0442\u0440\u0430\u0446\u0438\u044e. \u0415\u0451 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u044e\u0442 \u0434\u0432\u0430 \u043d\u0430\u0431\u043e\u0440\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432\u043e\u043a\u0440\u0443\u0433 \u0431\u043b\u043e\u043a\u0430: A (\u0441\u0442\u0440\u043e\u043a\u0430 \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u0432\u0435\u0440\u0445\u0443) \u0438 L (\u0441\u0442\u043e\u043b\u0431\u0435\u0446 \u0441\u043b\u0435\u0432\u0430). \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u0438\u0445 \u0434\u0432\u0443\u0445 \u043d\u0430\u0431\u043e\u0440\u043e\u0432 \u044d\u043d\u043a\u043e\u0434\u0435\u0440 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u043c\u0438 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0431\u043b\u043e\u043a 4\u00d74 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0431\u043b\u0438\u0436\u0435 \u0432\u0441\u0435\u0433\u043e \u043a \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u043c\u0443 \u0431\u043b\u043e\u043a\u0443. \u041a\u043e\u043b\u044c\u0442 \u041c\u0430\u043a\u0430\u043d\u043b\u0438\u0441 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u043e\u0431 \u044d\u0442\u043e\u043c \u0432 <a href=\"https:\/\/medium.com\/@duhroach\/how-webp-works-lossly-mode-33bd2b1d0670\">\u0441\u0442\u0430\u0442\u044c\u0435<\/a> \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 WebP \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0441\u0436\u0430\u0442\u0438\u044f \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438.<\/p>\n<div style=\"text-align:center;\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/cd2\/863\/50a\/cd286350a67629c8fa14233af6973893.png\"><\/div>\n<p>  \u0414\u0438\u0441\u043a\u0440\u0435\u0442\u043d\u043e\u0435 \u043a\u043e\u0441\u0438\u043d\u0443\u0441\u043d\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 (DCT) \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u0430\u043f\u043e\u0432, \u043a\u0430\u043a \u0432 JPEG. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 <a href=\"https:\/\/www.youtube.com\/watch?v=FdMoL3PzmSA&amp;index=7&amp;list=PLOU2XLYxmsIJGErt5rrCqaSGTMyyqNt2H\">\u0430\u0440\u0438\u0444\u043c\u0435\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0441\u0436\u0430\u0442\u0438\u044f<\/a>, \u0430 \u043d\u0435 \u0430\u043b\u0433\u043e\u0440\u0438\u0442\u043c\u0430 \u0425\u0430\u0444\u0444\u043c\u0430\u043d\u0430, \u043a\u0430\u043a \u0432 JPEG.<\/p>\n<p>  \u0414\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/compression\">\u00ab\u041c\u0435\u0442\u043e\u0434\u044b \u0441\u0436\u0430\u0442\u0438\u044f WebP\u00bb<\/a> \u0441 \u0441\u0430\u0439\u0442\u0430 Google Developer.<\/p>\n<p>  <a name=\"21\"><\/a><\/p>\n<h2>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 WebP<\/h2>\n<p>  \u041d\u0435 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 WebP, \u043d\u043e \u043f\u043e <a href=\"http:\/\/caniuse.com\/webp\">\u0434\u0430\u043d\u043d\u044b\u043c CanIUse.com<\/a>, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u043a\u043e\u043b\u043e 74%. Chrome \u0438 Opera \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442. Safari, Edge \u0438 Firefox \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u0443\u044e\u0442, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0432 \u043e\u0444\u0438\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0434\u0430\u0447\u0430 WebP \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430. \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e\u0431 \u044d\u0442\u043e\u043c \u043f\u043e\u0437\u0436\u0435.<\/p>\n<p>  \u0412\u043e\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 \u043a\u0430\u0436\u0434\u044b\u043c \u0438\u0437 \u043d\u0438\u0445:<\/p>\n<ul>\n<li>Chrome: \u043f\u043e\u043b\u043d\u0430\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441 \u0432\u0435\u0440\u0441\u0438\u0438 23<\/li>\n<li>Chrome \u0434\u043b\u044f Android: \u043d\u0430\u0447\u0438\u043d\u0430\u044f \u0441 Chrome 50<\/li>\n<li>Android: \u0441 4.2<\/li>\n<li>Opera: \u0441 12.1<\/li>\n<li>Opera Mini: \u0432\u0441\u0435 \u0432\u0435\u0440\u0441\u0438\u0438<\/li>\n<li>Firefox: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0435\u0442\u0430-\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/li>\n<li>Edge: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0435\u0442\u0430-\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/li>\n<li>Internet Explorer: \u043d\u0435\u0442<\/li>\n<li>Safari: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0435\u0442\u0430-\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430<\/li>\n<\/ul>\n<p>  WebP \u043d\u0435 \u043b\u0438\u0448\u0451\u043d \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u043e\u0432. \u0412 \u043d\u0451\u043c \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u043e\u043f\u0446\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0434\u043b\u044f WebP \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u0440\u0438\u043b\u0438\u0447\u043d\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0439, \u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0432\u043f\u043e\u043b\u043d\u0435 \u0445\u0432\u0430\u0442\u0430\u0435\u0442, \u0447\u0442\u043e\u0431\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0432\u044b\u0434\u0430\u0447\u0443 WebP \u043a\u0430\u043a \u043e\u0434\u0438\u043d \u0438\u0437 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432.<\/p>\n<p>  <a name=\"22\"><\/a><\/p>\n<h2>\u041a\u0430\u043a \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 WebP?<\/h2>\n<p>  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0445 \u0438 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u043e\u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 WebP. \u041e\u0434\u043d\u043e \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u2014 XnConvert: \u044d\u0442\u043e \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043a\u0440\u043e\u0441\u0441-\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u044b\u0439 \u043f\u0430\u043a\u0435\u0442\u043d\u044b\u0439 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0432\u0430\u0436\u043d\u043e \u043d\u0435 \u0434\u043e\u043f\u0443\u0441\u043a\u0430\u0442\u044c \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 WebP \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a JPEG \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u0438\u043b\u0438 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u042d\u0442\u043e \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u0430\u044f \u043e\u0448\u0438\u0431\u043a\u0430, \u0432 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f WebP \u0441 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u0430\u043c\u0438 \u0441\u0436\u0430\u0442\u0438\u044f JPEG. \u042d\u0442\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u0442 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c WebP, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0435\u043c\u0443 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, <i>\u0438 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u044f JPEG<\/i>, \u0447\u0442\u043e \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 \u043a \u0434\u0432\u043e\u0439\u043d\u043e\u0439 \u043f\u043e\u0442\u0435\u0440\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u0417\u0430\u0433\u0440\u0443\u0436\u0430\u0439\u0442\u0435 \u0432 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0444\u0430\u0439\u043b \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b.<\/p><\/blockquote>\n<p>  <\/p>\n<h4>XnConvert<\/h4>\n<p>  <a href=\"http:\/\/www.xnview.com\/en\/xnconvert\/\">XnConvert<\/a> \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u043f\u0430\u043a\u0435\u0442\u043d\u0443\u044e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u043e\u043b\u0435\u0435 \u0447\u0435\u043c 500 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432. \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u043c\u0438 \u0431\u043e\u043b\u0435\u0435 80 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u043b\u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/507\/572\/44f\/50757244ffc4338222e3960f09485c31.png\"><br \/>  <i><font color=\"gray\">XnConvert \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0430\u043a\u0435\u0442\u043d\u0443\u044e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044f \u043f\u0440\u044f\u043c\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432 \u0432 WebP \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b. \u041a\u0440\u043e\u043c\u0435 \u0441\u0436\u0430\u0442\u0438\u044f, XnConvert \u0443\u043c\u0435\u0435\u0442 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435, \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438, \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0442\u044c \u0433\u043b\u0443\u0431\u0438\u043d\u0443 \u0446\u0432\u0435\u0442\u0430 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/font><\/i><\/p>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0435 xnview:<\/p>\n<ul>\n<li>\u041c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435: \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/li>\n<li>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f: \u043f\u043e\u0432\u043e\u0440\u043e\u0442, \u043e\u0431\u0440\u0435\u0437\u0430\u043d\u0438\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430<\/li>\n<li>\u0420\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u043a\u0438: \u044f\u0440\u043a\u043e\u0441\u0442\u044c, \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442, \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u044c<\/li>\n<li>\u0424\u0438\u043b\u044c\u0442\u0440\u044b: \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435, \u0440\u0435\u043b\u044c\u0435\u0444, \u0440\u0435\u0437\u043a\u043e\u0441\u0442\u044c<\/li>\n<li>\u042d\u0444\u0444\u0435\u043a\u0442\u044b: \u043c\u0430\u0441\u043a\u0438, \u0432\u043e\u0434\u044f\u043d\u044b\u0435 \u0437\u043d\u0430\u043a\u0438, \u0432\u0438\u043d\u044c\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 (\u0447\u0430\u0441\u0442\u0438\u0447\u043d\u043e\u0435 \u0437\u0430\u0442\u0435\u043c\u043d\u0435\u043d\u0438\u0435)<\/li>\n<\/ul>\n<p>  \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0432 70 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0444\u0430\u0439\u043b\u043e\u0432, \u0432\u043a\u043b\u044e\u0447\u0430\u044f WebP. XnConvert \u2014 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0430 \u043f\u043e\u0434 Linux, Mac \u0438 Windows. \u042d\u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u043c\u0430\u043b\u043e\u0433\u043e \u0431\u0438\u0437\u043d\u0435\u0441\u0430.<\/p>\n<h4>\u041c\u043e\u0434\u0443\u043b\u0438 Node<\/h4>\n<p>  <a href=\"https:\/\/github.com\/imagemin\/imagemin\">Imagemin<\/a> \u2014 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043c\u043e\u0434\u0443\u043b\u044c \u0441\u0436\u0430\u0442\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0435\u0441\u0442\u044c \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 WebP (<a href=\"https:\/\/github.com\/imagemin\/imagemin-webp\">imagemin-webp<\/a>). \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0436\u0430\u0442\u0438\u0435 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u0438 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c.<\/p>\n<p>  \u0414\u043b\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438 imagemin \u0438 imagemin-webp \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u0435:<\/p>\n<p>  <code>&gt; npm install --save imagemin imagemin-webp<\/code><\/p>\n<p>  \u0417\u0430\u0442\u0435\u043c \u043c\u043e\u0436\u0435\u043c \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c require() \u0432 \u043e\u0431\u043e\u0438\u0445 \u043c\u043e\u0434\u0443\u043b\u044f\u0445 \u0438 \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u043b\u044e\u0431\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, JPEG) \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u043f\u0440\u043e\u0435\u043a\u0442\u0430. \u041d\u0438\u0436\u0435 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u044d\u043d\u043a\u043e\u0434\u0435\u0440\u0430 WebP 60:<\/p>\n<pre><code>const imagemin = require('imagemin'); const imageminWebp = require('imagemin-webp');  imagemin(['images\/*.{jpg}'], 'images', {     use: [         imageminWebp({quality: 60})     ] }).then(() =&gt; {     console.log(\u2018Images optimized\u2019); });<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0438 \u0432 JPEG, \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u044c \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u0441\u0436\u0430\u0442\u0438\u044f \u043d\u0430 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435. \u041e\u0446\u0435\u043d\u0438\u0442\u0435 \u0441\u0430\u043c\u0438, \u043a\u0430\u043a\u043e\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0436\u0430\u0442\u0438\u044f \u0430\u0434\u0435\u043a\u0432\u0430\u0442\u0435\u043d \u0434\u043b\u044f \u0432\u0430\u0448\u0438\u0445 \u0444\u0430\u0439\u043b\u043e\u0432. Imagemin-webp \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 WebP \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 (\u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 24-\u0431\u0438\u0442\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430 \u0438 \u043f\u043e\u043b\u043d\u043e\u0439 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u0438), \u0443\u043a\u0430\u0437\u0430\u0432 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>lossless: true<\/code>:<\/p>\n<pre><code>const imagemin = require('imagemin'); const imageminWebp = require('imagemin-webp');  imagemin(['images\/*.{jpg,png}'], 'build\/images', {     use: [         imageminWebp({lossless: true})     ] }).then(() =&gt; {     console.log(\u2018Images optimized\u2019); });<\/code><\/pre>\n<p>  <a href=\"https:\/\/github.com\/sindresorhus\/gulp-webp\">\u041f\u043b\u0430\u0433\u0438\u043d WebP \u0434\u043b\u044f Gulp<\/a> \u043e\u0442 \u0421\u0438\u043d\u0434\u0440\u0435 \u0421\u043e\u0440\u0445\u0443\u0441\u0430 \u0441\u0434\u0435\u043b\u0430\u043d \u043d\u0430 \u0431\u0430\u0437\u0435 imagemin-webp, \u0435\u0441\u0442\u044c \u0435\u0449\u0451 <a href=\"https:\/\/www.npmjs.com\/package\/webp-loader\">\u0437\u0430\u0433\u0440\u0443\u0437\u0447\u0438\u043a WebP \u0434\u043b\u044f WebPack<\/a>. \u041f\u043b\u0430\u0433\u0438\u043d Gulp \u043f\u043e\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435 \u043e\u043f\u0446\u0438\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f imagemin:<\/p>\n<pre><code>const gulp = require('gulp'); const webp = require('gulp-webp');  gulp.task('webp', () =&gt;     gulp.src('src\/*.jpg')     .pipe(webp({         quality: 80,         preset: 'photo',         method: 6     }))     .pipe(gulp.dest('dist')) );<\/code><\/pre>\n<p>  \u0418\u043b\u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c:<\/p>\n<pre><code>const gulp = require('gulp'); const webp = require('gulp-webp');  gulp.task('webp-lossless', () =&gt;     gulp.src('src\/*.jpg')     .pipe(webp({         lossless: true     }))     .pipe(gulp.dest('dist')) );<\/code><\/pre>\n<p>  <\/p>\n<h4>\u041f\u0430\u043a\u0435\u0442\u043d\u0430\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Bash<\/h4>\n<p>  XNConvert \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0430\u043a\u0435\u0442\u043d\u043e\u0435 \u0441\u0436\u0430\u0442\u0438\u0435, \u043d\u043e \u0432\u0441\u0451 \u043c\u043e\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.<\/p>\n<p>  \u041f\u0430\u043a\u0435\u0442\u043d\u0430\u044f \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 WebP \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/cwebp\">cwebp<\/a>:<\/p>\n<pre><code class=\"bash\">find .\/ -type f -name '*.jpg' -exec cwebp -q 70 {} -o {}.webp \\;<\/code><\/pre>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u043e\u0434\u0435\u043a\u043e\u043c MozJPEG \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/github.com\/danielgtaylor\/jpeg-archive\">jpeg-recompress<\/a>:<\/p>\n<pre><code class=\"bash\">find .\/ -type f -name '*.jpg' -exec jpeg-recompress {} {} \\;<\/code><\/pre>\n<p>  \u0438 \u043e\u0431\u0440\u0435\u0437\u043a\u0430 SVG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b <a href=\"https:\/\/github.com\/svg\/svgo\">svgo<\/a> (\u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0437\u0436\u0435):<\/p>\n<pre><code class=\"bash\">find .\/ -type f -name '*.svg' -exec svgo {} \\;<\/code><\/pre>\n<p>  \u0414\u0436\u0435\u0440\u0435\u043c\u0438 \u0412\u0430\u0433\u043d\u0435\u0440 \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043b\u043d\u0443\u044e \u0441\u0442\u0430\u0442\u044c\u044e \u043f\u043e <a href=\"https:\/\/jeremywagner.me\/blog\/bulk-image-optimization-in-bash\">\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 Bash<\/a> \u0438 \u0435\u0449\u0451 \u043e\u0434\u043d\u0443 \u2014 \u043e <a href=\"https:\/\/jeremywagner.me\/blog\/faster-bulk-image-optimization-in-bash\">\u0440\u0430\u0441\u043f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0432\u0430\u043d\u0438\u0438<\/a> \u044d\u0442\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438.<\/p>\n<h4>\u0414\u0440\u0443\u0433\u0438\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f WebP<\/h4>\n<p>  <\/p>\n<ul>\n<li>Leptonica \u2014 \u0446\u0435\u043b\u044b\u0439 \u0432\u0435\u0431-\u0441\u0430\u0439\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0445 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438 \u0430\u043d\u0430\u043b\u0438\u0437\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/li>\n<li>Sketch \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0432 WebP.<\/li>\n<li>GIMP \u2014 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 Photoshop \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c.<\/li>\n<li>ImageMagick \u2014 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0435, \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0430, \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0438. \u0411\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439, \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438.<\/li>\n<li>Pixelmator \u2014 \u043a\u043e\u043c\u043c\u0435\u0440\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f Mac.<\/li>\n<li>Photoshop WebP Plugin \u2014 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d \u043e\u0442 Google. \u0418\u043c\u043f\u043e\u0440\u0442 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 Photoshop.<\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f Android \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 BMP, JPG, PNG \u0438 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 GIF-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 WebP \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Android Studio. \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u0441\u043c. \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 <a href=\"https:\/\/developer.android.com\/studio\/write\/convert-webp.html\">\u00ab\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 WebP \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Android Studio\u00bb<\/a>.<\/p>\n<p>  <a name=\"23\"><\/a><\/p>\n<h2>\u041a\u0430\u043a \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f WebP \u043d\u0430 \u043c\u043e\u0435\u0439 \u041e\u0421?<\/h2>\n<p>  \u0425\u043e\u0442\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f WebP \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u043d\u0430 \u0434\u0432\u0438\u0436\u043a\u0435 Blink (Chrome, Opera, Brave), \u0438\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0438\u0437 \u041e\u0421 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043d\u0430\u0434\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043b\u044f Mac \u0438\u043b\u0438 Windows.<\/p>\n<p>  \u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043b\u0435\u0442 \u043d\u0430\u0437\u0430\u0434 <a href=\"https:\/\/www.cnet.com\/news\/facebook-tries-googles-webp-image-format-users-squawk\/\">Facebook \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0441 WebP<\/a> \u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443: \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 \u0434\u0438\u0441\u043a, \u0430 \u043f\u043e\u0442\u043e\u043c \u043d\u0435 \u043c\u043e\u0433\u043b\u0438 \u0438\u0445 \u043e\u0442\u043a\u0440\u044b\u0442\u044c. \u0417\u0434\u0435\u0441\u044c \u0442\u0440\u0438 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b:<\/p>\n<ul>\n<li>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u0443\u0434\u0430\u0451\u0442\u0441\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0444\u0430\u0439\u043b\u044b WebP \u043b\u043e\u043a\u0430\u043b\u044c\u043d\u043e. \u042d\u0442\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043e \u0432 Chrome, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0435\u043f\u0435\u0440\u044c \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0435 .webp.<\/li>\n<li>\u041f\u043e\u0441\u043b\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043f\u043e \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u0435 \u0447\u0435\u043b\u043e\u0432\u0435\u043a\u0443, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0435\u0442 Chrome. Facebook \u0440\u0435\u0448\u0438\u043b \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443, \u0432\u043d\u0435\u0434\u0440\u0438\u0432 \u0431\u043e\u043b\u044c\u0448\u0443\u044e \u043a\u043d\u043e\u043f\u043a\u0443 \u00ab\u0421\u043a\u0430\u0447\u0430\u0442\u044c\u00bb, \u043f\u043e \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043e\u0442\u0434\u0430\u0451\u0442 JPEG.<\/li>\n<li>\u041a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 URL \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043f\u0443\u0431\u043b\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u043f\u0443\u0442\u0451\u043c <a href=\"https:\/\/www.igvita.com\/2012\/12\/18\/deploying-new-image-formats-on-the-web\/\">\u0441\u043e\u0433\u043b\u0430\u0441\u043e\u0432\u0430\u043d\u0438\u044f content-type<\/a>.<\/li>\n<\/ul>\n<p>  \u0423 \u0432\u0430\u0448\u0438\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0442\u0430\u043a\u0438\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043c\u043e\u0433\u0443\u0442 \u043d\u0435 \u043f\u0440\u043e\u044f\u0432\u0438\u0442\u044c\u0441\u044f, \u043d\u043e \u044d\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u0430\u044f \u0437\u0430\u043c\u0435\u0442\u043a\u0430 \u043d\u0430 \u043f\u043e\u043b\u044f\u0445. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0442 \u0443\u0442\u0438\u043b\u0438\u0442\u044b \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 WebP \u043f\u043e\u0434 \u0440\u0430\u0437\u043d\u044b\u0435 \u041e\u0421.<\/p>\n<p>  \u041d\u0430 Mac \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/Nyx0uf\/qlImageSize\">\u043f\u043b\u0430\u0433\u0438\u043d Quick Look \u0434\u043b\u044f WebP<\/a> (qlImageSize). \u041e\u043d \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/31f\/440\/5f5\/31f4405f5b2c5e9fe146d00c77566621.jpg\"><\/p>\n<p>  \u041f\u043e\u0434 Windows \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c <a href=\"https:\/\/storage.googleapis.com\/downloads.webmproject.org\/releases\/webp\/WebpCodecSetup.exe\">\u043f\u0430\u043a\u0435\u0442 \u043a\u043e\u0434\u0435\u043a\u043e\u0432 WebP<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u043f\u0446\u0438\u044e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 WebP \u0432 File Explorer \u0438 Windows Photo Viewer.<\/p>\n<p>  <a name=\"24\"><\/a><\/p>\n<h2>\u041a\u0430\u043a \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c WebP?<\/h2>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 WebP \u043d\u0435 \u043f\u043e\u043a\u0430\u0436\u0443\u0442 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0433\u043e, \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/921\/075\/af2\/921075af2ee07862f7dc586ee402793d.jpg\"><br \/>  <i><font color=\"gray\">\u041f\u0430\u043d\u0435\u043b\u044c Chrome DevTools Network \u0441 \u0432\u044b\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0444\u0430\u0439\u043b\u043e\u0432 \u0442\u0438\u043f\u0430 WebP, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0434\u0430\u044e\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043d\u0430 \u0434\u0432\u0438\u0436\u043a\u0435 Blink<\/font><\/i><\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a88\/8c9\/56d\/a888c956d80db06c0b4a170be510135e.jpg\"><br \/>  <i><font color=\"gray\">Play Store \u043e\u0442\u0434\u0430\u0451\u0442 WebP \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u043d\u0430 Blink \u0438 JPEG \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u043c, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Firefox<\/font><\/i><\/p>\n<p>  \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 WebP \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c:<\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c .htaccess \u0434\u043b\u044f \u0432\u044b\u0434\u0430\u0447\u0438 \u043a\u043e\u043f\u0438\u0439 WebP<\/h4>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c .htaccess \u0434\u043b\u044f \u0432\u044b\u0434\u0430\u0447\u0438 \u0444\u0430\u0439\u043b\u043e\u0432 WebP \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0435\u0441\u043b\u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0435\u0441\u0442\u044c webp-\u0432\u0435\u0440\u0441\u0438\u044f \u0444\u0430\u0439\u043b\u0430 JPEG\/PNG.<\/p>\n<p>  \u0412\u0438\u043d\u0441\u0435\u043d\u0442 \u041e\u0440\u0431\u0430\u043a \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u043b \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434:<\/p>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u044f\u0432\u043d\u043e <a href=\"http:\/\/vincentorback.se\/blog\/using-webp-images-with-htaccess\/\">\u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0435 WebP<\/a> \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTTP\/Headers\/Accept\">\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Accept<\/a>. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0434\u0430\u0442\u044c \u0441 \u0441\u0435\u0440\u0432\u0435\u0440\u0430 WebP-\u0432\u0435\u0440\u0441\u0438\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041d\u043e \u044d\u0442\u043e \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0445\u043e\u0441\u0442\u043e\u0432, \u0432\u0440\u043e\u0434\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 GitHub \u0438\u043b\u0438 S3), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043e\u043f\u0446\u0438\u044e.<\/p>\n<p>  \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d \u043f\u0440\u0438\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 .htaccess \u0434\u043b\u044f \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440\u0430 Apache:<\/p>\n<pre><code>&lt;IfModule mod_rewrite.c&gt;    RewriteEngine On    # Check if browser support WebP images   RewriteCond %{HTTP_ACCEPT} image\/webp    # Check if WebP replacement image exists   RewriteCond %{DOCUMENT_ROOT}\/$1.webp -f    # Serve WebP image instead   RewriteRule (.+)\\.(jpe?g|png)$ $1.webp [T=image\/webp,E=accept:1]  &lt;\/IfModule&gt;  &lt;IfModule mod_headers.c&gt;      Header append Vary Accept env=REDIRECT_accept  &lt;\/IfModule&gt;  AddType  image\/webp .webp<\/code><\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u043a\u0438 WebP, \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435 \u0432\u043a\u043b\u044e\u0447\u0435\u043d MIME-\u0442\u0438\u043f image\/webp.<\/p>\n<p>  \u041d\u0430 Apache \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b .htaccess \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>AddType image\/webp .webp<\/code><\/pre>\n<p>  \u041d\u0430 Nginx \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0432 \u0444\u0430\u0439\u043b mime.types \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>image\/webp webp;<\/code><\/pre>\n<p>  <\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0412\u0438\u043d\u0441\u0435\u043d\u0442 Orback \u043f\u0440\u0438\u0432\u043e\u0434\u0438\u0442 <a href=\"https:\/\/github.com\/vincentorback\/WebP-images-with-htaccess\">\u043e\u0431\u0440\u0430\u0437\u0435\u0446 htaccess<\/a> \u0434\u043b\u044f \u0432\u044b\u0434\u0430\u0447\u0438 WebP, \u0430 \u0418\u043b\u044c\u044f \u0413\u0440\u0438\u0433\u043e\u0440\u0438\u043a \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e <a href=\"https:\/\/github.com\/igrigorik\/webp-detect\">\u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0432\u044b\u0434\u0430\u0447\u0438 WebP<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b.<\/p><\/blockquote>\n<p>  <\/p>\n<h4>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0435\u0433\u0430 &lt;picture&gt;<\/h4>\n<p>  \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u0441\u0430\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0432\u044b\u0431\u0438\u0440\u0430\u0442\u044c \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0442\u0435\u0433\u0430 &lt;picture&gt;. \u0412\u043d\u0443\u0442\u0440\u0438 &lt;picture&gt; \u0443\u043a\u0430\u0437\u0430\u043d\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;source&gt;, \u0441 \u043e\u0434\u043d\u0438\u043c \u0442\u0435\u0433\u043e\u043c &lt;img&gt; \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e, \u0433\u0434\u0435 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 &lt;source&gt; \u0438 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u043f\u0435\u0440\u0432\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439. \u0415\u0441\u043b\u0438 \u0442\u0435\u0433 &lt;picture&gt; \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0442\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 &lt;div&gt; \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0442\u0435\u0433\u0430 &lt;img&gt;.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b \u0441 \u043f\u043e\u0440\u044f\u0434\u043a\u043e\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 &lt;source&gt;. \u041d\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0430\u0439\u0442\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 image\/webp \u043f\u043e\u0441\u043b\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432, \u0430 \u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u043f\u0435\u0440\u0435\u0434 \u043d\u0438\u043c\u0438. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e \u0432\u043e\u0437\u0440\u0430\u0441\u0442\u0430\u043d\u0438\u044e \u043e\u0431\u044a\u0451\u043c\u0430 \u0444\u0430\u0439\u043b\u0430, \u0435\u0441\u043b\u0438 \u0443 \u043d\u0438\u0445 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445 (\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>media<\/code>). \u041e\u0431\u044b\u0447\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u043e\u0439 \u0436\u0435 \u043f\u043e\u0440\u044f\u0434\u043e\u043a, \u043a\u0430\u043a \u043f\u0440\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u0438 \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0431\u043e\u043b\u0435\u0435 \u043d\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432.<\/p><\/blockquote>\n<p>  \u0412\u043e\u0442 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b HTML:<\/p>\n<pre><code class=\"html\">&lt;picture&gt;   &lt;source srcset=\"\/path\/to\/image.webp\" type=\"image\/webp\"&gt;   &lt;img src=\"\/path\/to\/image.jpg\" alt=\"\"&gt; &lt;\/picture&gt;  &lt;picture&gt;        &lt;source srcset='paul_irish.jxr' type='image\/vnd.ms-photo'&gt;       &lt;source srcset='paul_irish.jp2' type='image\/jp2'&gt;     &lt;source srcset='paul_irish.webp' type='image\/webp'&gt;     &lt;img src='paul_irish.jpg' alt='paul'&gt; &lt;\/picture&gt;  &lt;picture&gt;    &lt;source srcset=\"photo.jxr\" type=\"image\/vnd.ms-photo\"&gt;    &lt;source srcset=\"photo.jp2\" type=\"image\/jp2\"&gt;    &lt;source srcset=\"photo.webp\" type=\"image\/webp\"&gt;    &lt;img src=\"photo.jpg\" alt=\"My beautiful face\"&gt; &lt;\/picture&gt;<\/code><\/pre>\n<p>  <\/p>\n<h4>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 WebP \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 CDN<\/h4>\n<p>  \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 CDN \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0432\u044b\u0434\u0430\u0447\u0443 WebP \u043f\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0443 \u043a\u043b\u0438\u0435\u043d\u0442\u0430, <a href=\"http:\/\/cloudinary.com\/documentation\/responsive_images#automating_responsive_images_with_client_hints\">\u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e<\/a>. \u041f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0441\u0432\u043e\u0439 CDN, \u0435\u0441\u0442\u044c \u043b\u0438 \u0443 \u043d\u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0440\u0435\u0448\u0430\u0435\u0442\u0441\u044f.<\/p>\n<h4>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 WordPress<\/h4>\n<p>  <b>Jetpack<\/b>: \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439 \u043f\u043b\u0430\u0433\u0438\u043d WordPress, \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f CDN-\u0441\u0435\u0440\u0432\u0438\u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u043e\u0434 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c <a href=\"https:\/\/jetpack.com\/support\/photon\/\">Photon<\/a> \u0441 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 WebP. \u041e\u043d \u0432\u043a\u043b\u044e\u0447\u0451\u043d \u0432 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e Jetpack, \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u043e \u0438 \u043f\u043e\u043b\u0435\u0437\u043d\u043e. \u041d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e Photon \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u043c\u0435\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u043e\u043a\u0443 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 URL, \u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a DNS.<\/p>\n<p>  <b>Cache Enabler \u0438 Optimizer<\/b>: \u0435\u0441\u043b\u0438 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 WordPress, \u0435\u0441\u0442\u044c \u043a\u0430\u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u043e\u0434\u0438\u043d \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c. \u0412 \u043c\u0435\u043d\u044e \u043f\u043b\u0430\u0433\u0438\u043d\u0430 <a href=\"https:\/\/wordpress.org\/plugins\/cache-enabler\/\">Cache Enabler<\/a> \u0435\u0441\u0442\u044c \u0444\u043b\u0430\u0436\u043e\u043a \u0434\u043b\u044f \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438 \u0432\u044b\u0434\u0430\u0447\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 WebP, \u0435\u0441\u043b\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438\u0445 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442. \u042d\u0442\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 WebP. \u0417\u0434\u0435\u0441\u044c \u0442\u043e\u0436\u0435 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a: Cache Enabler \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0440\u043e\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0439 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b Optimizer, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u0437\u0438\u043c\u0430\u044e\u0442 \u0435\u0436\u0435\u0433\u043e\u0434\u043d\u0443\u044e \u043f\u043b\u0430\u0442\u0443. \u042d\u0442\u043e \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u043d\u043e \u0434\u043b\u044f \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c.<\/p>\n<p>  <b>Short Pixel<\/b>: \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0442\u043e\u0440\u0430 \u0434\u043b\u044f Cache Enabler, \u0442\u043e\u0436\u0435 \u043f\u043b\u0430\u0442\u043d\u044b\u0439. \u041f\u043e \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 Short Pixel \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0439 Optimizer. \u041f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442\u0441\u044f \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043e 100 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439 \u0432 \u043c\u0435\u0441\u044f\u0446.<\/p>\n<h4>\u0421\u0436\u0430\u0442\u0438\u0435 GIF-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0439 \u0438 \u043f\u043e\u0447\u0435\u043c\u0443 &lt;video&gt; \u043b\u0443\u0447\u0448\u0435<\/h4>\n<p>  \u0410\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 GIF \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f, \u043d\u0435\u0441\u043c\u043e\u0442\u0440\u044f \u043d\u0430 \u0438\u0445 \u0443\u0437\u043a\u0443\u044e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e. \u0425\u043e\u0442\u044f \u0432\u0441\u0435, \u043e\u0442 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 \u0434\u043e \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u043c\u0435\u0434\u0438\u0430-\u0441\u0430\u0439\u0442\u043e\u0432, \u043e\u0431\u0438\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e GIF-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e, \u044d\u0442\u043e\u0442 \u0444\u043e\u0440\u043c\u0430\u0442 <i>\u043d\u0438\u043a\u043e\u0433\u0434\u0430<\/i> \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0430\u043b\u0441\u044f \u0434\u043b\u044f \u0432\u0438\u0434\u0435\u043e \u0438\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 <a href=\"https:\/\/www.w3.org\/Graphics\/GIF\/spec-gif89a.txt\">\u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f GIF89a<\/a> \u044f\u0432\u043d\u043e \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u00abGIF \u043d\u0435 \u043f\u0440\u0435\u0434\u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d \u0441\u043b\u0443\u0436\u0438\u0442\u044c \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u0439 \u0434\u043b\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438\u00bb. <a href=\"http:\/\/gifbrewery.tumblr.com\/post\/39564982268\/can-you-recommend-a-good-length-of-clip-to-keep-gifs\">\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0446\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0434\u0440\u043e\u0432 \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438<\/a> \u2014 \u0432\u0441\u0451 \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e GIF. \u0417\u0430\u043c\u0435\u043d\u0430 \u043d\u0430 \u0432\u0438\u0434\u0435\u043e\u0444\u043e\u0440\u043c\u0430\u0442 \u0434\u0430\u0451\u0442 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/56b\/bda\/eb7\/56bbdaeb754a883674dc575a36542d8e.jpg\"><br \/>  <i><font color=\"gray\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 GIF-\u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0438 \u0432\u0438\u0434\u0435\u043e \u0432 \u044d\u043a\u0432\u0438\u0432\u0430\u043b\u0435\u043d\u0442\u043d\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435<\/font><\/i> <\/p>\n<p>  <b>\u0412\u044b\u0434\u0430\u0447\u0430 \u0442\u043e\u0433\u043e \u0436\u0435 \u0432\u0438\u0434\u0435\u043e \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 MP4 \u0441\u043e\u043a\u0440\u0430\u0449\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043d\u0430 80% \u0438\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435.<\/b> \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0444\u0430\u0439\u043b\u044b GIF \u0432\u043f\u0443\u0441\u0442\u0443\u044e \u0442\u0440\u0430\u0442\u044f\u0442 \u0442\u0440\u0430\u0444\u0438\u043a, \u043e\u043d\u0438 \u0434\u043e\u043b\u044c\u0448\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f, \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u043c\u0435\u043d\u044c\u0448\u0435 \u0446\u0432\u0435\u0442\u043e\u0432 \u0438 \u043e\u0431\u044b\u0447\u043d\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u044f\u0442\u043d\u043e. \u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u044b \u043e\u0431\u0440\u0430\u0442\u0438\u043b\u0438 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u0447\u0442\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u0432 Twitter \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 GIF \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u0442\u0430\u043c \u043b\u0443\u0447\u0448\u0435, \u0447\u0435\u043c \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0430\u0439\u0442\u0430\u0445. \u042d\u0442\u043e \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e <a href=\"http:\/\/mashable.com\/2014\/06\/20\/twitter-gifs-mp4\/#fiiFE85eQZqW\">\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 GIF \u0432 Twitter \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u043d\u0435 \u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f GIF-\u0444\u0430\u0439\u043b\u0430\u043c\u0438<\/a>. \u0427\u0442\u043e\u0431\u044b \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0442\u0440\u0430\u0444\u0438\u043a, Twitter \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0435\u0442 \u0438\u0445 \u0432 \u0432\u0438\u0434\u0435\u043e. \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, <a href=\"https:\/\/thenextweb.com\/insider\/2014\/10\/09\/imgur-begins-converting-gif-uploads-mp4-videos-new-gifv-format\/\">Imgur \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0435\u0442 GIF \u0432 MP4<\/a>.<\/p>\n<p>  \u041f\u043e\u0447\u0435\u043c\u0443 GIF-\u0444\u0430\u0439\u043b\u044b \u0432\u043e \u043c\u043d\u043e\u0433\u043e \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u0440\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443? \u041f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d\u0438 \u0445\u0440\u0430\u043d\u044f\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u0430\u0434\u0440 \u043a\u0430\u043a GIF-\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c \u2014 \u0434\u0430, \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c. \u041f\u043b\u043e\u0445\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e GIF \u0432\u044b\u0437\u0432\u0430\u043d\u043e \u043d\u0435 \u0441\u0436\u0430\u0442\u0438\u0435\u043c, \u0430 \u043f\u0430\u043b\u0438\u0442\u0440\u043e\u0439 \u0432 256 \u0446\u0432\u0435\u0442\u043e\u0432. \u0424\u043e\u0440\u043c\u0430\u0442 \u043d\u0435 \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0435 \u043a\u0430\u0434\u0440\u044b \u0434\u043b\u044f \u0441\u0436\u0430\u0442\u0438\u044f, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0432\u0438\u0434\u0435\u043e\u043a\u043e\u0434\u0435\u043a\u043e\u0432 \u0432\u0440\u043e\u0434\u0435 H.264. \u0412\u0438\u0434\u0435\u043e MP4 \u0445\u0440\u0430\u043d\u0438\u0442 \u043a\u0430\u0436\u0434\u044b\u0439 \u043a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 \u043a\u0430\u0434\u0440 \u043a\u0430\u043a JPEG \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438, \u043e\u0442\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u0434\u043b\u044f \u0434\u043e\u0441\u0442\u0438\u0436\u0435\u043d\u0438\u044f \u043b\u0443\u0447\u0448\u0435\u0433\u043e \u0441\u0436\u0430\u0442\u0438\u044f.<\/p>\n<h4>\u0415\u0441\u043b\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c\u0441\u044f \u043d\u0430 \u0432\u0438\u0434\u0435\u043e<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/www.ffmpeg.org\/\">ffmpeg<\/a> \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 GIF (\u0438\u043b\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432) \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 MP4 (H.264). \u042f \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u044e \u0442\u0430\u043a\u043e\u0439 \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u0438\u043a \u0438\u0437 <a href=\"http:\/\/rigor.com\/blog\/2015\/12\/optimizing-animated-gifs-with-html5-video\">Rigor<\/a>:\n<p>  <code>ffmpeg -i animated.gif -movflags faststart -pix_fmt yuv420p -vf \"scale=trunc(iw\/2)2:trunc(ih\/2)2\" video.mp4<\/code><\/li>\n<li>ImageOptim API \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 GIF \u0432 WebM\/H.264 \u0438 \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435 GIF, \u0447\u0442\u043e \u0435\u0449\u0451 \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u0441\u0436\u0430\u0442\u0438\u0435<\/li>\n<\/ul>\n<p>  <\/p>\n<h4>\u0415\u0441\u043b\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 GIF<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435 Gifsicle \u0443\u0434\u0430\u043b\u044f\u044e\u0442 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435, \u043d\u0435\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0446\u0432\u0435\u0442\u0430 \u043f\u0430\u043b\u0438\u0442\u0440\u044b \u0438 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u044e\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0434\u0440\u0430\u043c\u0438.<\/li>\n<li>\u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 GIF \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438. Giflossy \u2014 \u0444\u043e\u0440\u043a Gifsicle, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0444\u043b\u0430\u0433 <code>-lossy<\/code> \u0438 \u0441\u0436\u0438\u043c\u0430\u0435\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043d\u0430 60\u221265%. \u041d\u0430 \u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u0435 \u0441\u0434\u0435\u043b\u0430\u043d \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <a href=\"https:\/\/github.com\/vvo\/gifify\">Gifify<\/a>. \u041d\u0435\u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 GIF \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u0439\u0442\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442 PNG \u0438\u043b\u0438 WebP.<\/li>\n<\/ul>\n<p>  \u0414\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0441\u043c. <a href=\"https:\/\/rigor.com\/wp-content\/uploads\/2017\/03\/TheBookofGIFPDF.pdf\">\u00ab\u041a\u043d\u0438\u0433\u0443 GIF\u00bb<\/a> \u043e\u0442 Rigor.<\/p>\n<p>  <a name=\"25\"><\/a><\/p>\n<h1>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f SVG<\/h1>\n<p>  \u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b SVG \u2014 \u0437\u043d\u0430\u0447\u0438\u0442 \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0432\u0441\u0451 \u043b\u0438\u0448\u043d\u0435\u0435. \u041a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, SVG \u0438\u0437 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0438\u0437\u0431\u044b\u0442\u043e\u0447\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 (\u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0435, \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u0438, \u0441\u043a\u0440\u044b\u0442\u044b\u0435 \u0441\u043b\u043e\u0438 \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435). \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0435\u0451 \u043c\u043e\u0436\u043d\u043e \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u0438\u043b\u0438 \u0441\u0432\u0435\u0441\u0442\u0438 \u043a \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0443, \u043d\u0435 \u0432\u043b\u0438\u044f\u044f \u043d\u0430 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/cb6\/e7e\/747\/cb6e7e747134071886e39623f818a8b1.jpg\"><br \/>  <i><font color=\"gray\">\u0412 \u0441\u0435\u0440\u0432\u0438\u0441\u0435 <a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\">SVGOMG<\/a> \u043e\u0442 \u0414\u0436\u0435\u0439\u043a\u0430 \u0410\u0440\u0447\u0438\u0431\u0430\u043b\u044c\u0434\u0430 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u0440\u0430\u0437\u043d\u044b\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u044b\u043c \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u043e\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0430<\/font><\/i><\/p>\n<h4>\u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0431\u0449\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 SVG (SVGO)<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u041c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u0443\u0439\u0442\u0435 \u0444\u0430\u0439\u043b\u044b SVG \u0438 \u0441\u0436\u0438\u043c\u0430\u0439\u0442\u0435 \u0432 gzip, \u0432\u0435\u0434\u044c SVG \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043d\u0430 XML, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a CSS, HTML \u0438 JavaScript. \u0414\u043b\u044f \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0438\u0445 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0441\u0436\u0430\u0442\u044c.<\/li>\n<li>\u0412\u043c\u0435\u0441\u0442\u043e \u043f\u0443\u0442\u0435\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u0444\u043e\u0440\u043c\u044b SVG, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a <code>&lt;rect&gt;<\/code>, <code>&lt;circle&gt;<\/code>, <code>&lt;ellipse&gt;<\/code>, <code>&lt;line&gt;<\/code> \u0438 <code>&lt;polygon&gt;<\/code>. \u042d\u0442\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442 \u043e\u0431\u044a\u0451\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438 \u0438 \u043e\u0431\u044a\u0451\u043c \u043a\u043e\u0434\u0430 \u0434\u043b\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430 \u0438 \u0440\u0430\u0441\u0442\u0435\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435.<\/li>\n<li>\u0415\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0443\u0442\u0438, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u0438\u0445. \u0423\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u0435 \u0438 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0438\u0442\u0435 \u043a\u0440\u0438\u0432\u044b\u0435 \u0438 \u043f\u0443\u0442\u0438, \u0433\u0434\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e. \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 <a href=\"http:\/\/jlwagner.net\/talks\/these-images\/#\/2\/10\">simplify<\/a> \u0432 Illustrator \u0445\u043e\u0440\u043e\u0448\u043e \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u043b\u0438\u0448\u043d\u0438\u0435 \u0442\u043e\u0447\u043a\u0438 \u0434\u0430\u0436\u0435 \u0432 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0440\u0430\u0431\u043e\u0442\u0430\u0445, \u0441\u0433\u043b\u0430\u0436\u0438\u0432\u0430\u044f \u043d\u0435\u0440\u043e\u0432\u043d\u043e\u0441\u0442\u0438.<\/li>\n<li>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0433\u0440\u0443\u043f\u043f. \u0415\u0441\u043b\u0438 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0443\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u044c \u0438\u0445.<\/li>\n<li>\u0423\u0434\u0430\u043b\u0438\u0442\u0435 \u043d\u0435\u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u0441\u043b\u043e\u0438.<\/li>\n<li>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u0432 Photoshop \u0438 Illustrator. \u041e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0441\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/li>\n<li>\u0412\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u043d\u0430\u043b\u0438\u0447\u0438\u0435 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0442 \u0434\u043b\u044f SVG.<\/li>\n<li>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 SVG, \u0437\u0434\u0435\u0441\u044c \u043d\u0435\u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0432\u0435\u0431-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 <a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\">SVGOMG<\/a> \u0434\u043b\u044f <a href=\"https:\/\/github.com\/svg\/svgo\">SVGO<\/a>. \u0415\u0441\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Sketch, \u0442\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 <a href=\"https:\/\/www.sketchapp.com\/extensions\/plugins\/svgo-compressor\/\">\u043f\u043b\u0430\u0433\u0438\u043d Sketch \u0434\u043b\u044f SVGO<\/a> \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430 \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435.<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d9f\/f9c\/4d9\/d9ff9c4d9f37684e7997d4a4fc3fcfee.jpg\"><br \/>  <i><font color=\"gray\">\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c SVGO \u0432 \u0440\u0435\u0436\u0438\u043c\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 (\u221229% \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430) \u0438 \u043d\u0438\u0437\u043a\u043e\u0439 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 (\u221238%)<\/font><\/i> <\/p>\n<p>  <a href=\"https:\/\/github.com\/svg\/svgo\">SVGO<\/a> \u2014 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 SVG \u043d\u0430 Node. \u041e\u043d \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430, \u043f\u043e\u043d\u0438\u0436\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c \u0447\u0438\u0441\u0435\u043b \u0432 definitions. \u041a\u0430\u0436\u0434\u0430\u044f \u0446\u0438\u0444\u0440\u0430 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0447\u043a\u0438 \u2014 \u043b\u0438\u0448\u043d\u0438\u0439 \u0431\u0430\u0439\u0442, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 (\u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0446\u0438\u0444\u0440) \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430. \u041d\u043e \u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0447\u0435\u043d\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u0435 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u0435\u0442 \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0444\u043e\u0440\u043c\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/928\/573\/607\/9285736076b2d09166f936d1595ffe81.jpg\"><br \/>  <i><font color=\"gray\">\u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c: \u0445\u043e\u0442\u044f SVGO \u043f\u0440\u0435\u0443\u0441\u043f\u0435\u043b \u0432 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0431\u0435\u0437 \u0447\u0440\u0435\u0437\u043c\u0435\u0440\u043d\u043e\u0433\u043e \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u0438\u044f \u043f\u0443\u0442\u0435\u0439 \u0438 \u0444\u043e\u0440\u043c, \u0447\u0430\u0441\u0442\u043e \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0438\u043d\u0430\u0447\u0435. \u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u0442\u0435, \u043a\u0430\u043a \u0441 \u043f\u043e\u043d\u0438\u0436\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043a\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u0431\u043b\u0438\u043a \u043d\u0430 \u0440\u0430\u043a\u0435\u0442\u0435<\/font><\/i><\/p>\n<h4>SVGO \u0438\u0437 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438:<\/h4>\n<p>  SVGO \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/www.npmjs.com\/package\/svgo\">\u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u043a CLI<\/a>, \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u0435\u0442\u0435 \u043a\u043e\u043c\u0430\u043d\u0434\u043d\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<p>  <code>npm i -g svgo<\/code><\/p>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f SVG-\u0444\u0430\u0439\u043b\u0430:<\/p>\n<p>  <code>svgo input.svg -o output.svg<\/code><\/p>\n<p>  \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u0441 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u043e\u0439:<\/p>\n<p>  <code>svgo input.svg --precision=1 -o output.svg<\/code><\/p>\n<p>  \u0421\u043c. <a href=\"https:\/\/github.com\/svg\/svgo\">readme<\/a> \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0441\u043f\u0438\u0441\u043a\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u043c\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432.<\/p>\n<h4>\u041d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u0441\u0436\u0430\u0442\u044c SVG!<\/h4>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ea1\/243\/9dc\/ea12439dcd3c53d5e99931e019593306.jpg\"><\/p>\n<p>  \u041a\u0440\u043e\u043c\u0435 \u0442\u043e\u0433\u043e, \u043d\u0435 \u0437\u0430\u0431\u0443\u0434\u044c\u0442\u0435 <a href=\"https:\/\/calendar.perfplanet.com\/2014\/tips-for-optimising-svg-delivery-for-the-web\/\">\u0437\u0430\u0437\u0438\u043f\u043e\u0432\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b SVG<\/a> \u0438\u043b\u0438 \u0432\u044b\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u043f\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u0443 Brotli. \u0422\u0435\u043a\u0441\u0442\u043e\u0432\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0431\u0443\u0434\u0435\u0442 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u043e \u0441\u0436\u0438\u043c\u0430\u0442\u044c\u0441\u044f (~50% \u043e\u0442 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430).<\/p>\n<p>  \u041a\u043e\u0433\u0434\u0430 Google \u0432\u044b\u043f\u0443\u0441\u0442\u0438\u043b\u0430 \u043d\u043e\u0432\u044b\u0439 \u043b\u043e\u0433\u043e\u0442\u0438\u043f, \u043c\u044b \u043e\u0431\u044a\u044f\u0432\u0438\u043b\u0438, \u0447\u0442\u043e \u0435\u0433\u043e <a href=\"https:\/\/twitter.com\/addyosmani\/status\/638753485555671040\">\u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f<\/a> \u0432\u0435\u0440\u0441\u0438\u044f \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u0432\u0441\u0435\u0433\u043e 305 \u0431\u0430\u0439\u0442.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/817\/219\/f48\/817219f4818aab93aa611df402f5db60.jpg\"><\/p>\n<p>  \u0415\u0441\u0442\u044c <a href=\"https:\/\/www.clicktorelease.com\/blog\/svg-google-logo-in-305-bytes\/\">\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0434\u0432\u0438\u043d\u0443\u0442\u044b\u0445 \u0442\u0440\u044e\u043a\u043e\u0432<\/a>, \u0447\u0442\u043e\u0431\u044b \u0435\u0449\u0451 \u0441\u0438\u043b\u044c\u043d\u0435\u0435 \u0443\u0436\u0430\u0442\u044c \u0444\u0430\u0439\u043b (\u0432\u043f\u043b\u043e\u0442\u044c \u0434\u043e 146 \u0431\u0430\u0439\u0442)! <\/p>\n<h4>SVG-\u0441\u043f\u0440\u0430\u0439\u0442\u044b<\/h4>\n<p>  SVG <a href=\"https:\/\/css-tricks.com\/icon-fonts-vs-svg\/\">\u043e\u0442\u043b\u0438\u0447\u043d\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442<\/a> \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a, \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0432 \u0432\u0438\u0434\u0435 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u0431\u0435\u0437 \u0438\u0437\u0432\u043e\u0440\u043e\u0442\u043b\u0438\u0432\u044b\u0445 \u043e\u0431\u0445\u043e\u0434\u043d\u044b\u0445 \u043f\u0443\u0442\u0435\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0445 \u0434\u043b\u044f \u0448\u0440\u0438\u0444\u0442\u043e\u0432. \u0423 \u043d\u0435\u0433\u043e \u043b\u0443\u0447\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u0441\u0442\u0438\u043b\u0435\u0439 CSS, \u0447\u0435\u043c \u0432 \u0448\u0440\u0438\u0444\u0442\u0430\u0445 (\u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 SVG stroke), \u043b\u0443\u0447\u0448\u0438\u0439 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044c \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f (\u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0441 \u043f\u0441\u0435\u0432\u0434\u043e\u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u0438 <code>display<\/code>) \u0438 SVG \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043b\u0443\u0447\u0448\u0435 <a href=\"http:\/\/www.sitepoint.com\/tips-accessible-svg\/\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445<\/a>.<\/p>\n<p>  \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/github.com\/jkphl\/svg-sprite\">svg-sprite<\/a> \u0438 <a href=\"https:\/\/icomoon.io\/\">IcoMoon<\/a> \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u0443\u044e\u0442 \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0435 SVG \u0432 \u0441\u043f\u0440\u0430\u0439\u0442\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0432 <a href=\"https:\/\/css-tricks.com\/css-sprites\/\">CSS Sprite<\/a>, <a href=\"https:\/\/css-tricks.com\/svg-use-with-external-reference-take-2\">Symbol Sprite<\/a> \u0438\u043b\u0438 <a href=\"http:\/\/simurai.com\/blog\/2012\/04\/02\/svg-stacks\">Stacked Sprite<\/a>. \u0421\u0442\u043e\u0438\u0442 \u0438\u0437\u0443\u0447\u0438\u0442\u044c <a href=\"https:\/\/una.im\/svg-icons\/#%F0%9F%92%81\">\u043f\u0440\u0430\u043a\u0442\u0438\u0447\u043d\u044b\u0435 \u0441\u043e\u0432\u0435\u0442\u044b<\/a> \u043e\u0442 \u0423\u043d\u044b \u041a\u0440\u0430\u0432\u0435\u0446, \u043a\u0430\u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c gulp-svg-sprite \u0432 \u0440\u0430\u0431\u043e\u0447\u0435\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0435. \u0421\u0430\u0440\u0430 \u0421\u0443\u0434\u0435\u0438\u043d \u0432 \u0441\u0432\u043e\u0451\u043c \u0431\u043b\u043e\u0433\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 <a href=\"https:\/\/www.sarasoueidan.com\/blog\/icon-fonts-to-svg\/\">\u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 \u0448\u0440\u0438\u0444\u0442\u043e\u0432 \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043e\u043a \u043a SVG<\/a>.<\/p>\n<h4>\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u044b<\/h4>\n<p>  <a href=\"https:\/\/calendar.perfplanet.com\/2014\/tips-for-optimising-svg-delivery-for-the-web\/\">\u0421\u043e\u0432\u0435\u0442\u044b \u0421\u0430\u0440\u044b \u0421\u043e\u0443\u044d\u0439\u0434\u0430\u043d \u043f\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432\u044b\u0434\u0430\u0447\u0438 SVG<\/a> \u0438 <a href=\"https:\/\/abookapart.com\/products\/practical-svg\">\u00ab\u041f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u043a\u043d\u0438\u0433\u0430 \u043f\u043e SVG\u00bb<\/a> \u041a\u0440\u0438\u0441\u0430 \u041a\u043e\u0439\u0435\u0440\u0430 \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u043d\u044b. \u042f \u043d\u0430\u0448\u0451\u043b \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c\u0438 \u0441\u0442\u0430\u0442\u044c\u0438 \u0410\u043d\u0434\u0440\u0435\u0430\u0441\u0430 \u041b\u0430\u0440\u0441\u0435\u043d\u0430 \u043e\u0431 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 SVG (<a href=\"https:\/\/medium.com\/larsenwork-andreas-larsen\/optimising-svgs-for-web-use-part-1-67e8f2d4035\">\u0447\u0430\u0441\u0442\u044c 1<\/a>, <a href=\"https:\/\/medium.com\/larsenwork-andreas-larsen\/optimising-svgs-for-web-use-part-2-6711cc15df46\">\u0447\u0430\u0441\u0442\u044c 2<\/a>). \u041c\u043e\u0433\u0443 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u044c\u044e <a href=\"https:\/\/medium.com\/sketch-app-sources\/preparing-and-exporting-svg-icons-in-sketch-1a3d65b239bb\">\u00ab\u041f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430 \u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442 \u0437\u043d\u0430\u0447\u043a\u043e\u0432 SVG \u0432 Sketch\u00bb<\/a>.<\/p>\n<p>  <a name=\"26\"><\/a><\/p>\n<h1>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0436\u0430\u0442\u0438\u044f \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430<\/h1>\n<p>  \u0421\u0436\u0438\u043c\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0430. \u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0436\u0430\u0442\u0438\u0435 \u0447\u0440\u0435\u0432\u0430\u0442\u043e \u043d\u0435\u043f\u0440\u0438\u044f\u0442\u043d\u044b\u043c\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f\u043c\u0438. \u041f\u0440\u0435\u0434\u043f\u043e\u043b\u043e\u0436\u0438\u043c, \u0432\u044b \u0431\u0435\u0440\u0435\u0442\u0435 JPEG, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u0436\u0435 \u0441\u0436\u0430\u0442 \u0441 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c 60. \u0415\u0441\u043b\u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0441\u0436\u0430\u0442\u044c \u0435\u0433\u043e \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0445\u0443\u0436\u0435. \u041a\u0430\u0436\u0434\u044b\u0439 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0443\u043d\u0434 \u0441\u0436\u0430\u0442\u0438\u044f \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u0442 \u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043f\u043e\u0442\u0435\u0440\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0443\u0434\u0430\u043b\u044f\u0435\u0442\u0441\u044f, \u0430 \u0430\u0440\u0442\u0435\u0444\u0430\u043a\u0442\u044b \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u044e\u0442\u0441\u044f. \u0414\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0432\u044b \u043f\u0435\u0440\u0435\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u0441 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430\u043c\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u044d\u0442\u043e\u0439 \u043b\u043e\u0432\u0443\u0448\u043a\u0438, <b>\u0441\u0440\u0430\u0437\u0443 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e<\/b>, \u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0435 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u044e \u0441 \u0441\u0430\u043c\u043e\u0433\u043e \u043d\u0430\u0447\u0430\u043b\u0430. \u0417\u0430\u0442\u0435\u043c \u0432\u044b \u043d\u0435 \u043f\u043e\u0439\u0434\u0451\u0442\u0435 \u043d\u0430 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u043f\u0435\u0440\u0435\u0436\u0430\u0442\u0438\u0435, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043b\u044e\u0431\u043e\u0435 \u0441\u0436\u0430\u0442\u0438\u0435 \u0444\u0430\u0439\u043b\u0430 \u0441 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u043f\u043b\u043e\u0445\u043e, \u0445\u043e\u0442\u044f \u0438 \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0444\u0430\u0439\u043b\u0430.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fa9\/6dc\/866\/fa96dc866135f21f0a9bfe022ab8211f.jpg\"><br \/>  <i><font color=\"gray\">\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0437 <a href=\"https:\/\/www.youtube.com\/watch?v=w7vXJbLhTyI\">\u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u0432\u0438\u0434\u0435\u043e<\/a> \u0438 <a href=\"http:\/\/cloudinary.com\/blog\/why_jpeg_is_like_a_photocopier\">\u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438<\/a> \u0414\u0436\u043e\u043d\u0430 \u0421\u043d\u0435\u0439\u0435\u0440\u0441\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u043b\u0438\u044f\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0436\u0430\u0442\u0438\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445. \u0421 \u0442\u0430\u043a\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u043e\u0439 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f, \u0435\u0441\u043b\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0442\u044c (\u0443\u0436\u0435 \u0441\u0436\u0430\u0442\u044b\u0435) \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438\u0437 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u0435\u0442\u0435\u0439 \u0438 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0445 (\u0441 \u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u043c \u0441\u0436\u0430\u0442\u0438\u0435\u043c). \u041f\u043e\u0442\u0435\u0440\u044f \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043d\u0430\u0440\u0430\u0441\u0442\u0430\u0435\u0442<\/font><\/i><\/p>\n<p>  MozJPEG (\u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0441\u043b\u0443\u0447\u0430\u0439\u043d\u043e) \u0431\u043e\u043b\u0435\u0435 \u0443\u0441\u0442\u043e\u0439\u0447\u0438\u0432 \u043a \u0442\u0430\u043a\u043e\u0439 \u0434\u0435\u0433\u0440\u0430\u0434\u0430\u0446\u0438\u0438 \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0442\u0440\u0435\u043b\u043b\u0438\u0441-\u043a\u0432\u0430\u043d\u0442\u043e\u0432\u0430\u043d\u0438\u044e. \u0412\u043c\u0435\u0441\u0442\u043e \u0441\u0436\u0430\u0442\u0438\u044f \u0432\u0441\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 DCT \u043a\u0430\u043a \u0435\u0441\u0442\u044c \u043e\u043d \u0438\u0449\u0435\u0442 \u0431\u043b\u0438\u0437\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0435 +1\/-1, \u0447\u0442\u043e\u0431\u044b \u0441\u0436\u0430\u0442\u044c \u0438\u0445 \u0432 \u043c\u0435\u043d\u044c\u0448\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0438\u0442. FLIF \u0441 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0445\u0430\u043a, \u043f\u043e\u0445\u043e\u0436\u0438\u0439 \u043d\u0430 PNG \u0441 \u043f\u043e\u0442\u0435\u0440\u0435\u0439 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430, \u0433\u0434\u0435 \u043f\u0435\u0440\u0435\u0434 (\u043f\u043e\u0432\u0442\u043e\u0440\u043d\u044b\u043c) \u0441\u0436\u0430\u0442\u0438\u0435\u043c \u043a\u043e\u0434\u0435\u043a \u0430\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u0434\u0430\u043d\u043d\u044b\u0435 \u0438 \u0440\u0435\u0448\u0430\u0435\u0442, \u0447\u0442\u043e \u0432\u044b\u0431\u0440\u043e\u0441\u0438\u0442\u044c.<\/p>\n<p>  <b>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u0435 \u0438\u0445 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, PNG \u0438\u043b\u0438 TIFF, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e<\/b>. \u0417\u0430\u0442\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0441\u0431\u043e\u0440\u043a\u0438 \u0438\u043b\u0438 \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u043e\u0440\u044b \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u044f\u0442 \u0441\u0436\u0430\u0442\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u0432\u044b \u043e\u0442\u0434\u0430\u0434\u0438\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043f\u043e\u0442\u0435\u0440\u044f\u043c\u0438 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435.<\/p>\n<p>  <a name=\"27\"><\/a><\/p>\n<h1>\u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u043d\u0435\u043d\u0443\u0436\u043d\u044b\u0445 \u0440\u0430\u0441\u0445\u043e\u0434\u043e\u0432 \u043d\u0430 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430<\/h1>\n<p>  \u0412\u0441\u0435 \u043c\u044b \u043e\u0442\u0434\u0430\u0432\u0430\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441\u043e \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u0417\u0430 \u044d\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043b\u0430\u0442\u0438\u0442\u044c. \u0414\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u2014 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u043d\u0430 \u043e\u0431\u044b\u0447\u043d\u043e\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0438\u043a\u0435. \u0415\u0441\u043b\u0438 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u0443\u044f \u0438\u0445 \u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0430\u043c\u0438 CSS \u0438\u043b\u0438 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u0430\u043c\u0438 \u0448\u0438\u0440\u0438\u043d\u044b\/\u0432\u044b\u0441\u043e\u0442\u044b, \u0442\u043e \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u0430\u043a \u044d\u0442\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/750\/7de\/e00\/7507dee00658db123ac3a0519cbacd86.jpg\"><br \/>  <i><font color=\"gray\">\u041a\u043e\u0433\u0434\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0438\u0437 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, JPEG) \u0432 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438. \u0427\u0430\u0441\u0442\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0448\u0438\u0440\u0438\u043d\u0430 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u0430 \u0432 \u043f\u0440\u043e\u0446\u0435\u043d\u0442\u0430\u0445). \u0414\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u2014 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u043c\u0435\u0434\u043b\u044f\u044e\u0442 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433<\/font><\/i><\/p>\n<p>  \u0412 \u0438\u0434\u0435\u0430\u043b\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u043e\u0442\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0434\u043b\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\"><code>srcset\/sizes<\/code><\/a>\u00a0\u2014 \u0432 \u0431\u043b\u0438\u0436\u0430\u0439\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c <code>srcset<\/code>.<\/p>\n<p>  \u041f\u0440\u043e\u043f\u0443\u0441\u043a \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u0432 <code>width<\/code> \u0438\u043b\u0438 <code>height<\/code> \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0411\u0435\u0437 \u043d\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u0440\u0438\u0441\u0432\u0430\u0438\u0432\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044e \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0443\u044e \u043e\u0431\u043b\u0430\u0441\u0442\u044c-\u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c, \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0431\u0430\u0439\u0442 \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432. \u0412 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0443 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u043e\u0439 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 reflow.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ebb\/33b\/9ab\/ebb33b9abfffafce7253dffa0c637175.jpg\"><br \/>  <i><font color=\"gray\">\u0411\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0438\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0448\u0430\u0433\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435. \u041f\u043e\u043b\u0443\u0447\u0438\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u0435\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440. \u042d\u0442\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c \u043d\u0430 <a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/evaluate-performance\/performance-reference\">\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0448\u043a\u0430\u043b\u0435<\/a> Chrome DevTools<\/font><\/i> <\/p>\n<p>  \u0411\u043e\u043b\u044c\u0448\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442 \u043f\u0430\u043c\u044f\u0442\u044c: \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043f\u043e 4 \u0431\u0430\u0439\u0442\u0430 \u043d\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u044c \u043f\u043e\u0441\u043b\u0435 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u044b, \u0442\u043e \u043c\u043e\u0436\u0435\u0442\u0435 \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u0435\u0441\u0438\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440; \u043d\u0430 \u043d\u0438\u0437\u043a\u043e\u0431\u044e\u0434\u0436\u0435\u0442\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0441\u043b\u043e\u0436\u043d\u043e \u0434\u043e\u0432\u0435\u0441\u0442\u0438 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u0434\u043e \u0441\u0432\u043e\u043f\u0430. \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0441\u043b\u0435\u0434\u0438\u0442\u0435 \u0437\u0430 \u0438\u0437\u0434\u0435\u0440\u0436\u043a\u0430\u043c\u0438 \u043d\u0430 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0438 \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/97b\/2cb\/a04\/97b2cba04d8de16112c91508bfe387f1.jpg\"><br \/>  <i><font color=\"gray\">\u0414\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0451\u043c\u043a\u0438\u043c \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u0441\u0440\u0435\u0434\u043d\u0435\u0433\u043e \u0438 \u043d\u0438\u0436\u043d\u0435\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043e\u043d\u043e \u0432 5 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0437 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u0447\u0435\u043c \u043d\u0430 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u0435<\/font><\/i> <\/p>\n<p>  \u041f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043d\u043e\u0432\u043e\u0439 <a href=\"https:\/\/medium.com\/@paularmstrong\/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3\">\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0438\u0438<\/a> Twitter \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0432\u044b\u0441\u0438\u043b \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b. \u0414\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u043d\u0438\u0437\u0438\u043b\u043e\u0441\u044c \u0441 \u043e\u0442 ~400\u00a0\u043c\u0441 \u0434\u043e ~19\u00a0\u043c\u0441!<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/695\/cfe\/d7c\/695cfed7c10f6fde08830c7783c874a5.jpg\"><br \/>  <i><font color=\"gray\">\u041f\u0430\u043d\u0435\u043b\u044c Timeline\/Performance \u0432 Chrome DevTools \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0432\u0440\u0435\u043c\u044f \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 Twitter Lite \u0434\u043e \u0438 \u043f\u043e\u0441\u043b\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/font><\/i> <\/p>\n<p>  <a name=\"28\"><\/a><\/p>\n<h2>\u0414\u043e\u0441\u0442\u0430\u0432\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 HiDPI \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>srcset<\/code><\/h2>\n<p>  \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0445\u043e\u0434\u0438\u0442\u044c \u043d\u0430 \u0441\u0430\u0439\u0442 \u0447\u0435\u0440\u0435\u0437 \u0440\u0430\u0437\u043d\u044b\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0438 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f. <a href=\"https:\/\/stackoverflow.com\/a\/21413366\">\u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430<\/a> (DPR) (\u0442\u0430\u043a\u0436\u0435 \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u043e\u0435 \u00ab\u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 CSS\u00bb) \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0430\u043a CSS \u0434\u043e\u043b\u0436\u0435\u043d \u0438\u043d\u0442\u0435\u0440\u043f\u0440\u0435\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u044d\u043a\u0440\u0430\u043d\u0430. \u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442 DPR \u0441\u043e\u0437\u0434\u0430\u043d \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044f\u043c\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u043e\u0432, \u0447\u0442\u043e\u0431\u044b \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438 \u0440\u0435\u0437\u043a\u043e\u0441\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432, \u043d\u0435 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b.<\/p>\n<p>  \u0414\u043b\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c. \u041d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430\u043c\u0438 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043e\u0442\u0434\u0430\u044e\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0447\u0451\u0442\u043a\u043e\u0441\u0442\u0438 (\u0441 DPR 2\u00d7, 3\u00d7), \u0430 \u043d\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0435 \u044d\u043a\u0440\u0430\u043d\u044b\u00a0\u2014 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 DPR 2\u00d7 \u0438 3\u00d7 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0442\u044f\u0436\u0435\u043b\u0435\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d00\/ca2\/7b1\/d00ca27b1325ed096734db4e125cdf31.jpg\"><br \/>  <i><font color=\"gray\">\u0421\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430: \u043c\u043d\u043e\u0433\u0438\u0435 \u0441\u0430\u0439\u0442\u044b \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u044e\u0442 DPR \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/material.io\/devices\/\">material.io<\/a> \u0438 <a href=\"https:\/\/mydevice.io\/devices\/\">mydevice.io<\/a><\/font><\/i><\/p>\n<p>  <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\">srcset<\/a> \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u0432\u044b\u0431\u0440\u0430\u0442\u044c \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0437\u044f\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 2\u00d7 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u0441 DPR 2\u00d7. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0431\u0435\u0437 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 <code>srcset<\/code> \u043c\u043e\u0433\u0443\u0442 \u0432\u0437\u044f\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u044b\u0439 <code>src<\/code>, \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u0432 \u0442\u0435\u0433\u0435 <code>&lt;img&gt;<\/code>.<\/p>\n<pre><code class=\"html\">&lt;img srcset=\"paul-irish-320w.jpg,              paul-irish-640w.jpg 2x,              paul-irish-960w.jpg 3x\"      src=\"paul-irish-960w.jpg\" alt=\"Paul Irish cameo\"&gt;<\/code><\/pre>\n<p>  CDN \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432\u0440\u043e\u0434\u0435 <a href=\"http:\/\/cloudinary.com\/blog\/how_to_automatically_adapt_website_images_to_retina_and_hidpi_devices\">Cloudinary<\/a> \u0438 <a href=\"https:\/\/docs.imgix.com\/apis\/url\/dpr\">Imgix<\/a> \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 DPR \u0434\u043b\u044f \u0432\u044b\u0434\u0430\u0447\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u0438\u0437 \u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0430.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0443\u0437\u043d\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0438 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445 \u043c\u043e\u0436\u043d\u043e \u0432 \u044d\u0442\u043e\u043c <a href=\"https:\/\/www.udacity.com\/course\/responsive-images--ud882\">\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u043e\u043c \u043a\u0443\u0440\u0441\u0435 Udacity<\/a> \u0438 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/images\">\u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043f\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c<\/a> \u043d\u0430 Web Fundamentals.<\/p><\/blockquote>\n<p>  \u041d\u0430\u043f\u043e\u043c\u0438\u043d\u0430\u044e, \u0447\u0442\u043e <a href=\"https:\/\/www.smashingmagazine.com\/2016\/01\/leaner-responsive-images-client-hints\/\">Client Hints<\/a> \u2014 \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044e \u0432\u0441\u0435\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 DPR \u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0432 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0435. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043a HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u0443, \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0431-\u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u044b\u0431\u0440\u0430\u043b \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044f\u0449\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430.<\/p>\n<p>  <a name=\"29\"><\/a><\/p>\n<h2>\u0425\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n<p>  \u0425\u043e\u0442\u044f \u0432\u044b\u0431\u043e\u0440 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0432\u0430\u0436\u0435\u043d, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0430\u0439\u0442\u044b \u0434\u0443\u043c\u0430\u044e\u0442 \u0435\u0449\u0451 \u043e \u043a\u0440\u0430\u0441\u043e\u0442\u0435. \u0415\u0441\u043b\u0438 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u0438\u0439 \u044d\u043a\u0440\u0430\u043d, \u043c\u043e\u0436\u043d\u043e \u043e\u0431\u0440\u0435\u0437\u0430\u0442\u044c \u0438\u043b\u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u2014 \u0438 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u043d\u0430\u0447\u0435, \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e. \u0425\u043e\u0442\u044f <a href=\"http:\/\/usecases.responsiveimages.org\/#art-direction\">\u0445\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435<\/a> (art direction) \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0438, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0435\u0440\u0432\u0438\u0441\u044b \u0432\u0440\u043e\u0434\u0435 <a href=\"http:\/\/cloudinary.com\/blog\/automatically_art_directed_responsive_images%20\">Cloudinary<\/a> \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 API-\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u0438\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/812\/9d1\/081\/8129d10818e6ffb6cae71fca47a071fb.jpg\"><br \/>  <i><font color=\"gray\">\u042d\u0440\u0438\u043a \u041f\u043e\u0440\u0442\u0438\u0441 \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 <a href=\"https:\/\/ericportis.com\/etc\/cloudinary\/\">\u043f\u0440\u0438\u043c\u0435\u0440<\/a>, \u043a\u0430\u043a \u0442\u0432\u043e\u0440\u0447\u0435\u0441\u043a\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0412 \u044d\u0442\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0438\u0441\u0442\u0438\u043a\u0438 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043e\u0431\u044a\u0435\u043a\u0442\u0430 \u043d\u0430 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e<\/font><\/i> <\/p>\n<p>  <a name=\"30\"><\/a><\/p>\n<h1>\u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u043c<\/h1>\n<p>  \u0426\u0432\u0435\u0442 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043c\u0438\u043d\u0438\u043c\u0443\u043c \u0441 \u0442\u0440\u0451\u0445 \u043f\u0435\u0440\u0441\u043f\u0435\u043a\u0442\u0438\u0432: \u0431\u0438\u043e\u043b\u043e\u0433\u0438\u044f, \u0444\u0438\u0437\u0438\u043a\u0430 \u0438 \u043f\u0435\u0447\u0430\u0442\u044c. \u0412 \u0431\u0438\u043e\u043b\u043e\u0433\u0438\u0438 \u0446\u0432\u0435\u0442 \u2014 <a href=\"http:\/\/hubel.med.harvard.edu\/book\/ch8.pdf\">\u0444\u0435\u043d\u043e\u043c\u0435\u043d \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f<\/a>. \u041e\u0431\u044a\u0435\u043a\u0442\u044b \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442 \u0441\u0432\u0435\u0442 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0446\u0438\u044f\u0445 \u0434\u043b\u0438\u043d \u0432\u043e\u043b\u043d. \u0421\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u0440\u0435\u0446\u0435\u043f\u0442\u043e\u0440\u044b \u0432 \u0433\u043b\u0430\u0437\u0430\u0445 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u044f\u0442 \u044d\u0442\u0438 \u0432\u043e\u043b\u043d\u044b \u0432 \u043e\u0449\u0443\u0449\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u0430. \u0412 \u0444\u0438\u0437\u0438\u043a\u0435 \u0432\u0430\u0436\u043d\u044b \u0447\u0430\u0441\u0442\u043e\u0442\u044b \u0432\u043e\u043b\u043d \u0438 \u044d\u043d\u0435\u0440\u0433\u0438\u044f (\u044f\u0440\u043a\u043e\u0441\u0442\u044c). \u041f\u0435\u0447\u0430\u0442\u044c \u2014 \u044d\u0442\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043e \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u043c \u043e\u0445\u0432\u0430\u0442\u0435, \u043a\u0440\u0430\u0441\u043a\u0430\u0445 \u0438 \u0445\u0443\u0434\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u044f\u0445.<\/p>\n<p>  \u0412 \u0438\u0434\u0435\u0430\u043b\u0435, \u0432\u0441\u0435 \u044d\u043a\u0440\u0430\u043d\u044b \u0438 \u0432\u0435\u0431-\u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0432 \u043c\u0438\u0440\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0432 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0446\u0432\u0435\u0442. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a. \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u043c \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0434\u043e\u0441\u0442\u0438\u0447\u044c \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441\u0430 \u0432 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0446\u0432\u0435\u0442\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439, \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 \u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439.<\/p>\n<h3>\u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<\/h3>\n<p>  <a href=\"https:\/\/en.wikipedia.org\/wiki\/Gamma_correction\">\u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438<\/a>\u00a0\u2014 \u044d\u0442\u043e \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u043d\u043e\u0433\u043e \u0441\u043f\u0435\u043a\u0442\u0440\u0430 \u0438\u0437 \u043c\u0435\u043d\u044c\u0448\u0435\u0433\u043e \u043d\u0430\u0431\u043e\u0440\u0430 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0446\u0432\u0435\u0442\u043e\u0432. \u0415\u0441\u0442\u044c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0442\u0438\u043f\u044b \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430\u043c\u0438. \u0412 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\u0445 \u043c\u0435\u043d\u044c\u0448\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0449\u0438\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432, \u0447\u0435\u043c \u0432 \u0434\u0440\u0443\u0433\u0438\u0445\u00a0\u2014 \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f \u0432\u0441\u0435\u0445 \u043e\u0442\u0442\u0435\u043d\u043a\u043e\u0432 \u0441\u0435\u0440\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0434\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u043c\u0435\u0436\u0434\u0443 \u0447\u0451\u0440\u043d\u044b\u043c \u0438 \u0431\u0435\u043b\u044b\u043c.<\/p>\n<p>  \u0414\u0432\u0430 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0445 \u0442\u0438\u043f\u0430 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u2014 \u0430\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0438 \u0441\u0443\u0431\u0442\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435. \u0410\u0434\u0434\u0438\u0442\u0438\u0432\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0442\u0438\u043f\u0430 RGB \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442 \u0446\u0432\u0435\u0442 \u0441\u0432\u0435\u0447\u0435\u043d\u0438\u0435\u043c, \u0430 \u0441\u0443\u0431\u0442\u0440\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0435 \u0442\u0438\u043f\u0430 CMYK \u2014 \u043e\u0442\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c (\u0432\u044b\u0447\u0438\u0442\u0430\u043d\u0438\u0435\u043c).<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/831\/b9c\/52c\/831b9c52cc2059f46e5c63ba3c6d5624.jpg\"><br \/>  <i><font color=\"gray\">\u0412 RGB \u043a\u0440\u0430\u0441\u043d\u044b\u0439, \u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0438 \u0441\u0438\u043d\u0438\u0439 \u0441\u0432\u0435\u0442 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u044f\u0445 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0448\u0438\u0440\u043e\u043a\u043e\u0433\u043e \u0441\u043f\u0435\u043a\u0442\u0440\u0430 \u0446\u0432\u0435\u0442\u043e\u0432. CMYK (\u0446\u0438\u0430\u043d, \u043c\u0430\u0434\u0436\u0435\u043d\u0442\u0430, \u0436\u0451\u043b\u0442\u044b\u0439 \u0438 \u0447\u0451\u0440\u043d\u044b\u0439) \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0447\u0435\u0440\u043d\u0438\u043b\u0430\u043c\u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u0430, \u043e\u0442\u043d\u0438\u043c\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0431\u0435\u043b\u043e\u0433\u043e \u0441\u043f\u0435\u043a\u0442\u0440\u0430 \u0431\u0443\u043c\u0430\u0433\u0438<\/font><\/i><\/p>\n<p>  \u0421\u0442\u0430\u0442\u044c\u044f <a href=\"https:\/\/www.designersinsights.com\/designer-resources\/understanding-color-models\/\">\u00ab\u041f\u043e\u043d\u044f\u0442\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u0435\u0439 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c \u0446\u0432\u0435\u0442\u0430\u00bb<\/a> \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0440\u0435\u0436\u0438\u043c\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a HSL, HSV \u0438 LAB.<\/p>\n<h1>\u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430<\/h1>\n<p>  <a href=\"http:\/\/www.dpbestflow.org\/color\/color-space-and-color-profiles#space\">\u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430<\/a> \u2014 \u044d\u0442\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0446\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0434\u043b\u044f \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0434\u043e 16,7 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0446\u0432\u0435\u0442\u043e\u0432, \u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0442 \u0441\u0443\u0437\u0438\u0442\u044c \u0438\u043b\u0438 \u0440\u0430\u0441\u0448\u0438\u0440\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0447\u0438\u0442\u0430\u044e\u0442, \u0447\u0442\u043e \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438 \u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u043e \u0438 \u0442\u043e \u0436\u0435.<\/p>\n<p>  <a href=\"https:\/\/en.wikipedia.org\/wiki\/SRGB\">sRGB<\/a> \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 RGB \u043a\u0430\u043a <a href=\"https:\/\/www.w3.org\/Graphics\/Color\/sRGB.html\">\u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442<\/a> \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430. \u042d\u0442\u043e \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043e\u0431\u044b\u0447\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u044e\u0442 \u043d\u0430\u0438\u043c\u0435\u043d\u044c\u0448\u0438\u043c \u043e\u0431\u0449\u0438\u043c \u0437\u043d\u0430\u043c\u0435\u043d\u0430\u0442\u0435\u043b\u0435\u043c \u0438 \u0441\u0430\u043c\u044b\u043c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u043c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0414\u0440\u0443\u0433\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Adobe_RGB_color_space\">Adobe RGB<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/en.wikipedia.org\/wiki\/ProPhoto_RGB_color_space\">ProPhoto RGB<\/a>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0435 \u0432 Photoshop \u0438 Lightroom) \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u0430, \u043d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 sRGB \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445, \u0438\u0433\u0440\u0430\u0445 \u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430\u0445, \u043e\u0431\u044b\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0438\u043c\u0435\u043d\u043d\u043e \u0435\u0433\u043e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/6dd\/0bf\/4f0\/6dd0bf4f0a627d651a95f94ba30a4d26.jpg\"><br \/>  <i><font color=\"gray\">\u0412\u0438\u0437\u0443\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0433\u0430\u043c\u043c\u044b \u2014 \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u0430 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435<\/font><\/i><\/p>\n<p>  \u0412 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0440\u0438 \u043a\u0430\u043d\u0430\u043b\u0430 (\u043a\u0440\u0430\u0441\u043d\u044b\u0439, \u0437\u0435\u043b\u0451\u043d\u044b\u0439 \u0438 \u0441\u0438\u043d\u0438\u0439), \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e 255 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 8-\u0431\u0438\u0442\u043d\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435, \u0447\u0442\u043e \u0434\u0430\u0451\u0442 16,7 \u043c\u0438\u043b\u043b\u0438\u043e\u043d\u0430 \u0446\u0432\u0435\u0442\u043e\u0432. 16-\u0431\u0438\u0442\u043d\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441\u043f\u043e\u0441\u0431\u043e\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0442\u0440\u0438\u043b\u043b\u0438\u043e\u043d\u044b \u0446\u0432\u0435\u0442\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a55\/90d\/d1b\/a5590dd1bf6c059ec89e984d0108f878.jpg\"><br \/>  <i><font color=\"gray\">\u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 sRGB, Adobe RGB \u0438 ProPhoto RGB \u043d\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0441 <a href=\"https:\/\/yardstick.pictures\/tags\/img%3Adci-p3\">Yardstick<\/a>. \u041d\u0435\u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e \u0442\u0440\u0443\u0434\u043d\u043e \u043f\u0440\u043e\u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u044e, \u0435\u0441\u043b\u0438 \u0432\u0430\u0448 \u044d\u043a\u0440\u0430\u043d \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0446\u0432\u0435\u0442\u0430 sRGB. \u041f\u0440\u0438 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u043e\u0431\u044b\u0447\u043d\u043e\u0439 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u0432 sRGB \u0438 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0433\u0430\u043c\u043c\u0435 \u0432\u0441\u0451 \u0431\u0443\u0434\u0435\u0442 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e, \u043a\u0440\u043e\u043c\u0435 \u0441\u0430\u043c\u044b\u0445 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u044b\u0445 \u00ab\u0441\u043e\u0447\u043d\u044b\u0445\u00bb \u0446\u0432\u0435\u0442\u043e\u0432<\/font><\/i><\/p>\n<p>  \u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u0441\u0432\u043e\u0435\u0439 \u0433\u0430\u043c\u043c\u043e\u0439 (\u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d \u0446\u0432\u0435\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043d\u0438 \u043c\u043e\u0433\u0443\u0442 \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u044c \u0441 \u043e\u0442\u0442\u0435\u043d\u043a\u0430\u043c\u0438), \u0441\u043f\u0435\u043a\u0442\u0440\u043e\u043c \u0438 <a href=\"http:\/\/blog.johnnovak.net\/2016\/09\/21\/what-every-coder-should-know-about-gamma\/\">\u0433\u0430\u043c\u043c\u0430-\u043a\u0440\u0438\u0432\u043e\u0439<\/a>. sRGB \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 20% \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c Adobe RGB, ProPhoto RGB <a href=\"http:\/\/www.petrvodnakphotography.com\/Articles\/ColorSpace.htm\">\u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u043d\u0430 50% \u0448\u0438\u0440\u0435<\/a>, \u0447\u0435\u043c Adobe RGB. \u0424\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0438 \u0432\u044b\u0448\u0435 \u0432\u0437\u044f\u0442\u044b \u0441 <a href=\"http:\/\/clippingpathzone.com\/blog\/essential-photoshop-color-settings-for-photographers\">Clipping Path<\/a>.<\/p>\n<p>  <a href=\"http:\/\/www.astramael.com\/\">\u0428\u0438\u0440\u043e\u043a\u0430\u044f \u0433\u0430\u043c\u043c\u0430<\/a> (wide-gamut)\u00a0\u2014 \u044d\u0442\u043e \u0442\u0435\u0440\u043c\u0438\u043d, \u043e\u0437\u043d\u0430\u0447\u0430\u044e\u0449\u0438\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430 \u0448\u0438\u0440\u0435 sRGB. \u0422\u0430\u043a\u0438\u0435 \u0442\u0438\u043f\u044b \u0434\u0438\u0441\u043f\u043b\u0435\u0435\u0432 \u0441\u0442\u0430\u043d\u043e\u0432\u044f\u0442\u0441\u044f \u0432\u0441\u0451 \u0431\u043e\u043b\u0435\u0435 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u043c\u0438. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u043c\u043d\u043e\u0433\u0438\u0435 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0435 \u0434\u0438\u0441\u043f\u043b\u0435\u0438 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043b\u0443\u0447\u0448\u0435 sRGB. \u041f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u0434\u043b\u044f \u0432\u0435\u0431\u0430 \u0432 Photoshop \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u043f\u0446\u0438\u044e \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0432 sRGB, \u0435\u0441\u043b\u0438 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u043d\u0430 \u0434\u0438\u0441\u043f\u043b\u0435\u0438 \u0441 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0433\u0430\u043c\u043c\u043e\u0439.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u041f\u0440\u0438 \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u043c\u0438 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 sRGB \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430. \u041e\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u0430\u043c\u0435\u0440 \u0438 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u043f\u043e\u0442\u0435\u0440\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438. \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0439\u0442\u0435 \u0441 \u0448\u0438\u0440\u043e\u043a\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e\u043c (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, ProPhoto RGB), \u0432 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0438\u0440\u0443\u0439\u0442\u0435 \u0432 sRGB \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0440\u0438 \u044d\u043a\u0441\u043f\u043e\u0440\u0442\u0435 \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430.<\/p><\/blockquote>\n<p>  <\/p>\n<h4>\u0415\u0441\u0442\u044c \u043b\u0438 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u0448\u0438\u0440\u043e\u043a\u0430\u044f \u0433\u0430\u043c\u043c\u0430 \u0438\u043c\u0435\u0435\u0442 \u0441\u043c\u044b\u0441\u043b \u0434\u043b\u044f \u0432\u0435\u0431-\u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430?<\/h4>\n<p>  \u0414\u0430. \u0415\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u043e\u0447\u0435\u043d\u044c \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u044b\u0439\/\u0441\u043e\u0447\u043d\u044b\u0439\/\u044f\u0440\u043a\u0438\u0439 \u0446\u0432\u0435\u0442 \u2014 \u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445. \u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f\u0445 \u0442\u0430\u043a\u043e\u0435 \u0440\u0435\u0434\u043a\u043e \u0441\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f. \u0417\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043f\u043e\u0434\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0447\u0442\u043e\u0431\u044b \u0446\u0432\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u044f\u0440\u043a\u0438\u043c, \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u044f \u0437\u0430 \u0440\u0430\u043c\u043a\u0438 \u0433\u0430\u043c\u043c\u044b sRGB.<\/p>\n<p>  \u041f\u0440\u0438\u0447\u0438\u043d\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u0446\u0432\u0435\u0442\u0430 \u043d\u0435 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e. \u0412\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u043a\u0440\u0443\u0436\u0435\u043d\u0438\u044f\u00a0\u2014 \u0438 \u0435\u0433\u043e \u043b\u0435\u0433\u043a\u043e \u043e\u0431\u043c\u0430\u043d\u0443\u0442\u044c. \u041d\u043e \u0435\u0441\u043b\u0438 \u043d\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435 \u0441\u043b\u0435\u0434 \u0444\u043b\u0443\u043e\u0440\u0435\u0441\u0446\u0435\u043d\u0442\u043d\u043e\u0433\u043e \u043c\u0430\u0440\u043a\u0435\u0440\u0430, \u0442\u043e \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043b\u0435\u0433\u0447\u0435 \u0435\u0433\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0433\u0430\u043c\u043c\u0435.<\/p>\n<h3>\u0413\u0430\u043c\u043c\u0430-\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u044f \u0438 \u0441\u0436\u0430\u0442\u0438\u0435<\/h3>\n<p>  <a href=\"https:\/\/en.wikipedia.org\/wiki\/Gamma_correction\">\u0413\u0430\u043c\u043c\u0430-\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u044f<\/a> (\u0438\u043b\u0438 \u043f\u0440\u043e\u0441\u0442\u043e \u0433\u0430\u043c\u043c\u0430) \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u043e\u0431\u0449\u0435\u0439 \u044f\u0440\u043a\u043e\u0441\u0442\u044c\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0433\u0430\u043c\u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u043a\u0440\u0430\u0441\u043d\u043e\u0433\u043e \u0438 \u0437\u0435\u043b\u0451\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u043e\u0432. \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0435\u0437 \u0433\u0430\u043c\u043c\u0430-\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u0438 \u0447\u0430\u0441\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0431\u043b\u0435\u043a\u043b\u044b\u043c\u0438 \u0438\u043b\u0438 \u0442\u0451\u043c\u043d\u044b\u043c\u0438.<\/p>\n<p>  \u0412 \u0432\u0438\u0434\u0435\u043e \u0438 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440\u043d\u043e\u0439 \u0433\u0440\u0430\u0444\u0438\u043a\u0435 \u0433\u0430\u043c\u043c\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u0436\u0430\u0442\u0438\u044f, \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u0441\u0436\u0430\u0442\u0438\u044e \u0434\u0430\u043d\u043d\u044b\u0445. \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0436\u0430\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0443\u0440\u043e\u0432\u043d\u0438 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0432 \u043c\u0435\u043d\u044c\u0448\u0435\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u0438\u0442 (8, \u0430 \u043d\u0435 12 \u0438\u043b\u0438 16). \u0427\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0435 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u043d\u0435\u043b\u0438\u043d\u0435\u0439\u043d\u043e \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0443 \u0441\u0432\u0435\u0442\u0430. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432 \u0432 \u0438\u0445 \u0438\u0441\u0442\u0438\u043d\u043d\u043e\u0439 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0444\u043e\u0440\u043c\u0435 \u0431\u044b\u043b\u043e \u0431\u044b \u0440\u0430\u0441\u0442\u043e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u0440\u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438 \u0434\u043b\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0433\u043b\u0430\u0437\u0430. \u0413\u0430\u043c\u043c\u0430-\u0441\u0436\u0430\u0442\u0438\u0435 (gamma compression) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0432 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0435, \u0431\u043e\u043b\u0435\u0435 \u0431\u043b\u0438\u0437\u043a\u043e\u043c \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u043c\u0443 \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044e.<\/p>\n<p>  \u0421 \u0433\u0430\u043c\u043c\u0430-\u0441\u0436\u0430\u0442\u0438\u0435\u043c \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u0448\u043a\u0430\u043b\u0430 \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u0443\u043c\u0435\u0449\u0430\u0435\u0442\u0441\u044f \u0432 8 \u0431\u0438\u0442 \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u0438 (0\u2212255 \u0432 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e\u043c \u0446\u0432\u0435\u0442\u043e\u0432 RGB), \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u044f\u0440\u043a\u043e\u0441\u0442\u0438 \u043a\u043e\u0434\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u043d\u0435\u043b\u0438\u043d\u0435\u0439\u043d\u043e. \u041f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435, \u0447\u0442\u043e \u0432\u044b \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0435\u0441\u044c \u0432 \u0442\u0451\u043c\u043d\u043e\u0439 \u043a\u043e\u043c\u043d\u0430\u0442\u0435 \u0441 \u043e\u0434\u043d\u043e\u0439 \u0441\u0432\u0435\u0447\u043e\u0439. \u0417\u0430\u0436\u0433\u0438\u0442\u0435 \u0432\u0442\u043e\u0440\u0443\u044e \u2014 \u0438 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u044f\u0440\u043a\u043e\u0441\u0442\u0438. \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0442\u0440\u0435\u0442\u044c\u044e \u0441\u0432\u0435\u0447\u0443, \u0438 \u043a\u043e\u043c\u043d\u0430\u0442\u0430 \u0441\u0442\u0430\u043d\u0435\u0442 \u0435\u0449\u0451 \u044f\u0440\u0447\u0435. \u0410 \u0442\u0435\u043f\u0435\u0440\u044c \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u0435\u0431\u044f \u0432 \u043a\u043e\u043c\u043d\u0430\u0442\u0435 \u0441 \u0441\u043e\u0442\u043d\u0435\u0439 \u0441\u0432\u0435\u0447\u0435\u0439. \u0417\u0430\u0436\u0433\u0438\u0442\u0435 101-\u044e, 102-\u044e \u0441\u0432\u0435\u0447\u0438 \u2014 \u0438 \u0432\u044b \u043d\u0435 \u0437\u0430\u043c\u0435\u0442\u0438\u0442\u0435 \u043d\u0438\u043a\u0430\u043a\u0438\u0445 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u0412 \u043e\u0431\u043e\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u043b\u0438 \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u0435\u0442\u0430. \u041d\u043e \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0433\u043b\u0430\u0437\u0430 \u043c\u0435\u043d\u0435\u0435 \u0447\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b \u043a \u044f\u0440\u043a\u043e\u043c\u0443 \u0441\u0432\u0435\u0442\u0443, \u0433\u0430\u043c\u043c\u0430-\u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u044f \u00ab\u0441\u0436\u0438\u043c\u0430\u0435\u0442\u00bb \u044f\u0440\u043a\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432 \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445 \u0442\u0430\u043c \u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043c\u0435\u043d\u044c\u0448\u0430\u044f \u0442\u043e\u0447\u043d\u043e\u0441\u0442\u044c, \u043d\u043e \u0441\u0430\u043c \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0441\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0434\u043b\u044f \u043b\u044e\u0434\u0435\u0439\u00a0\u2014 \u0438 \u0441 \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0439 \u0442\u043e\u0447\u043a\u0438 \u0437\u0440\u0435\u043d\u0438\u044f \u0432\u0441\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e \u0442\u043e\u0447\u043d\u044b.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0413\u0430\u043c\u043c\u0430-\u043a\u043e\u0440\u0440\u0435\u043a\u0446\u0438\u044f \u0438\u043b\u0438 \u0441\u0436\u0430\u0442\u0438\u0435 \u0437\u0434\u0435\u0441\u044c \u043e\u0442\u043b\u0438\u0447\u0430\u044e\u0442\u0441\u044f \u043e\u0442 \u0433\u0430\u043c\u043c\u0430-\u043a\u0440\u0438\u0432\u044b\u0445 \u0432 \u00ab\u0424\u043e\u0442\u043e\u0448\u043e\u043f\u0435\u00bb, \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0433\u0430\u043c\u043c\u0430-\u0441\u0436\u0430\u0442\u0438\u0435 \u043d\u0438 \u043d\u0430 \u0447\u0442\u043e \u043d\u0435 \u043f\u043e\u0445\u043e\u0436\u0435.<\/p><\/blockquote>\n<p>  <\/p>\n<h3>\u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438<\/h3>\n<p>  \u0426\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u2014 \u044d\u0442\u043e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f, \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0449\u0430\u044f \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430. \u041e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043c\u0435\u0436\u0434\u0443 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u043c\u0438 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0430\u043c\u0438. \u0417\u0430\u0434\u0430\u0447\u0430 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439 \u2014 \u0447\u0442\u043e\u0431\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0438 \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436\u0438 \u043d\u0430 \u0432\u0441\u0435\u0445 \u0442\u0438\u043f\u0430\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0438 \u043d\u043e\u0441\u0438\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p>  \u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0433\u0443\u0442 \u0438\u043c\u0435\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 <a href=\"http:\/\/www.color.org\/icc_specs2.xalter\">\u041c\u0435\u0436\u0434\u0443\u043d\u0430\u0440\u043e\u0434\u043d\u043e\u0433\u043e \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0441\u043e\u0440\u0446\u0438\u0443\u043c\u0430<\/a> (ICC), \u0447\u0442\u043e\u0431\u044b \u0442\u043e\u0447\u043d\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430. \u041f\u0440\u043e\u0444\u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445, \u0432\u043a\u043b\u044e\u0447\u0430\u044f JPEG, PNG, SVG \u0438 WebP, \u0438 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432 \u0442\u043e\u0436\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438 ICC. \u0415\u0441\u043b\u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0435 \u0438 \u0438\u0437\u0432\u0435\u0441\u0442\u0435\u043d \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430, \u0442\u043e \u0446\u0432\u0435\u0442\u0430 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u0438\u0440\u0443\u044e\u0442\u0441\u044f \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u043e\u0432 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b sRGB, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u043d\u0438 \u043d\u0435 \u0441\u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u0442\u044c \u0446\u0432\u0435\u0442\u0430 \u0438\u0437 \u0431\u043e\u043b\u0435\u0435 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0433\u0430\u043c\u043c\u044b. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439 \u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u043e. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0439\u0442\u0435 \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0441\u0432\u043e\u0435\u0439 \u0446\u0435\u043b\u0435\u0432\u043e\u0439 \u0430\u0443\u0434\u0438\u0442\u043e\u0440\u0438\u0438.<\/p><\/blockquote>\n<p>  \u0412\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438 \u0442\u0430\u043a\u0436\u0435 \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u044e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (\u0438\u043d\u043e\u0433\u0434\u0430 \u043d\u0430 100\u00a0\u041a\u0411 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435), \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b. \u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0432\u0440\u043e\u0434\u0435 ImageOptim \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0443\u0434\u0430\u043b\u044f\u044e\u0442 \u0432\u0441\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438, \u043a\u0430\u043a\u0438\u0435 \u043d\u0430\u0439\u0434\u0443\u0442. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u044c ICC \u0443\u0434\u0430\u043b\u0451\u043d, \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043d\u0430\u0447\u043d\u0451\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u043c \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0430, \u0447\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044e \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u0430\u0441\u0442\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u0435\u0441\u0442\u044c \u0441\u043c\u044b\u0441\u043b \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u0440\u043e\u043c\u0438\u0441\u0441 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u0441\u043b\u0443\u0447\u0430\u044f.<\/p>\n<p>  \u041d\u0430 \u0441\u0430\u0439\u0442\u0435 <a href=\"https:\/\/ninedegreesbelow.com\/photography\/articles.html\">Nine Degrees Below<\/a> \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u043f\u043e \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0446\u0432\u0435\u0442\u043e\u0432\u044b\u043c\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u044f\u043c\u0438 ICC, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f.<\/p>\n<h3>\u0426\u0432\u0435\u0442\u043e\u0432\u044b\u0435 \u043f\u0440\u043e\u0444\u0438\u043b\u0438 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b<\/h3>\n<p>  \u0412 \u043f\u0440\u0435\u0436\u043d\u0438\u0445 \u0432\u0435\u0440\u0441\u0438\u044f\u0445 Chrome \u043d\u0435 \u0431\u044b\u043b\u043e \u043e\u0441\u043e\u0431\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u043e\u043c, \u043d\u043e \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u043b\u0438 \u0432 2017 \u0433\u043e\u0434\u0443, \u0432\u043d\u0435\u0434\u0440\u0438\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <a href=\"https:\/\/groups.google.com\/a\/chromium.org\/forum\/#!topic\/blink-dev\/ptuKdRQwPAo\">Color Correct Rendering<\/a>. \u0415\u0441\u043b\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u0434\u0438\u0441\u043f\u043b\u0435\u044f \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 sRGB (\u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 MacBook Pro), \u0442\u043e \u043e\u043d \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u0443\u044e\u0442 \u0446\u0432\u0435\u0442\u0430 \u0438\u0437 sRGB \u0432 \u043f\u0440\u043e\u0444\u0438\u043b\u044c \u0434\u0438\u0441\u043f\u043b\u0435\u044f. \u042d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0446\u0432\u0435\u0442\u0430 \u0441\u0442\u0430\u043d\u0443\u0442 \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u0445\u043e\u0436\u0438\u043c\u0438 \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u0438\u0441\u0442\u0435\u043c\u0430\u0445 \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445. \u0411\u0440\u0430\u0443\u0437\u0435\u0440\u044b Safari, Edge \u0438 Firefox \u0442\u043e\u0436\u0435 \u0443\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442 \u043f\u0440\u043e\u0444\u0438\u043b\u0438 ICC, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u043f\u0440\u043e\u0444\u0438\u043b\u044f\u043c\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u044e\u0442\u0441\u044f \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u0443 \u0432\u0430\u0441 \u0434\u0438\u0441\u043f\u043b\u0435\u0439 \u0441 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0433\u0430\u043c\u043c\u043e\u0439 \u0438\u043b\u0438 \u043d\u0435\u0442.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u041e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043e \u0440\u0430\u0437\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u0430\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0446\u0432\u0435\u0442\u0430 \u0432 \u0432\u0435\u0431\u0435 \u2014 <a href=\"https:\/\/css-tricks.com\/nerds-guide-color-web\/\">\u00ab\u0421\u043f\u0440\u0430\u0432\u043e\u0447\u043d\u0438\u043a \u043d\u0435\u0440\u0434\u0430 \u043f\u043e \u0446\u0432\u0435\u0442\u0443 \u0432 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435\u00bb<\/a> \u0421\u0430\u0440\u044b \u0414\u0440\u0430\u0437\u043d\u0435\u0440.<\/p><\/blockquote>\n<p>  <a name=\"31\"><\/a><\/p>\n<h1>\u0421\u043f\u0440\u0430\u0439\u0442\u044b<\/h1>\n<p>  \u0423 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ui\/responsive\/images#use_image_sprites\">\u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a> (\u0438\u043b\u0438 CSS-\u0441\u043f\u0440\u0430\u0439\u0442\u043e\u0432) \u0434\u043e\u043b\u0433\u0430\u044f \u0438\u0441\u0442\u043e\u0440\u0438\u044f, \u043e\u043d\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0441\u0435\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u0438 \u0431\u044b\u043b\u0438 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u0443\u043c\u0435\u043d\u044c\u0448\u0438\u0442\u044c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u043c\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u043f\u0443\u0442\u0451\u043c \u043e\u0431\u044a\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f \u0438\u0445 \u0432 \u043e\u0434\u043d\u043e \u0431\u043e\u043b\u0435\u0435 \u043a\u0440\u0443\u043f\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043d\u0430\u0440\u0435\u0437\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u0447\u0430\u0441\u0442\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/dc1\/d7c\/68f\/dc1d7c68f3fdeef1c56234d17122d7bc.jpg\"><br \/>  <font color=\"gray\">\u0421\u043f\u0440\u0430\u0439\u0442\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u0448\u0438\u0440\u043e\u043a\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u043d\u0430 \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u0430\u0445 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u043d\u0435, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 Google<\/font> <\/p>\n<p>  \u041f\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0443 HTTP\/1.x \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u043b\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432. \u042d\u0442\u043e \u0438\u043c\u0435\u043b\u043e \u0440\u044f\u0434 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432, \u043d\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e\u0441\u0442\u0438 \u0438\u0437-\u0437\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0435\u0439 \u043a\u044d\u0448\u0430 \u2014 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043b\u044e\u0431\u043e\u0439 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u0441\u043f\u0440\u0430\u0439\u0442\u0430 \u043f\u0440\u0438\u0432\u0435\u0434\u0443\u0442 \u043a \u0438\u043d\u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u0438 \u0432\u0441\u0435\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043a\u044d\u0448\u0435.<\/p>\n<p>  \u0421\u0435\u0439\u0447\u0430\u0441 \u0440\u0430\u0437\u0431\u0438\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u043f\u0440\u0430\u0439\u0442\u044b \u043f\u0440\u043e\u0442\u0438\u0432\u043e\u0440\u0435\u0447\u0438\u0442 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c <a href=\"https:\/\/hpbn.co\/http2\/\">HTTP\/2<\/a>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0441\u0442\u0430\u043b\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0432 \u043e\u0434\u043d\u043e\u043c \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u0438, \u0442\u043e \u043b\u0443\u0447\u0448\u0435 <a href=\"https:\/\/deliciousbrains.com\/performance-best-practices-http2\/\">\u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a>. \u041e\u0446\u0435\u043d\u0438\u0442\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0434\u043b\u044f \u0441\u0432\u043e\u0435\u0439 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u0438.<\/p>\n<p>  <a name=\"32\"><\/a><\/p>\n<h1>\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043d\u0435\u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h1>\n<p>  \u041b\u0435\u043d\u0438\u0432\u0430\u044f (\u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f) \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u2014 \u044d\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430 \u043f\u043e\u0432\u044b\u0448\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0437\u0430\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u0442\u0440\u0430\u0444\u0438\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a \u0441\u0436\u0430\u0442\u0438\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/d04\/326\/c74\/d04326c7499058e1cff821d707cb53dd.jpg\"><\/p>\n<p>  \u041f\u043e\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0435 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443. \u041d\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0432 \u044d\u0442\u043e\u0442 \u043c\u043e\u043c\u0435\u043d\u0442 \u0435\u0449\u0451 \u043d\u0435 \u0432\u0438\u0434\u043d\u044b. \u0418\u0445 \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043d\u0435 \u0441\u0440\u0430\u0437\u0443, \u0430 \u043f\u043e\u0437\u0436\u0435 \u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430. \u041e\u043d\u0430 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u0438 \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u0435\u0442 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u043d\u0438\u0437.<\/p>\n<p>  \u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u043f\u043e\u043a\u0430 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u0438\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 (\u0445\u043e\u0442\u044f \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c <a href=\"https:\/\/discourse.wicg.io\/t\/a-standard-way-to-lazy-load-images\/1153\/10\">\u0442\u0430\u043a\u043e\u0435 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u043b\u043e\u0441\u044c<\/a>). \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f JavaScript.<\/p>\n<h4>\u041f\u043e\u0447\u0435\u043c\u0443 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430?<\/h4>\n<p>  \u0423 \u043d\u0435\u0451 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432:<\/p>\n<ul>\n<li><b>\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u044f \u0442\u0440\u0430\u0444\u0438\u043a\u0430<\/b>. \u0412\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0435 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432. \u042d\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u0445\u043e\u0440\u043e\u0448\u043e, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043d\u0430 \u0441\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u0430\u0445 \u0441 \u0442\u0430\u0440\u0438\u0444\u0430\u043c\u0438 \u043d\u0430 \u0442\u0440\u0430\u0444\u0438\u043a.<\/li>\n<li><b>\u042d\u043a\u043e\u043d\u043e\u043c\u0438\u044f \u0437\u0430\u0440\u044f\u0434\u0430 \u0431\u0430\u0442\u0430\u0440\u0435\u0438<\/b>. \u041c\u0435\u043d\u044c\u0448\u0435 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u2014 \u043c\u0435\u043d\u044c\u0448\u0435 \u0440\u0430\u0441\u0445\u043e\u0434 \u0431\u0430\u0442\u0430\u0440\u0435\u0438.<\/li>\n<li><b>\u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/b>. \u0421\u043e\u043a\u0440\u0430\u0449\u0435\u043d\u0438\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0442\u044f\u0436\u0451\u043b\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0441 \u043e\u0431\u0438\u043b\u0438\u0435\u043c \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u0441 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u0441\u0435\u043a\u0443\u043d\u0434 \u043f\u043e\u0447\u0442\u0438 \u0434\u043e \u043d\u0443\u043b\u044f \u0434\u043e\u0440\u043e\u0433\u043e\u0433\u043e \u0441\u0442\u043e\u0438\u0442. \u0424\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u044d\u0442\u0430 \u0440\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u043e\u0436\u0435\u0442 \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u0435\u043b\u044f \u043d\u0430 \u0441\u0430\u0439\u0442\u0435, \u0430 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0435\u0434\u0438\u043d\u0438\u0447\u043a\u0443 \u0432 \u0441\u0442\u0430\u0442\u0438\u0441\u0442\u0438\u043a\u0443 \u043e\u0442\u043a\u0430\u0437\u043e\u0432.<\/li>\n<\/ul>\n<p>  <b>\u0412\u043f\u0440\u043e\u0447\u0435\u043c, \u043a\u0430\u043a \u0438 \u0441 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0430\u043c\u0438, \u0441 \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0438\u043b\u043e\u0439 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442 \u0431\u043e\u043b\u044c\u0448\u0430\u044f \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c.<\/b><\/p>\n<p>  <b>\u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438.<\/b> \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0435\u0451 \u0434\u043b\u044f \u0434\u043b\u0438\u043d\u043d\u044b\u0445 \u0441\u043f\u0438\u0441\u043a\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432 \u0438\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u0430\u0432\u0430\u0442\u0430\u0440). \u041d\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0435\u0451 \u0434\u043b\u044f \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043c\u0435\u0434\u043b\u0438\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043a\u0430\u043a \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438, \u0442\u0430\u043a \u0438 \u0434\u043b\u044f \u0447\u0435\u043b\u043e\u0432\u0435\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0432\u043e\u0441\u043f\u0440\u0438\u044f\u0442\u0438\u044f. \u041e\u043d\u0430 \u0443\u0431\u0438\u0432\u0430\u0435\u0442 \u043f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u0430 JavaScript \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u043b\u0438\u0448\u043d\u044e\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430.<\/p>\n<p>  <b>\u0411\u0443\u0434\u044c\u0442\u0435 \u043e\u0447\u0435\u043d\u044c \u043e\u0441\u0442\u043e\u0440\u043e\u0436\u043d\u044b \u0441 \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435.<\/b> \u0415\u0441\u043b\u0438 \u0436\u0434\u0430\u0442\u044c \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438, \u0442\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438\u043b\u0438 \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0434\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430 \u043d\u0430 \u043d\u0438\u0445. \u041e\u0434\u043d\u0430 \u0438\u0437 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 \u2014 \u043d\u0430\u0447\u0438\u043d\u0430\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0437\u0438\u043b\u043e\u0441\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0435, \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<h4>\u041a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443?<\/h4>\n<p>  \u041b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u0440\u0443\u043f\u043d\u044b\u0445 \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/medium.com\/\">Medium<\/a> \u0438 <a href=\"https:\/\/www.pinterest.com\/\">Pinterest<\/a>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/fd8\/c9d\/134\/fd8c9d134f3bf1b461cd66b8edddc29d.jpg\"><br \/>  <i><font color=\"gray\">\u041f\u0440\u0438\u043c\u0435\u0440 \u043f\u0440\u0435\u0432\u044c\u044e \u0441 \u0433\u0430\u0443\u0441\u0441\u043e\u0432\u044b\u043c \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435\u043c \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439 \u043d\u0430 Medium<\/font><\/i> <\/p>\n<p>  \u041d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u0430\u0439\u0442\u0430\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Medium) \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0430\u044f \u0440\u0430\u0437\u043c\u044b\u0442\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 (\u043e\u043a\u043e\u043b\u043e 100 \u0431\u0430\u0439\u0442), \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u0441\u043b\u0435 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u044e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430.<\/p>\n<p>  \u0425\u043e\u0441\u0435 \u041c. \u041f\u0435\u0440\u0435\u0441 \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u043b, \u043a\u0430\u043a \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u044d\u0444\u0444\u0435\u043a\u0442 Medium \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/jmperezperez.com\/medium-image-progressive-loading-placeholder\/\">CSS-\u0444\u0438\u043b\u044c\u0442\u0440\u043e\u0432<\/a>. \u041e\u043d \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043b \u0441 <a href=\"https:\/\/jmperezperez.com\/webp-placeholder-images\/\">\u0440\u0430\u0437\u043d\u044b\u043c\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u043c\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u043c\u0438<\/a>. Facebook \u0442\u043e\u0436\u0435 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u043b \u0441\u0432\u043e\u0439 \u0437\u043d\u0430\u043c\u0435\u043d\u0438\u0442\u044b\u0439 <a href=\"https:\/\/code.facebook.com\/posts\/991252547593574\/the-technology-behind-preview-photos\/\">\u043f\u043e\u0434\u0445\u043e\u0434<\/a> \u0441 200-\u0431\u0430\u0439\u0442\u043e\u0432\u044b\u043c\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044f\u043c\u0438 \u0434\u043b\u044f \u0437\u0430\u0433\u043b\u0430\u0432\u043d\u044b\u0445 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439. \u0415\u0441\u043b\u0438 \u0432\u044b \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c Webpack, \u0442\u043e <a href=\"https:\/\/lqip-loader.firebaseapp.com\/\">LQIP loader<\/a> \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0438\u0437 \u044d\u0442\u0438\u0445 \u043f\u0440\u043e\u0446\u0435\u0434\u0443\u0440.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0443\u0432\u0438\u0434\u0435\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u043b\u044e\u0431\u0438\u043c\u044b\u0439 \u043a\u0430\u0442\u0430\u043b\u043e\u0433 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0445 \u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u0439, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u0438\u0442\u044c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u043d\u0438\u0437. \u041f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0432\u044b \u0443\u0432\u0438\u0434\u0438\u0442\u0435, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0441 \u043f\u043e\u043b\u043d\u044b\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c, \u0430 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0435 \u2014 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u0438. \u041f\u043e \u043c\u0435\u0440\u0435 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u0438 \u0437\u0430\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0432 \u043f\u043e\u043b\u043d\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438. \u042d\u0442\u043e \u043b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430.<\/p>\n<p>  \u0412 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0430 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u043d\u043e\u0432\u0430\u044f \u0442\u0435\u0445\u043d\u0438\u043a\u0430 <i>\u0432\u0435\u043a\u0442\u043e\u0440\u043d\u044b\u0445<\/i>, \u0430 \u043d\u0435 \u0440\u0430\u0441\u0442\u0440\u043e\u0432\u044b\u0445 \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u0435\u0439. \u0415\u0451 \u043f\u0440\u0435\u0434\u043b\u043e\u0436\u0438\u043b \u0422\u043e\u0431\u0438\u0430\u0441 \u0411\u0430\u043b\u0434\u0430\u0443\u0444 \u0432 \u0441\u0432\u043e\u0451\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u0435 <a href=\"https:\/\/github.com\/technopagan\/sqip\">SQIP<\/a>. \u0422\u0430\u043c \u0443\u0442\u0438\u043b\u0438\u0442\u0430 <a href=\"https:\/\/github.com\/fogleman\/primitive\">Primitive<\/a> \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 SVG-\u043f\u0440\u0435\u0432\u044c\u044e \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0444\u043e\u0440\u043c, \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0435 \u0441\u043e\u0432\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0445 \u0441 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u043c\u0438 \u0447\u0435\u0440\u0442\u0430\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f. \u0417\u0430\u0442\u0435\u043c SVG \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/github.com\/svg\/svgo\">SVGO<\/a> \u2014 \u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0444\u0438\u043b\u044c\u0442\u0440 \u0433\u0430\u0443\u0441\u0441\u043e\u0432\u0430 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u044f. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c SVG \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u0432\u0441\u0435\u0433\u043e 800\u22121000 \u0431\u0430\u0439\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0447\u0451\u0442\u043a\u0438\u043c \u043d\u0430 \u043b\u044e\u0431\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0438 \u0434\u0430\u0451\u0442 \u043e\u0441\u043c\u044b\u0441\u043b\u0435\u043d\u043d\u043e\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435, \u0447\u0442\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0435. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, <a href=\"https:\/\/calendar.perfplanet.com\/2017\/progressive-image-loading-using-intersection-observer-and-sqip\/\">\u043c\u043e\u0436\u043d\u043e \u043a\u043e\u043c\u0431\u0438\u043d\u0438\u0440\u043e\u0432\u0430\u0442\u044c<\/a> \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u043d\u0438\u0437\u043a\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435.<\/p>\n<h4>\u041a\u0430\u043a \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443?<\/h4>\n<p>  \u0414\u043b\u044f \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0435\u0441\u0442\u044c \u0440\u044f\u0434 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432. \u042f \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e <a href=\"https:\/\/github.com\/aFarkas\/lazysizes\">lazysizes<\/a> \u0410\u043b\u0435\u043a\u0441\u0430\u043d\u0434\u0440\u0430 \u0424\u0430\u0440\u043a\u0430\u0441\u0430 \u0438\u0437-\u0437\u0430 \u0435\u0433\u043e \u0434\u043e\u0441\u0442\u043e\u0439\u043d\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 <a href=\"https:\/\/developers.google.com\/web\/updates\/2016\/04\/intersectionobserver\">Intersection Observer<\/a> \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0433\u0438\u043d\u043e\u0432.<\/p>\n<h4>\u0427\u0442\u043e \u0443\u043c\u0435\u0435\u0442 Lazysizes?<\/h4>\n<p>  Lazysizes \u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 JavaScript, \u043e\u043d\u0430 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438. \u041f\u0440\u043e\u0441\u0442\u043e \u0441\u043a\u0430\u0447\u0430\u0439\u0442\u0435 \u043c\u0438\u043d\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0444\u0430\u0439\u043b js \u0438 \u0432\u043a\u043b\u044e\u0447\u0438\u0442\u0435 \u0435\u0433\u043e \u0432 \u0432\u0435\u0431-\u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.<\/p>\n<p>  \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u0440 \u043a\u043e\u0434\u0430 \u0438\u0437 \u0444\u0430\u0439\u043b\u0430 README:<\/p>\n<p>  \u0414\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u043a\u043b\u0430\u0441\u0441 &#8216;lazyload\u2019 \u043a \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\/\u0444\u0440\u0435\u0439\u043c\u0430\u043c \u0432 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0438 \u0441 \u0430\u0442\u0440\u0438\u0431\u0443\u0442\u043e\u043c data-src \u0438\/\u0438\u043b\u0438 data-srcset.<\/p>\n<p>  \u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 src \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043d\u0438\u0437\u043a\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430:<\/p>\n<pre><code class=\"html\">&lt;!-- non-responsive: --&gt; &lt;img data-src=\"image.jpg\" class=\"lazyload\" \/&gt;  &lt;!-- responsive example with automatic sizes calculation: --&gt; &lt;img     data-sizes=\"auto\"     data-src=\"image2.jpg\"     data-srcset=\"image1.jpg 300w,     image2.jpg 600w,     image3.jpg 900w\" class=\"lazyload\" \/&gt;  &lt;!-- iframe example --&gt;  &lt;iframe frameborder=\"0\"     class=\"lazyload\"     allowfullscreen=\"\"     data-src=\"\/\/www.youtube.com\/embed\/ZfV-aYdU4uE\"&gt; &lt;\/iframe&gt;<\/code><\/pre>\n<p>  \u0414\u043b\u044f \u0432\u0435\u0431-\u0432\u0435\u0440\u0441\u0438\u0438 \u044d\u0442\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 \u044f \u0441\u0432\u044f\u0437\u0430\u043b Lazysizes \u0441 Cloudinary (\u0445\u043e\u0442\u044f \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u044e\u0431\u0443\u044e \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443). \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u043e \u0438 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u0443\u0441\u0438\u043b\u0438\u044f\u043c\u0438 \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0430\u043c\u0438, \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c, \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u043c\u0438 \u0438 \u043d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e \u043e\u0442 \u0442\u043e\u0433\u043e, \u043d\u0443\u0436\u043d\u0430 \u043b\u0438 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/377\/f20\/d09\/377f20d09d2e11b1037a62777ad25e3e.jpg\"><\/p>\n<h4>\u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u0438 Lazysizes:<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0445 \u0438 \u0431\u0443\u0434\u0443\u0449\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 (picture \u0438 srcset)<\/li>\n<li>\u0410\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0440\u0430\u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0438 \u0430\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u043c\u0435\u0434\u0438\u0430\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432<\/li>\n<li>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 \u0441\u043e\u0442\u043d\u044f\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439\/\u0444\u0440\u0435\u0439\u043c\u043e\u0432 \u043d\u0430 CSS, \u0432 \u043d\u0430\u0441\u044b\u0449\u0435\u043d\u043d\u044b\u0445 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\u043c\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430\u0445 \u0438 \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445<\/li>\n<li>\u0420\u0430\u0441\u0448\u0438\u0440\u044f\u0435\u043c\u043e\u0441\u0442\u044c: \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u043f\u043b\u0430\u0433\u0438\u043d\u044b<\/li>\n<li>\u041b\u0451\u0433\u043a\u043e\u0435, \u043d\u043e \u0437\u0440\u0435\u043b\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435<\/li>\n<li>\u0423\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435 SEO: \u043d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\/\u0430\u043a\u0442\u0438\u0432\u044b \u043e\u0442 \u043a\u0440\u0430\u0443\u043b\u0435\u0440\u043e\u0432<\/li>\n<\/ul>\n<p>  <\/p>\n<h4>\u0414\u0440\u0443\u0433\u0438\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h4>\n<p>  Lazysizes \u2014 \u043d\u0435 \u0435\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u0415\u0441\u0442\u044c \u0438 \u0434\u0440\u0443\u0433\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438:<\/p>\n<ul>\n<li><a href=\"http:\/\/ressio.github.io\/lazy-load-xt\/\">Lazy Load XT<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/dinbror\/blazy\">BLazy.js<\/a> (\u0438\u043b\u0438 [Be]Lazy)<\/li>\n<li><a href=\"http:\/\/luis-almeida.github.io\/unveil\/\">Unveil<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/malchata\/yall.js\">yall.js (Yet Another Lazy Loader)<\/a> \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c \u043e\u043a\u043e\u043b\u043e 1 \u043a\u0438\u043b\u043e\u0431\u0430\u0439\u0442\u0430, \u043e\u043d \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Intersection Observer \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e.<\/li>\n<\/ul>\n<p>  <\/p>\n<h4>\u0412 \u0447\u0451\u043c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0438 \u043b\u0435\u043d\u0438\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438?<\/h4>\n<p>  <\/p>\n<ul>\n<li>\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u044b \u0447\u0442\u0435\u043d\u0438\u044f \u0441 \u044d\u043a\u0440\u0430\u043d\u0430, \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0438\u0441\u043a\u043e\u0432\u044b\u0435 \u0431\u043e\u0442\u044b \u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u043d\u044b\u043c JavaScript \u043d\u0435 \u0443\u0432\u0438\u0434\u044f\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043d\u044b\u0435 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e JavaScript. \u041d\u043e \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0437\u0430\u043f\u0430\u0441\u043d\u044b\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c &lt;noscript&gt;.<\/li>\n<li>\u041f\u0440\u043e\u0441\u043b\u0443\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u043e \u043f\u043e\u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433\u0430. \u0411\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043c\u043d\u043e\u0433\u043e\u043a\u0440\u0430\u0442\u043d\u043e \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u044d\u043a\u0440\u0430\u043d (redraw), \u043d\u043e \u0433\u0440\u0430\u043c\u043e\u0442\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u043c\u043e\u0433\u0443\u0442 \u0441\u043c\u044f\u0433\u0447\u0438\u0442\u044c \u044d\u0442\u043e\u0442 \u043d\u0435\u0433\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u044d\u0444\u0444\u0435\u043a\u0442 \u0437\u0430 \u0441\u0447\u0451\u0442 \u0434\u0440\u043e\u0441\u0441\u0435\u043b\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u041e\u0434\u043d\u043e \u0438\u0437 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u2014 Intersection Observer, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 lazysizes.<\/li>\n<\/ul>\n<p>  \u041e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u2014 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0451\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0438 \u0442\u0440\u0430\u0444\u0438\u043a\u0430, \u0441\u043d\u0438\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0442\u0440\u0430\u0442 \u0438 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u044f \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c. \u041e\u0446\u0435\u043d\u0438\u0442\u0435, \u043d\u0430\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u0430 \u0432 \u0432\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435. \u0414\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0441\u043c. \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/jmperezperez.com\/lazy-loading-images\/\">\u00ab\u041b\u0435\u043d\u0438\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439\u00bb<\/a> \u0438 <a href=\"https:\/\/jmperezperez.com\/medium-image-progressive-loading-placeholder\/\">\u00ab\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0432 Medium\u00bb<\/a>.<\/p>\n<p>  <a name=\"33\"><\/a><\/p>\n<h1>\u041a\u0430\u043a \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u043b\u043e\u0432\u0443\u0448\u043a\u0438 display:none<\/h1>\n<p>  \u0421\u0442\u0430\u0440\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043e\u0448\u0438\u0431\u043e\u0447\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043f\u0440\u0438 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 CSS <code>display<\/code>. \u042d\u0442\u043e \u043c\u043e\u0433\u043b\u043e \u043f\u0440\u0438\u0432\u0435\u0441\u0442\u0438 \u043a \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u0443\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0438\u044e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0447\u0442\u043e \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0435\u0449\u0451 \u043e\u0434\u043d\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u043e\u0439, \u043f\u043e\u0447\u0435\u043c\u0443 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c &lt;picture&gt; \u0438 &lt;img srcset&gt;.<\/p>\n<p>  \u0412\u044b \u043a\u043e\u0433\u0434\u0430-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u0438\u0441\u0430\u043b\u0438 \u0437\u0430\u043f\u0440\u043e\u0441 media, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 \u043f\u0440\u044f\u0447\u0435\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0443 \u0432 <code>display:none<\/code>?<\/p>\n<pre><code class=\"html\">&lt;img src=\"img.jpg\"&gt; &lt;style&gt; @media (max-width: 640px) {     img {         display: none;     } } &lt;\/style&gt;<\/code><\/pre>\n<p>  \u0418\u043b\u0438 \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043b\u0430\u0441\u0441\u0430 <code>display:none<\/code>?<\/p>\n<pre><code class=\"html\">&lt;style&gt; .hidden {   display: none; } &lt;\/style&gt; &lt;img src=\"img.jpg\"&gt; &lt;img src=\u201cimg-hidden.jpg\" class=\"hidden\"&gt;<\/code><\/pre>\n<p>  \u0411\u044b\u0441\u0442\u0440\u0430\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0432 \u0441\u0435\u0442\u0435\u0432\u043e\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 Chrome DevTools \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442, \u0447\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u00ab\u0441\u043f\u0440\u044f\u0442\u0430\u043d\u043d\u044b\u0435\u00bb \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435 \u044d\u0442\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0441\u043e\u0433\u043b\u0430\u0441\u043d\u043e \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/a67\/471\/222\/a67471222582a069b511993bab0c0b51.jpg\"><\/p>\n<h4>\u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043b\u0438 display:none \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 src?<\/h4>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div style=\"display:none\"&gt;&lt;img src=\"img.jpg\"&gt;&lt;\/div&gt;<\/code><\/pre>\n<p>  \u041d\u0435\u0442. \u0423\u043a\u0430\u0437\u0430\u043d\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432\u0441\u0451 \u0440\u0430\u0432\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0448\u0435\u043d\u043e. \u0417\u0434\u0435\u0441\u044c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 display:none, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0437\u0430\u043f\u0440\u043e\u0441 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0440\u0430\u043d\u044c\u0448\u0435, \u0447\u0435\u043c JavaScript \u0438\u0437\u043c\u0435\u043d\u0438\u0442 src.<\/p>\n<h4>\u041f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043b\u0438 display:none \u0438\u0437\u0431\u0435\u0436\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u0430 background: url()?<\/h4>\n<p>  <\/p>\n<pre><code class=\"html\">&lt;div style=\"display:none\"&gt;   &lt;div style=\"background: url(img.jpg)\"&gt;&lt;\/div&gt; &lt;\/div&gt;<\/code><\/pre>\n<p>  \u0423\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043e\u0442\u0432\u0435\u0442. \u0424\u043e\u043d CSS \u043d\u0435 \u0438\u0437\u0432\u043b\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u0440\u0430\u0437\u0431\u043e\u0440\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430. \u0420\u0430\u0441\u0447\u0451\u0442 \u0441\u0442\u0438\u043b\u0435\u0439 CSS \u0434\u043b\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0441 <code>display:none<\/code> \u043c\u0435\u043d\u0435\u0435 \u043f\u043e\u043b\u0435\u0437\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u043d\u0435 \u0432\u043b\u0438\u044f\u044e\u0442 \u043d\u0430 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0424\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0435 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0438 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f.<\/p>\n<p>  \u0423 \u0414\u0436\u0435\u0439\u043a\u0430 \u0410\u0440\u0447\u0438\u0431\u0430\u043b\u044c\u0434\u0430 \u0435\u0441\u0442\u044c \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0439 <a href=\"https:\/\/jakearchibald.github.io\/request-quest\/\">\u043a\u0432\u0435\u0441\u0442-\u0432\u0438\u043a\u0442\u043e\u0440\u0438\u043d\u0430<\/a> \u043f\u043e \u043b\u043e\u0432\u0443\u0448\u043a\u0430\u043c <code>display:none<\/code>. \u0415\u0441\u043b\u0438 \u0441\u043e\u043c\u043d\u0435\u0432\u0430\u0435\u0442\u0435\u0441\u044c, \u043a\u0430\u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 DevTools \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u044c\u0442\u0435 \u0441\u0430\u043c\u0438.<\/p>\n<p>  \u041e\u043f\u044f\u0442\u044c \u0436\u0435, \u0433\u0434\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 &lt;picture&gt; \u0438 &lt;img srcset&gt; \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0430\u0433\u0430\u0442\u044c\u0441\u044f \u043d\u0430 &lt;display:none&gt;.<\/p>\n<p>  <a name=\"34\"><\/a><\/p>\n<h1>\u0415\u0441\u0442\u044c \u043b\u0438 \u0441\u043c\u044b\u0441\u043b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f CDN \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439?<\/h1>\n<p>  <i>\u0412\u0440\u0435\u043c\u044f, \u043f\u043e\u0442\u0440\u0430\u0447\u0435\u043d\u043d\u043e\u0435 \u043d\u0430 \u0447\u0442\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0441\u0432\u043e\u0435\u0433\u043e \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0435\u0433\u043e \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u0434\u043e\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0434\u043e\u0440\u043e\u0436\u0435, \u0447\u0435\u043c \u043f\u043b\u0430\u0442\u0430 \u0437\u0430 \u044d\u0442\u0443 \u0443\u0441\u043b\u0443\u0433\u0443. <a href=\"http:\/\/cloudinary.com\/\">Cloudinary<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0441\u0435\u0440\u0432\u0438\u0441, <a href=\"https:\/\/www.imgix.com\/\">Imgix<\/a> \u0434\u0430\u0451\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e \u043f\u0440\u043e\u0431\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e, \u0435\u0441\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u0430\u044f \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0430 <a href=\"https:\/\/github.com\/thumbor\/thumbor\">Thumbor<\/a>, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u043d\u0435\u043c\u0430\u043b\u043e.<\/i> <\/p>\n<p>  \u0414\u043b\u044f \u0441\u0430\u043c\u043e\u0439 \u0431\u044b\u0441\u0442\u0440\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043d\u0443\u0436\u043d\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f \u0432\u044b\u0434\u0430\u0447\u0443 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u043e \u0441\u0436\u0430\u0442\u0438\u0435\u043c \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0432\u044b\u0431\u043e\u0440 \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430. \u0412\u0430\u0436\u043d\u043e \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0430 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u043e \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0438 \u2014 \u0438 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u0421\u0434\u0435\u043b\u0430\u0442\u044c \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0430\u043a \u043a\u0430\u0436\u0435\u0442\u0441\u044f.<\/p>\n<h4>\u0421\u0432\u043e\u0439 \u0441\u0435\u0440\u0432\u0435\u0440 \u0438\u043b\u0438 CDN?<\/h4>\n<p>  \u041c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u2014 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0442\u0435\u043c\u0430. \u0422\u0443\u0442 \u0432\u0441\u0451 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u0447\u043d\u0451\u043c \u0441 \u0446\u0438\u0442\u0430\u0442\u044b \u043e\u043f\u044b\u0442\u043d\u043e\u0433\u043e \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u0438\u0441\u0442\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u043c.<\/p>\n<p>  \u00ab\u0415\u0441\u043b\u0438 \u0432\u0430\u0448 \u043f\u0440\u043e\u0434\u0443\u043a\u0442 \u0441\u0430\u043c \u043f\u043e \u0441\u0435\u0431\u0435 \u043d\u0435 \u0441\u0432\u044f\u0437\u0430\u043d \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u0442\u043e \u043d\u0435 \u0434\u0435\u043b\u0430\u0439\u0442\u0435 \u044d\u0442\u043e \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e. \u0421\u0435\u0440\u0432\u0438\u0441\u044b \u0432\u0440\u043e\u0434\u0435 Cloudinary [\u0438\u043b\u0438 Imgix, \u043f\u0440\u0438\u043c. \u0430\u0432\u0442.] \u0441\u043f\u0440\u0430\u0432\u044f\u0442\u0441\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043b\u0443\u0447\u0448\u0435 \u0438 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0435\u0435. \u0418 \u0435\u0441\u043b\u0438 \u0432\u044b \u0431\u0435\u0441\u043f\u043e\u043a\u043e\u0438\u0442\u0435\u0441\u044c \u043e \u0446\u0435\u043d\u0435, \u043f\u043e\u0434\u0443\u043c\u0430\u0439\u0442\u0435, \u0432\u043e \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u0431\u043e\u0439\u0434\u0443\u0442\u0441\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0438 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u0435, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0445\u043e\u0441\u0442\u0438\u043d\u0433, \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0438 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0430\u00bb\u00a0\u2014 <a href=\"https:\/\/medium.com\/@cmgmyr\/moving-from-self-hosted-image-service-to-cloudinary-bd7370317a0d\">\u041a\u0440\u0438\u0441 \u0413\u043c\u044b\u0440<\/a><\/p>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u043c\u044b \u0441\u043a\u043b\u043e\u043d\u043d\u044b \u0441\u043e\u0433\u043b\u0430\u0441\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u043b\u0443\u0447\u0448\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CDN \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0432\u0430 \u0442\u0430\u043a\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u2014 \u043a\u0430\u043a \u043e\u043d\u0438 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0442 \u0441\u043f\u0438\u0441\u043a\u0443 \u0443\u043f\u043e\u043c\u044f\u043d\u0443\u0442\u044b\u0445 \u0437\u0430\u0434\u0430\u0447.<\/p>\n<h4>Cloudinary \u0438 Imgix<\/h4>\n<p>  <a href=\"http:\/\/cloudinary.com\/\">Cloudinary<\/a> \u0438 <a href=\"https:\/\/www.imgix.com\/\">Imgix<\/a> \u2014 \u0445\u043e\u0440\u043e\u0448\u043e \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u044b\u0435 CDN \u0434\u043b\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0418\u0445 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0441\u043e\u0442\u043d\u0438 \u0442\u044b\u0441\u044f\u0447 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 \u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u0439 \u043f\u043e \u0432\u0441\u0435\u043c\u0443 \u043c\u0438\u0440\u0443, \u0432\u043a\u043b\u044e\u0447\u0430\u044f Netflix \u0438 Red Bull.<\/p>\n<h4>\u041e\u0441\u043d\u043e\u0432\u043d\u043e\u0435<\/h4>\n<p>  \u041f\u0435\u0440\u0432\u043e\u0435 \u043e\u0433\u0440\u043e\u043c\u043d\u043e\u0435 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u043e CDN \u043f\u0435\u0440\u0435\u0434 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u2014 \u0442\u043e, \u0447\u0442\u043e \u043e\u043d\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u0440\u0430\u0441\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u0443\u044e \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u0435\u0442\u0435\u0432\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0447\u0442\u043e\u0431\u044b \u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0430\u0448\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u043b\u0438\u0436\u0435 \u043a \u0432\u0430\u0448\u0438\u043c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c. \u0418 \u0441 CDN \u0432\u0430\u043c \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043f\u0440\u043e\u0449\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0441 \u0431\u0443\u0434\u0443\u0449\u0438\u043c\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f\u043c\u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0439, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0435 \u043a\u0430\u0436\u0434\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u0441\u0430\u043c\u043e\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0442\u0435\u043d\u0434\u0435\u043d\u0446\u0438\u0438, \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u2014 \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0432\u0430\u043d\u0438\u044f, \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438 \u043d\u043e\u0432\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0438 \u043f\u043e\u0433\u0440\u0443\u0436\u0435\u043d\u0438\u044f \u0432 \u0436\u0438\u0437\u043d\u044c \u0441\u043e\u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442\u0441\u044f \u0441\u0436\u0430\u0442\u0438\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u0412\u0442\u043e\u0440\u043e\u0435: \u0443 \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u043c\u043d\u043e\u0433\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u0443\u044e \u0442\u0430\u0440\u0438\u0444\u043d\u044b\u0439 \u043f\u043b\u0430\u043d: \u0423 Cloudinary <a href=\"http:\/\/cloudinary.com\/pricing\">\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444<\/a>, \u0443 Imgix \u043d\u0435\u0434\u043e\u0440\u043e\u0433\u043e\u0439 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0439 \u043f\u043b\u0430\u043d. Imgix \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u0443\u044e <a href=\"https:\/\/www.imgix.com\/pricing\">\u043f\u0440\u043e\u0431\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e<\/a>, \u044d\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435, \u0447\u0442\u043e \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439 \u0442\u0430\u0440\u0438\u0444.<\/p>\n<p>  \u0422\u0440\u0435\u0442\u044c\u0435: \u0443 \u043e\u0431\u043e\u0438\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u0432 \u0435\u0441\u0442\u044c API. \u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043c\u043e\u0433\u0443\u0442 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c\u0441\u044f \u043a CDN \u0438 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u0446\u0435\u0441\u0441. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u043a\u043b\u0438\u0435\u043d\u0442\u0441\u043a\u0438\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438, \u043f\u043b\u0430\u0433\u0438\u043d\u044b \u0434\u043b\u044f \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u043e\u0432 \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e API, \u0445\u043e\u0442\u044f \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u043f\u0446\u0438\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 \u0434\u043e\u0440\u043e\u0433\u0438\u0445 \u0442\u0430\u0440\u0438\u0444\u0430\u0445.<\/p>\n<h4>\u041f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h4>\n<p>  \u041e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u043c \u0434\u0438\u0441\u043a\u0443\u0441\u0441\u0438\u044e \u0441\u0442\u0430\u0442\u0438\u0447\u043d\u044b\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438. Cloudinary \u0438 Imgix \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0448\u0438\u0440\u043e\u043a\u0438\u0439 \u0441\u043f\u0435\u043a\u0442\u0440 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0412 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0438 \u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0445 \u0442\u0430\u0440\u0438\u0444\u0430\u0445 \u043e\u0431\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u0431\u0430\u0437\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438: \u0441\u0436\u0430\u0442\u0438\u0435, \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u0430, \u043e\u0431\u0440\u0435\u0437\u043a\u0430, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043f\u0438\u0439.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/e27\/b9f\/e79\/e27b9fe792a444abd15ed71fa10387ae.jpg\"><br \/>  <i><font color=\"gray\">Cloudinary Media Library: \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e Cloudinary \u0432\u044b\u0434\u0430\u0451\u0442 <a href=\"http:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\">\u043e\u0431\u044b\u0447\u043d\u044b\u0435, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0435 JPEG<\/a>. \u0427\u0442\u043e\u0431\u044b \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u044d\u0442\u0443 \u043e\u043f\u0446\u0438\u044e, \u043f\u043e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0439 \u0437\u043d\u0430\u0447\u043e\u043a \u0432 \u00ab\u0414\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u0445\u00bb \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0444\u043b\u0430\u0433 fl_progressive<\/font><\/i><\/p>\n<p>  Cloudinary \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442 <a href=\"http:\/\/cloudinary.com\/documentation\/image_transformations\">\u0441\u0435\u043c\u044c \u0448\u0438\u0440\u043e\u043a\u0438\u0445 \u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439 \u043f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u044f<\/a>, \u0432 \u043e\u0431\u0449\u0435\u0439 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 48 \u043f\u043e\u0434\u043a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u0439. \u0423 Imgix \u0431\u043e\u043b\u0435\u0435 <a href=\"https:\/\/docs.imgix.com\/apis\/url?_ga=2.52377449.1538976134.1501179780-2118608066.1501179780\">100 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/a>.<\/p>\n<h4>\u0427\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e?<\/h4>\n<p>  Cloudinary \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438:<\/p>\n<ul>\n<li><a href=\"https:\/\/twitter.com\/etportis\/status\/891529495336722432\">\u041a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432 JPEG \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e MozJPEG<\/a> (\u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0432\u043c\u0435\u0441\u0442\u043e Guetzli \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e).<\/li>\n<li>\u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u043e\u0442 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u0445 (\u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u043d\u0435\u0442\u0440\u043e\u043d\u0443\u0442\u044b\u043c). \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u044d\u0442\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0438 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 \u043c\u0435\u0442\u0430\u0434\u0430\u043d\u043d\u044b\u043c\u0438, \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u043b\u0430\u0433 keep_iptc.<\/li>\n<li>\u0412\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 WebP, GIF, JPEG \u0438 JPEG-XR \u0441 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e\u043c. \u0427\u0442\u043e\u0431\u044b \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, \u0437\u0430\u0434\u0430\u0439\u0442\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432\u0440\u0443\u0447\u043d\u0443\u044e.<\/li>\n<li>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0444\u0430\u0439\u043b\u043e\u0432 \u0441 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u043c \u0432\u043b\u0438\u044f\u043d\u0438\u0435\u043c \u043d\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0438 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 PNG, JPEG \u0438\u043b\u0438 GIF.<\/li>\n<\/ul>\n<p>  Imgix \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043d\u0435 \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u043a\u0430\u043a Cloudinary, \u043d\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e. \u0412 Imgix \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0432 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u0412 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u0432\u0440\u0435\u043c\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f <a href=\"https:\/\/docs.imgix.com\/apis\/url\/auto\">\u0447\u0435\u0442\u044b\u0440\u0435 \u043c\u0435\u0442\u043e\u0434\u0430<\/a>:<\/p>\n<ul>\n<li>\u0421\u0436\u0430\u0442\u0438\u0435<\/li>\n<li>\u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u0443\u043b\u0443\u0447\u0448\u0435\u043d\u0438\u0435<\/li>\n<li>\u041f\u0440\u0435\u043e\u0431\u0440\u0430\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 \u0444\u0430\u0439\u043b\u043e\u0432<\/li>\n<li>\u0423\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u043a\u0440\u0430\u0441\u043d\u044b\u0445 \u0433\u043b\u0430\u0437<\/li>\n<\/ul>\n<p>  Imgix \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439: JPEG, JPEG2000, PNG, GIF, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 GIF, TIFF, BMP, ICNS, ICO, PDF, PCT, PSD, AI.<\/p>\n<p>  Cloudinary \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u0442\u0430\u043a\u0438\u0435 \u0444\u043e\u0440\u043c\u0430\u0442\u044b: JPEG, JPEG 2000, JPEG XR, PNG, GIF, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 GIF, WebP, \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 WebP, BMP, TIFF, ICO, PDF, EPS, PSD, SVG, AI, DjVu, FLIF, TARGA.<\/p>\n<h4>\u0427\u0442\u043e \u043d\u0430\u0441\u0447\u0451\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438?<\/h4>\n<p>  \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c CDN \u0432 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 <a href=\"https:\/\/docs.google.com\/a\/chromium.org\/viewer?a=v&amp;pid=sites&amp;srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2\">\u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0438<\/a> \u0438 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438.<\/p>\n<p>  \u0417\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0432\u0441\u0435\u0433\u0434\u0430 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043d\u0435\u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u041d\u043e \u043a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u043a\u044d\u0448 \u0438 \u0440\u0430\u0441\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u043c \u0432 \u0441\u0435\u0442\u0438, \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0439 CDN \u043d\u0430\u0445\u043e\u0434\u0438\u0442 \u0441\u0430\u043c\u044b\u0439 \u0431\u043b\u0438\u0437\u043a\u0438\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u043a \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e. \u0412\u043c\u0435\u0441\u0442\u0435 \u0441 \u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0435\u0439 \u043d\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u0444\u0430\u0439\u043b\u043e\u0432 \u044d\u0442\u043e \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043d\u0435\u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 \u0438\u043b\u0438 \u043e\u0434\u0438\u043d\u043e\u0447\u043d\u044b\u043c\u0438 \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u044b\u0442\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u0441\u043b\u0443\u0436\u0438\u0442\u044c \u0432\u0441\u044e \u043f\u043b\u0430\u043d\u0435\u0442\u0443.<\/p>\n<p>  \u0423 \u043e\u0431\u043e\u0438\u0445 CDN \u0448\u0438\u0440\u043e\u043a\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0442\u0438\u0435 \u0438 \u0431\u044b\u0441\u0442\u0440\u044b\u0435 \u0441\u0435\u0440\u0432\u0435\u0440\u044b, \u0437\u0430 \u0441\u0447\u0451\u0442 \u0447\u0435\u0433\u043e \u0441\u043d\u0438\u0436\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0430 \u0438 \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438. \u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u0432\u0440\u0435\u043c\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0430 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0441\u0430\u043c\u044b\u0445 \u0432\u0430\u0436\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u0438\u043a \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u0438.<\/p>\n<h4>\u0427\u0442\u043e \u0436\u0435 \u043b\u0443\u0447\u0448\u0435?<\/h4>\n<p>  \u0423 Cloudinary \u043e\u043a\u043e\u043b\u043e <a href=\"http:\/\/cloudinary.com\/customers\">160 000 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432<\/a>, \u0432\u043a\u043b\u044e\u0447\u0430\u044f Netflix, eBay \u0438 Dropbox. Imgix \u043d\u0435 \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u0442 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u043d\u043e \u043e\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435, \u0447\u0435\u043c \u0443 Cloudinary. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0431\u0430\u0437\u0430 Imgix \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432 \u0441\u0435\u0431\u044f \u0442\u0430\u043a\u0438\u0445 \u0442\u044f\u0436\u0435\u043b\u043e\u0432\u0435\u0441\u043e\u0432 \u043a\u0430\u043a Kickstarter, Exposure, unsplash \u0438 Eventbrite.<\/p>\n<p>  \u0412 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u0442\u043e\u043b\u044c\u043a\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u043d\u0435 \u043f\u043e\u0434\u0434\u0430\u044e\u0442\u0441\u044f \u043e\u0431\u044a\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0439 \u043e\u0446\u0435\u043d\u043a\u0435, \u0447\u0442\u043e \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0441\u0440\u0430\u0432\u043d\u0438\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0434\u0432\u0443\u0445 \u0441\u043b\u0443\u0436\u0431. \u041c\u043d\u043e\u0433\u043e\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\u044d\u0442\u043e \u0437\u0430\u0439\u043c\u0451\u0442 \u0440\u0430\u0437\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f), \u043a\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043d\u0443\u0436\u043d\u044b \u0432 \u0438\u0442\u043e\u0433\u0435. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043a\u043e\u043d\u0446\u043e\u0432, \u0441\u0430\u043c\u044b\u043c \u0432\u0430\u0436\u043d\u044b\u043c \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u043c \u0434\u043b\u044f \u0432\u0430\u0441 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c.<\/p>\n<p>  CDN \u0441\u0442\u043e\u044f\u0442 \u0434\u0435\u043d\u0435\u0433. \u0422\u044f\u0436\u0451\u043b\u044b\u0439 \u0441\u0430\u0439\u0442 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u0442\u0440\u0430\u0444\u0438\u043a\u043e\u043c \u043c\u043e\u0436\u0435\u0442 \u043f\u043b\u0430\u0442\u0438\u0442\u044c \u0441\u043e\u0442\u043d\u0438 \u0434\u043e\u043b\u043b\u0430\u0440\u043e\u0432 \u0432 \u043c\u0435\u0441\u044f\u0446 \u043d\u0430 CDN. \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0437\u043d\u0430\u043d\u0438\u0439 \u0438 \u043d\u0430\u0432\u044b\u043a\u043e\u0432 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u0443\u044e \u043e\u0442\u0434\u0430\u0447\u0443 \u043e\u0442 \u044d\u0442\u0438\u0445 \u0443\u0441\u043b\u0443\u0433. \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0434\u0435\u043b\u0430\u0435\u0442\u0435 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e, \u0442\u043e \u043e\u0441\u043e\u0431\u044b\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u0435\u0442.<\/p>\n<h4>\u0412\u044b\u0432\u043e\u0434<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0442\u0434\u0430\u0451\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u0435\u0440\u0432\u0435\u0440\u0430 \u0438\u043b\u0438 \u043f\u043b\u0430\u043d\u0438\u0440\u0443\u0435\u0442\u0435 \u0442\u0430\u043a \u043f\u043e\u0441\u0442\u0443\u043f\u0438\u0442\u044c, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u0432\u0430\u043c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u043f\u043e\u0434\u0443\u043c\u0430\u0442\u044c \u043e CDN.<\/p>\n<p>  <a name=\"35\"><\/a><\/p>\n<h1>\u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h1>\n<p>  \u0420\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u043e\u0433\u0443\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0447\u0435\u0440\u0435\u0437 <a href=\"https:\/\/developers.google.com\/web\/fundamentals\/performance\/optimizing-content-efficiency\/http-caching#cache-control\">HTTP-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 \u043a\u044d\u0448\u0430<\/a>. \u0412 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, <code>Cache-Control<\/code> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442, \u043a\u0442\u043e \u0438 \u043a\u0430\u043a \u0434\u043e\u043b\u0433\u043e \u0434\u043e\u043b\u0436\u0435\u043d \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043e\u0442\u0432\u0435\u0442\u044b.<\/p>\n<p>  \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u2014 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 <a href=\"http:\/\/kean.github.io\/post\/image-caching\">\u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u0441\u044f<\/a> \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u041d\u0430\u0438\u043b\u0443\u0447\u0448\u0430\u044f \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u044f \u0434\u043b\u044f \u043d\u0438\u0445 \u2014 \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435.<\/p>\n<p>  \u041f\u0440\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435 HTTP-\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 Cache-Control \u0441\u043e \u0441\u0440\u043e\u043a\u043e\u043c <code>max-age<\/code> \u043d\u0430 \u0433\u043e\u0434 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>Cache-Control:public; max-age=31536000<\/code>). \u0422\u0430\u043a\u043e\u0435 \u0430\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u043e\u0435 \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0434\u043b\u044f \u0434\u043e\u043b\u0433\u043e\u0436\u0438\u0432\u0443\u0449\u0438\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a \u0430\u0432\u0430\u0442\u0430\u0440\u044b \u0438 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u0445 \u0441\u0442\u0440\u0430\u043d\u0438\u0446.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0435\u0441\u043b\u0438 \u0432\u044b \u043e\u0442\u0434\u0430\u0451\u0442\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e PHP, \u0442\u043e \u043a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043e\u0442\u043a\u043b\u044e\u0447\u0438\u0442\u0441\u044f \u0438\u0437-\u0437\u0430 \u0434\u0435\u0444\u043e\u043b\u0442\u043d\u043e\u0439 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 <a href=\"http:\/\/php.net\/manual\/en\/function.session-cache-limiter.php\">session_cache_limiter<\/a>. \u041f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/stackoverflow.com\/a\/3905468\">\u043e\u0431\u043e\u0439\u0442\u0438<\/a> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>session_cache_limiter('public')<\/code>, \u0443\u043a\u0430\u0437\u0430\u0432 <code>public<\/code> \u0438 <code>max-age=<\/code>. \u041a\u0430\u043a \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043e\u043f\u0446\u0438\u0438 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043a\u044d\u0448\u0435\u043c.<\/p><\/blockquote>\n<p>  <a name=\"36\"><\/a><\/p>\n<h1>\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0432\u0430\u0436\u043d\u044b\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/h1>\n<p>  \u041a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <a href=\"https:\/\/www.w3.org\/TR\/preload\/\">&lt;link rel=preload&gt;<\/a>.<\/p>\n<p>  <code>&lt;link rel=preload&gt;<\/code> \u2014 \u044d\u0442\u043e \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441, \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u0443\u044f \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>onload<\/code> \u0434\u043b\u044f \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u042d\u0442\u043e \u043f\u043e\u0432\u044b\u0448\u0430\u0435\u0442 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u043d\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0435\u043d\u044b \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u0437\u0436\u0435 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 <code>as<\/code> \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043a\u0430\u043a <code>image<\/code>:<\/p>\n<pre><code>&lt;link rel=\"preload\" as=\"image\" href=\"logo.jpg\"\/&gt;<\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432 \u0434\u043b\u044f <code>&lt;img&gt;<\/code>, <code>&lt;picture&gt;<\/code>, <code>srcset<\/code> \u0438 SVG.<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> <code>&lt;link rel=preload&gt;<\/code> <a href=\"http:\/\/caniuse.com\/#search=preload\">\u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f<\/a> \u0432 Chrome \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043d\u0430 \u0434\u0432\u0438\u0436\u043a\u0435 Blink, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Opera \u0438 <a href=\"https:\/\/developer.apple.com\/safari\/technology-preview\/release-notes\/\">Safari Tech Preview<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1222633\">\u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d\u0430<\/a> \u0432 Firefox.<\/p><\/blockquote>\n<p>  \u0422\u0430\u043a\u0438\u0435 \u0441\u0430\u0439\u0442\u044b, \u043a\u0430\u043a <a href=\"https:\/\/www.usa.philips.com\/\">Philips<\/a>, <a href=\"https:\/\/www.flipkart.com\/\">Flipkart<\/a> \u0438 <a href=\"https:\/\/www.xerox.com\/\">Xerox<\/a>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 <code>&lt;link rel=preload&gt;<\/code> \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0441\u0432\u043e\u0438\u0445 \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u043e\u0432 (\u0447\u0430\u0441\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432 \u043d\u0430\u0447\u0430\u043b\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430). <a href=\"https:\/\/kayak.com\/\">Kayak<\/a> \u0442\u043e\u0436\u0435 \u043f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u0442 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u0433\u043b\u0430\u0432\u043d\u0430\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u043b\u043e\u0441\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/492\/932\/3d3\/4929323d36c4089f7c5ab7d94ced76c0.jpg\"><\/p>\n<h4>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Link preload?<\/h4>\n<p>  \u041f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0441\u0441\u044b\u043b\u043a\u0438 \u0437\u0430\u0434\u0430\u0451\u0442\u0441\u044f \u0442\u0435\u0433\u043e\u043c HTML \u0438\u043b\u0438 \u0432 <a href=\"https:\/\/www.w3.org\/wiki\/LinkHeader\">\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0435 HTTP Link Header<\/a>. \u0412 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0441\u0441\u044b\u043b\u043a\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0443 \u043d\u0430\u0447\u0430\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0432 \u043a\u044d\u0448 \u043f\u0430\u043c\u044f\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0441\u0442\u0435\u043f\u0435\u043d\u044c\u044e \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u0438 \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u0440\u0435\u0441\u0443\u0440\u0441 \u0438 \u043d\u0435\u043b\u044c\u0437\u044f \u0436\u0434\u0430\u0442\u044c, \u043f\u043e\u043a\u0430 \u0441\u043a\u0430\u043d\u0435\u0440 \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u043b\u0438 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0430\u043d\u0430\u043b\u0438\u0437\u0430\u0442\u043e\u0440 \u0435\u0433\u043e \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u0442.<\/p>\n<p>  \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code>Link: &lt;https:\/\/example.com\/logo-hires.jpg&gt;; rel=preload; as=image<\/code><\/pre>\n<p>  \u041a\u043e\u0433\u0434\u0430 Financial Times \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u043b\u0430 \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043d\u0430 \u0441\u0432\u043e\u0451\u043c \u0441\u0430\u0439\u0442\u0435, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0441\u0442\u0430\u043b\u0438 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 <a href=\"https:\/\/twitter.com\/wheresrhys\/status\/843252599902167040\">\u043d\u0430 1 \u0441\u0435\u043a\u0443\u043d\u0434\u0443 \u0431\u044b\u0441\u0442\u0440\u0435\u0435<\/a>:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/5e6\/1f8\/9ad\/5e61f89ad2148c7ed6ab04d1a226c986.jpg\"><br \/>  <i><font color=\"gray\">\u0421\u043d\u0438\u0437\u0443: \u0441 &lt;link rel=preload&gt;, \u0441\u0432\u0435\u0440\u0445\u0443: \u0431\u0435\u0437. \u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0434\u043b\u044f Moto G4 \u043d\u0430 \u043a\u0430\u043d\u0430\u043b\u0435 3G \u043f\u043e \u0442\u0435\u0441\u0442\u0443 WebPageTest <a href=\"https:\/\/www.webpagetest.org\/result\/170319_Z2_GFR\/\">\u0434\u043e<\/a> \u0438 <a href=\"https:\/\/www.webpagetest.org\/result\/170319_R8_G4Q\/\">\u043f\u043e\u0441\u043b\u0435<\/a> \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438<\/font><\/i><\/p>\n<p>  \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c \u0438 \u0412\u0438\u043a\u0438\u043f\u0435\u0434\u0438\u044f \u0443\u0441\u043a\u043e\u0440\u0438\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u00ab\u0434\u043e \u043b\u043e\u0433\u043e\u0442\u0438\u043f\u0430\u00bb, \u043a\u0430\u043a \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0438\u0445 <a href=\"https:\/\/phabricator.wikimedia.org\/phame\/post\/view\/19\/improving_time-to-logo_performance_with_preload_links\/\">\u0438\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0438<\/a>.<\/p>\n<h4>\u041a\u0430\u043a\u0438\u0435 \u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0435 \u043a\u0430\u043c\u043d\u0438 \u0432 \u044d\u0442\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438?<\/h4>\n<p>  \u041d\u0443\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0443\u0432\u0435\u0440\u0435\u043d\u043d\u044b\u043c, \u0447\u0442\u043e \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u0430 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u0430, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u043d \u0441\u0434\u0432\u0438\u0433\u0430\u0435\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u043a\u043e\u043d\u0435\u0446 \u043e\u0447\u0435\u0440\u0435\u0434\u0438. \u041c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u0435\u0442 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c \u0443\u0441\u0438\u043b\u0438\u044f \u043d\u0430 \u0434\u0440\u0443\u0433\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0435?<\/p>\n<p>  \u0412\u0430\u0436\u043d\u043e \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c <code>rel=preload<\/code> \u0434\u043b\u044f \u043f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0431\u0435\u0437 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, WebP) \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u043e\u0442\u0437\u044b\u0432\u0447\u0438\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u0445, \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d\u043d\u044b\u0445 \u0432 srcset, \u0433\u0434\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0442\u0438\u043f\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u044c\u0442\u0435\u0441\u044c \u0441\u043e \u0441\u0442\u0430\u0442\u044c\u044f\u043c\u0438 <a href=\"https:\/\/medium.com\/reloading\/preload-prefetch-and-priorities-in-chrome-776165961bbf\">\u00ab\u041f\u0440\u0435\u0434\u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0438 \u043f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u044b \u0432 Chrome\u00bb<\/a> \u0438 <a href=\"https:\/\/www.smashingmagazine.com\/2016\/02\/preload-what-is-it-good-for\/\">\u00ab\u041f\u0440\u0435\u0434\u0432\u0430\u0440\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430: \u0434\u043b\u044f \u0447\u0435\u0433\u043e \u043e\u043d\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0438\u0442?\u00bb<\/a><\/p>\n<p>  <a name=\"37\"><\/a><\/p>\n<h1>\u0411\u044e\u0434\u0436\u0435\u0442\u044b \u0432\u0435\u0431-\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h1>\n<p>  \u0411\u044e\u0434\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u2014 \u044d\u0442\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u044b\u0439 \u043b\u0438\u043c\u0438\u0442, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u0442\u0430\u0440\u0430\u044e\u0442\u0441\u044f \u043d\u0435 \u043f\u0440\u0435\u0432\u044b\u0448\u0430\u0442\u044c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u00ab\u043d\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 200\u00a0\u041a\u0411 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435\u00bb \u0438\u043b\u0438 \u00ab\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043e\u043b\u0436\u0435\u043d \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u0437\u0430 3 \u0441\u0435\u043a\u0443\u043d\u0434\u044b\u00bb. \u041a\u043e\u0433\u0434\u0430 \u0431\u044e\u0434\u0436\u0435\u0442 \u043d\u0435 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u2014 \u0438\u0437\u0443\u0447\u0438\u0442\u0435, \u043f\u043e\u0447\u0435\u043c\u0443 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0438 \u043a\u0430\u043a \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044e.<\/p>\n<p>  \u0411\u044e\u0434\u0436\u0435\u0442\u044b \u043f\u043e\u043c\u043e\u0433\u0430\u044e\u0442 \u043e\u0431\u0441\u0443\u0436\u0434\u0430\u0442\u044c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b \u0440\u0430\u0431\u043e\u0442\u044b. \u041a\u043e\u0433\u0434\u0430 \u0434\u0438\u0437\u0430\u0439\u043d \u0438\u043b\u0438 \u0431\u0438\u0437\u043d\u0435\u0441-\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0432\u043b\u0438\u044f\u0435\u0442 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c, \u0441\u0432\u0435\u0440\u044f\u0439\u0442\u0435\u0441\u044c \u0441 \u0431\u044e\u0434\u0436\u0435\u0442\u043e\u043c. \u0415\u0441\u043b\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043d\u0435 \u0432\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432 \u0431\u044e\u0434\u0436\u0435\u0442, \u044d\u0442\u043e \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u0442\u043b\u043e\u0436\u0438\u0442\u044c \u0438\u043b\u0438 \u043f\u0435\u0440\u0435\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0435\u0433\u043e.<\/p>\n<p>  \u042f \u043e\u0431\u043d\u0430\u0440\u0443\u0436\u0438\u043b, \u0447\u0442\u043e \u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442\u0441\u044f \u043b\u0443\u0447\u0448\u0435 \u0432\u0441\u0435\u0433\u043e, \u0435\u0441\u043b\u0438 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d. \u0412\u043c\u0435\u0441\u0442\u043e \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f \u0441\u0435\u0442\u0435\u0432\u044b\u0445 \u0433\u0440\u0430\u0444\u0438\u043a\u043e\u0432 \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0438\u0433\u043d\u0430\u043b\u0438\u0437\u0438\u0440\u0443\u0435\u0442 \u043e \u043f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u0438\u0438 \u0431\u044e\u0434\u0436\u0435\u0442\u0430. \u0414\u0432\u0430 \u0442\u0430\u043a\u0438\u0445 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u0445 \u0441\u0435\u0440\u0432\u0438\u0441\u0430\u00a0\u2014 <a href=\"https:\/\/calibreapp.com\/docs\/metrics\/budgets\">Calibre<\/a> \u0438 <a href=\"https:\/\/speedcurve.com\/blog\/tag\/performance-budgets\/\">SpeedCurve<\/a>.<\/p>\n<p>  \u041a\u0430\u043a \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0451\u043d \u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, SpeedCurve \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043c\u043e\u043d\u0438\u0442\u043e\u0440\u0438\u043d\u0433 \u0438 \u043f\u0440\u0435\u0434\u0443\u043f\u0440\u0435\u0436\u0434\u0430\u0435\u0442 \u043e \u043f\u0440\u0435\u0432\u044b\u0448\u0435\u043d\u0438\u0438:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/7b7\/ecb\/206\/7b7ecb2062b83d9a3af42d0c8f1a2b4d.jpg\"><\/p>\n<p>  Calibre \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0443 \u0431\u044e\u0434\u0436\u0435\u0442\u0430 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432. \u042d\u0442\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u0431\u044e\u0434\u0436\u0435\u0442 \u043f\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0434\u043b\u044f \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0433\u043e \u041f\u041a \u043f\u043e WiFi \u043c\u043e\u0436\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0431\u044e\u0434\u0436\u0435\u0442\u0430 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0438\u043a\u043e\u0432.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/post_images\/ac9\/a20\/dfd\/ac9a20dfdeb3a76f937b298c83994feb.jpg\"><\/p>\n<p>  <a name=\"38\"><\/a><\/p>\n<h1>\u0417\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438<\/h1>\n<p>  \u0412 \u043a\u043e\u043d\u0435\u0447\u043d\u043e\u043c \u0441\u0447\u0451\u0442\u0435 \u0432\u044b\u0431\u043e\u0440 \u0441\u0442\u0440\u0430\u0442\u0435\u0433\u0438\u0438 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u043a \u0442\u0438\u043f\u0430\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043e\u0442\u0434\u0430\u0451\u0442\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c, \u0438 \u0440\u0430\u0437\u0443\u043c\u043d\u043e\u043c\u0443 \u043d\u0430\u0431\u043e\u0440\u0443 \u043a\u0440\u0438\u0442\u0435\u0440\u0438\u0435\u0432 \u043e\u0446\u0435\u043d\u043a\u0438 \u043d\u0430 \u0432\u044b\u0431\u043e\u0440. \u042d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c SSIM \u0438\u043b\u0438 Butteraugli, \u0430 \u043d\u0430 \u043c\u0430\u043b\u0435\u043d\u044c\u043a\u043e\u043c \u043d\u0430\u0431\u043e\u0440\u0435 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439 \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c\u0443 \u0433\u043b\u0430\u0437\u0443: \u0447\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043b\u0443\u0447\u0448\u0435, \u0430 \u0447\u0442\u043e \u0445\u0443\u0436\u0435.<\/p>\n<h4>\u0412\u043e\u0442 \u043c\u043e\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438:<\/h4>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b <b>\u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435<\/b> \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<ul>\n<li>Guetzli + jpegtran \u0438\u0437 MozJPEG \u0445\u043e\u0440\u043e\u0448\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u044e\u0442 \u043f\u0440\u0438 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 JPEG \u0431\u043e\u043b\u0435\u0435 90.<br \/> \n<ul>\n<li>\u0414\u043b\u044f \u0432\u0435\u0431\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e <code>q=90<\/code> \u0441\u043b\u0438\u0448\u043a\u043e\u043c \u0440\u0430\u0441\u0442\u043e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e. \u0414\u043b\u044f \u043e\u0431\u044b\u0447\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e <code>q=80<\/code>, \u0430 \u0434\u043b\u044f DPR 2\u00d7 \u0434\u0430\u0436\u0435 <code>q=50<\/code>. \u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 Guetzli \u043d\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u043d\u0430 \u0442\u0430\u043a\u043e\u0439 \u043d\u0438\u0437\u043a\u0438\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c, \u0442\u043e \u0434\u043b\u044f \u0432\u0435\u0431\u0430 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c MozJPEG.<\/li>\n<li>\u041a\u043e\u0440\u043d\u0435\u043b\u044c \u041b\u0435\u0441\u0438\u043d\u0441\u043a\u0438 \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0443\u043b\u0443\u0447\u0448\u0438\u043b \u043a\u043e\u043c\u0430\u043d\u0434\u0443 cjpeg \u0432 mozjpeg, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u043a\u0440\u043e\u0448\u0435\u0447\u043d\u044b\u0439 \u043f\u0440\u043e\u0444\u0438\u043b\u044c sRGB, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u043e\u0447\u044c Chrome \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0442\u044c \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u0446\u0432\u0435\u0442 \u043d\u0430 \u0434\u0438\u0441\u043f\u043b\u0435\u044f\u0445 \u0441 \u0448\u0438\u0440\u043e\u043a\u043e\u0439 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0439 \u0433\u0430\u043c\u043c\u043e\u0439.<\/li>\n<\/ul>\n<\/li>\n<li>PNG pngquant + advpng \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0445\u043e\u0440\u043e\u0448\u0435\u0435 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438\/\u0441\u0436\u0430\u0442\u0438\u044f.<\/li>\n<\/ul>\n<p>  \u0415\u0441\u043b\u0438 \u0432\u044b <b>\u043c\u043e\u0436\u0435\u0442\u0435<\/b> \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0430\u0445, \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f &lt;picture&gt;, <a href=\"https:\/\/www.igvita.com\/2013\/05\/01\/deploying-webp-via-accept-content-negotiation\/\">\u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a Accept<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/scottjehl.github.io\/picturefill\/\">Picturefill<\/a>:<\/p>\n<ul>\n<li>\u041e\u0442\u0434\u0430\u0432\u0430\u0439\u0442\u0435 WebP \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0435\u0433\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442<br \/> \n<ul>\n<li>\u0421\u043e\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 WebP \u0438\u0437 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 100% \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u0418\u043d\u0430\u0447\u0435 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0445\u0443\u0434\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u0431\u043e\u043b\u044c\u0448\u0435\u0433\u043e \u043e\u0431\u044a\u0451\u043c\u0430 \u0441 \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 JPEG <i>\u0438<\/i> \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u044f\u043c\u0438 WebP! \u0415\u0441\u043b\u0438 \u0441\u0436\u0438\u043c\u0430\u0435\u0442\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0435\u043a\u043e\u043c WebP, \u0442\u043e \u0438\u0441\u043a\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0442 \u043c\u0435\u043d\u0435\u0435 \u0437\u0430\u043c\u0435\u0442\u043d\u044b, \u0430 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u0441\u0436\u0430\u0442\u0438\u044f \u0432\u044b\u0448\u0435.<\/li>\n<li>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e WebP <code>-m 4 -q 75<\/code> \u0445\u043e\u0440\u043e\u0448\u0438 \u0434\u043b\u044f \u0431\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u0430 \u0441\u043b\u0443\u0447\u0430\u0435\u0432 \u043a\u0430\u043a \u043e\u043f\u0442\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438 \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u0441\u0436\u0430\u0442\u0438\u044f.<\/li>\n<li>\u0423 WebP \u0435\u0441\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0439 \u0440\u0435\u0436\u0438\u043c \u0441\u0436\u0430\u0442\u0438\u044f \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c (<code>-m 6 -q 100<\/code>), \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0435\u0442 \u0444\u0430\u0439\u043b\u044b, \u0438\u0437\u0443\u0447\u0438\u0432 \u0432\u0441\u0435 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u044f \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432. \u042d\u0442\u043e \u043d\u0430 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u043d\u043e \u0441\u0442\u043e\u0438\u0442 \u0442\u043e\u0433\u043e \u0434\u043b\u044f \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432.<\/li>\n<\/ul>\n<\/li>\n<li>\u0417\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u2014 Guetzli\/MozJPEG \u0434\u043b\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 WebP.<\/li>\n<\/ul>\n<p>  \u0423\u0434\u0430\u0447\u043d\u043e\u0439 \u043a\u043e\u043c\u043f\u0440\u0435\u0441\u0441\u0438\u0438!<\/p>\n<blockquote><p><b>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/b> \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u043f\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043a\u043d\u0438\u0433\u0443 <i><a href=\"https:\/\/www.manning.com\/books\/web-performance-in-action\">Web Performance in Action<\/a><\/i> \u0414\u0436\u0435\u0440\u0435\u043c\u0438 \u0412\u0430\u0433\u043d\u0435\u0440\u0430. \u0412 \u043a\u043d\u0438\u0433\u0435 <i><a href=\"http:\/\/shop.oreilly.com\/product\/0636920039730.do\">High Performance Images<\/a><\/i> \u0442\u043e\u0436\u0435 \u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043e\u0432\u0435\u0442\u043e\u0432 \u0438 \u043d\u044e\u0430\u043d\u0441\u043e\u0432.<\/p><\/blockquote>\n<p>  <a name=\"39\"><\/a><\/p>\n<h1>\u041c\u0435\u043b\u043e\u0447\u0438<\/h1>\n<p>  <\/p>\n<ul>\n<li><a href=\"https:\/\/jpeg.org\/jpegxt\/\">JPEG XT<\/a> \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u0442 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 JPEG 1992 \u0433\u043e\u0434\u0430. \u0427\u0442\u043e\u0431\u044b \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u0443\u044e \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u043e \u0441\u0442\u0430\u0440\u044b\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e 1992 \u0433\u043e\u0434\u0430, \u0430 \u043a\u043e\u0434\u0435\u043a <a href=\"https:\/\/libjpeg-turbo.org\/\">libjpeg-turbo<\/a> \u0432\u044b\u0431\u0440\u0430\u043d \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u044d\u0442\u0430\u043b\u043e\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 (\u043a\u0430\u043a \u0441\u0430\u043c\u044b\u0439 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0439).<\/li>\n<li><a href=\"https:\/\/github.com\/google\/pik\">PIK<\/a> \u2014 \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043a\u043e\u0434\u0435\u043a, \u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0441\u0442\u043e\u0438\u0442 \u0441\u043b\u0435\u0434\u0438\u0442\u044c. \u041e\u043d \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u0438\u043c \u0441 JPEG, \u0438\u043c\u0435\u0435\u0442 \u0431\u043e\u043b\u0435\u0435 \u044d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0446\u0432\u0435\u0442\u043e\u0432\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u0440\u0435\u0438\u043c\u0443\u0449\u0435\u0441\u0442\u0432\u0430 Guetzli. \u041e\u043d \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442 \u043d\u0430 33% \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435 JPEG, \u043d\u043e \u0443\u0434\u0430\u043b\u044f\u0435\u0442 \u0438\u0437 \u0444\u0430\u0439\u043b\u043e\u0432 \u043d\u0430 54% \u0431\u043e\u043b\u044c\u0448\u0435 \u043b\u0438\u0448\u043d\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438, \u0447\u0435\u043c libjpeg. \u041e\u043d \u0431\u044b\u0441\u0442\u0440\u0435\u0435 \u0432 Guetzli \u0432 \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438. <a href=\"https:\/\/encode.ru\/threads\/2814-Psychovisual-analysis-on-modern-lossy-image-codecs\">\u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/a> \u043f\u0441\u0438\u0445\u043e\u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0445\u043e\u0434\u0441\u0442\u0432\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u0434\u0435\u043a\u043e\u0432 \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u043e, \u0447\u0442\u043e PIK \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0432\u043e\u0441\u0445\u043e\u0434\u0438\u0442 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u044b. \u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u043a\u043e\u0434\u0435\u043a \u043f\u043e\u043a\u0430 \u043d\u0430 \u0440\u0430\u043d\u043d\u0438\u0445 \u0441\u0442\u0430\u0434\u0438\u044f\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438, \u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u043e\u043a\u0430 \u043d\u0435\u043f\u0440\u0438\u0435\u043c\u043b\u0435\u043c\u043e \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e (\u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0432\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432 \u0430\u0432\u0433\u0443\u0441\u0442\u0435 2017 \u0433\u043e\u0434\u0430).<\/li>\n<li>\u0414\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0447\u0430\u0441\u0442\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e\u0442 <a href=\"https:\/\/www.imagemagick.org\/script\/index.php\">ImageMagick<\/a>. \u042d\u0442\u043e \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442, \u043d\u043e \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u044b \u043e\u0431\u044b\u0447\u043d\u043e \u043d\u0443\u0436\u0434\u0430\u0435\u0442\u0441\u044f \u0432 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438, \u0430 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0441\u043f\u0440\u0430\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043b\u0443\u0447\u0448\u0435. \u041c\u044b \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u043c <a href=\"https:\/\/github.com\/jcupitt\/libvips\">libvips<\/a>, \u0445\u043e\u0442\u044f \u044d\u0442\u043e \u0431\u043e\u043b\u0435\u0435 \u043d\u0438\u0437\u043a\u043e\u0443\u0440\u043e\u0432\u043d\u0435\u0432\u044b\u0439 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0438 \u0431\u043e\u043b\u0435\u0435 \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043d \u043a \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043a\u0432\u0430\u043b\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0423 ImageMagick \u0442\u0430\u043a\u0436\u0435 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u0438 <a href=\"https:\/\/imagetragick.com\/#moreinfo\">\u043d\u0430\u0445\u043e\u0434\u0438\u043b\u0438<\/a> \u0443\u044f\u0437\u0432\u0438\u043c\u043e\u0441\u0442\u0438 \u0432 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0436\u0435\u043b\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0437\u043d\u0430\u0442\u044c.<\/li>\n<li>Blink (\u0434\u0432\u0438\u0436\u043e\u043a \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u0432 Chrome) \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u0443\u0435\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432\u043d\u0435 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430. \u041f\u0435\u0440\u0435\u043d\u043e\u0441 \u0434\u0435\u043a\u043e\u0434\u0435\u0440\u0430 \u0432 \u043f\u043e\u0442\u043e\u043a \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u0449\u0438\u043a\u0430 \u043e\u0441\u0432\u043e\u0431\u043e\u0436\u0434\u0430\u0435\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0439 \u043f\u043e\u0442\u043e\u043a \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u043d\u0430\u0434 \u0434\u0440\u0443\u0433\u0438\u043c\u0438 \u0437\u0430\u0434\u0430\u0447\u0430\u043c\u0438. \u041c\u044b \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u044d\u0442\u043e \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c \u0434\u0435\u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435\u043c. \u041d\u043e \u0434\u0430\u0436\u0435 \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0440\u0430\u0431\u043e\u0442\u0430 \u0434\u0435\u043a\u043e\u0434\u0435\u0440\u0430 \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0440\u0438\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u0443\u0442\u044c \u0434\u043b\u044f \u0432\u044b\u0432\u043e\u0434\u0430 \u0444\u0440\u0435\u0439\u043c\u0430 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043d \u0432\u0441\u0451 \u0435\u0449\u0451 \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u043e\u0434\u0442\u043e\u0440\u043c\u0430\u0436\u0438\u0432\u0430\u043d\u0438\u0435 \u0438 \u0440\u044b\u0432\u043a\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. <a href=\"https:\/\/html.spec.whatwg.org\/multipage\/embedded-content.html#dom-img-decode\">img.decode()<\/a> API \u0434\u043e\u043b\u0436\u0435\u043d \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u044d\u0442\u0443 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443.<\/li>\n<\/ul>\n<\/div>\n<p>        <script class=\"js-mediator-script\">!function(e){function t(t,n){if(!(n in e)){for(var r,a=e.document,i=a.scripts,o=i.length;o--;)if(-1!==i[o].src.indexOf(t)){r=i[o];break}if(!r){r=a.createElement(\"script\"),r.type=\"text\/javascript\",r.async=!0,r.defer=!0,r.src=t,r.charset=\"UTF-8\";var d=function(){var e=a.getElementsByTagName(\"script\")[0];e.parentNode.insertBefore(r,e)};\"[object Opera]\"==e.opera?a.addEventListener?a.addEventListener(\"DOMContentLoaded\",d,!1):e.attachEvent(\"onload\",d):d()}}}t(\"\/\/mediator.mail.ru\/script\/2820404\/\",\"_mediator\")}(window);<\/script>     <br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/post\/422531\/\"> https:\/\/habr.com\/post\/422531\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div data-io-article-url=\"https:\/\/habr.com\/post\/422531\/\" class=\"post__text post__text-html js-mediator-article\"><font color=\"gray\">\u0410\u0432\u0442\u043e\u0440 \u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043a\u043d\u0438\u0433\u0438 \u2014 \u042d\u0434\u0434\u0438 \u041e\u0441\u043c\u0430\u043d\u0438, \u043e\u0434\u0438\u043d \u0438\u0437 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 Google Chrome<\/font> <\/p>\n<h1>tl;dr<\/h1>\n<p>  <\/p>\n<h4>C\u0436\u0430\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043e<\/h4>\n<p>  \u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0433\u0440\u0430\u0444\u0438\u043a\u0438 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0434\u043e \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041e \u043d\u0435\u0439 \u043b\u0435\u0433\u043a\u043e \u0437\u0430\u0431\u044b\u0442\u044c, \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0438 \u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f, \u0434\u0430 \u0438 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u043b\u0435\u0433\u043a\u043e \u043f\u0440\u043e\u0441\u043a\u043e\u043b\u044c\u0437\u043d\u0443\u0442\u044c \u043c\u0438\u043c\u043e \u043a\u043e\u043d\u0432\u0435\u0439\u0435\u0440\u0430 \u0441\u0431\u043e\u0440\u043a\u0438. \u0414\u043b\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0441\u0431\u043e\u0440\u043a\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 <a href=\"https:\/\/github.com\/imagemin\/imagemin\">imagemin<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/jcupitt\/libvips\">libvips<\/a>. \u0415\u0441\u0442\u044c \u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0440\u0443\u0433\u0438\u0445.<\/p>\n<p>  \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e CDN (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <a href=\"https:\/\/www.akamai.com\/us\/en\/solutions\/why-akamai\/image-management.jsp\">Akamai<\/a>) \u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0432\u0440\u043e\u0434\u0435 <a href=\"https:\/\/cloudinary.com\">Cloudinary<\/a>, <a href=\"https:\/\/imgix.com\">imgix<\/a>, <a href=\"https:\/\/www.fastly.com\/io\/\">Fastly Image Optimizer<\/a>, <a href=\"https:\/\/www.instartlogic.com\/technology\/machine-learning\/smartvision\">Instart Logic SmartVision<\/a> \u0438 <a href=\"https:\/\/imageoptim.com\/api\">ImageOptim API<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u043a\u043e\u043c\u043f\u043b\u0435\u043a\u0441\u043d\u044b\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439.<\/p>\n<p>  \u041d\u0430 \u0447\u0442\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0435\u0439 \u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u0438 \u0432\u044b \u043f\u043e\u0442\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u0440\u0435\u043c\u044f, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u0440\u043e\u0436\u0435 \u043e\u043f\u043b\u0430\u0442\u044b \u0438\u0445 \u0443\u0441\u043b\u0443\u0433 (\u0443 Cloudinary \u0435\u0441\u0442\u044c <a href=\"http:\/\/cloudinary.com\/pricing\">\u0431\u0435\u0441\u043f\u043b\u0430\u0442\u043d\u044b\u0439<\/a> \u0442\u0430\u0440\u0438\u0444). \u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0451-\u0442\u0430\u043a\u0438 \u043d\u0435 \u0445\u043e\u0442\u0438\u0442\u0435 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u043d\u0430 \u0430\u0443\u0442\u0441\u043e\u0440\u0441\u0438\u043d\u0433 \u043f\u043e \u0441\u043e\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\u043c \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u0438\u0437-\u0437\u0430 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0439 latency, \u0442\u043e \u0432\u044b\u0431\u0438\u0440\u0430\u0439\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0451\u043d\u043d\u044b\u0435 \u0432\u044b\u0448\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0441 \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c \u043a\u043e\u0434\u043e\u043c. \u041f\u0440\u043e\u0435\u043a\u0442\u044b <a href=\"https:\/\/github.com\/imazen\/imageflow\">Imageflow<\/a> \u0438\u043b\u0438 <a href=\"https:\/\/github.com\/thumbor\/thumbor\">Thumbor<\/a> \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e\u0442 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u0443 \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u043c \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0435.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-289076","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/289076","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=289076"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/289076\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=289076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=289076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=289076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}