{"id":355237,"date":"2024-05-20T23:04:28","date_gmt":"2024-05-20T23:04:28","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=355237"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=355237","title":{"rendered":"<span>\u041f\u0440\u043e\u0433\u0440\u0435\u0441\u0441\u0438\u0432\u043d\u044b\u0439 \u0440\u0435\u043d\u0434\u0435\u0440 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c blurhash<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/b96\/4c6\/f87\/b964c6f87073117af9ed857ad889ffa7.png\" width=\"718\" height=\"425\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/b96\/4c6\/f87\/b964c6f87073117af9ed857ad889ffa7.png\"\/><\/figure>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f picture \u0441 srcset, \u043d\u043e \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u044e\u0437\u0435\u0440 \u0432\u0438\u0434\u0438\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u043b\u043e\u0445\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435, \u043f\u043e\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0445\u043e\u0442\u044f\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0437\u0430 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f. \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u044d\u0442\u0438\u043c, \u0435\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u044d\u0442\u043e \u0443\u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0435\u0433\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442 \u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435, \u0435\u0441\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u043a\u0440\u043e\u0435\u0442 \u0441\u0430\u0439\u0442.<\/p>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0445\u0443\u0434\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u0438\u043b\u044c\u043d\u0435\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0435\u043b\u044b\u0439 \u0431\u043b\u043e\u043a. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0435\u0433\u043e \u0438 \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/261\/275\/a24\/261275a24b5024490068c13175acc166.png\" width=\"2206\" height=\"1359\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/261\/275\/a24\/261275a24b5024490068c13175acc166.png\"\/><\/figure>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438?<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Skeleton<\/h3>\n<p><strong>\u041f\u043b\u044e\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0432 2023 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0443\u0447\u043d\u043e \u0438 \u043d\u0435 \u0446\u0435\u043f\u043b\u044f\u0435\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 (\u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438)<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/31a\/cbf\/75b\/31acbf75b894dba182defe5d4f272418.gif\" width=\"1039\" height=\"314\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/31a\/cbf\/75b\/31acbf75b894dba182defe5d4f272418.gif\"\/><\/figure>\n<h3>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 base64<\/h3>\n<p>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0436\u0430\u0442\u043e\u0433\u043e \u0434\u043e 1-2kb \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c blur \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c. \u0412\u0440\u043e\u0434\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0438\u0434\u0435\u044f&#8230;<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/575\/f77\/52d\/575f7752df053a4e65647c3fd125b733.png\" alt=\"\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0432\u0438\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\" title=\"\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0432\u0438\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f\" width=\"1407\" height=\"455\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/575\/f77\/52d\/575f7752df053a4e65647c3fd125b733.png\"\/><\/p>\n<div><figcaption>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0432\u0438\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/953\/5c1\/2d1\/9535c12d16220782926832e462562594.gif\" alt=\"\u0412\u0438\u0434 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439\" title=\"\u0412\u0438\u0434 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439\" width=\"1843\" height=\"570\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/953\/5c1\/2d1\/9535c12d16220782926832e462562594.gif\"\/><\/p>\n<div><figcaption>\u0412\u0438\u0434 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u041f\u043b\u044e\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0442\u0430\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0442.\u043a. \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0432 desktop, tablet \u0438 mobile \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f (\u0440\u0430\u0437\u043c\u0435\u0440, \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d, \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439), \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u0438\u0437 api base64 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430. \u042d\u0442\u043e \u043a\u0440\u0430\u0442\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 json&#8217;a (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430, \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a).<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u0443 \u043d\u0430\u0441 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/f63\/a9c\/074\/f63a9c074855be17b87628c3a2a52a96.webp\" width=\"1446\" height=\"380\"\/><\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c base64 \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u043b\u0443\u0447\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h3>Progressive JPEG<\/h3>\n<p>\u042d\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 jpeg \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u043e (\u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437), \u0430 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0431\u043b\u043e\u043a\u0430 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0435\u0432 (\u043e\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u0445\u0443\u0434\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0435\u0433\u043e).<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/2d9\/c86\/dd8\/2d9c86dd857247b88a3753d8d489339b.webp\" width=\"1464\" height=\"336\"\/><\/figure>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u00a0<a href=\"https:\/\/timeweb.com\/ru\/community\/articles\/chto-takoe-progressive-jpeg\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u0438<\/a><\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435:<\/p>\n<ul>\n<li>\n<p>\u044d\u0442\u043e jpeg, \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0442\u0430\u043a \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043c\u044b \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, webp \u0438\u043b\u0438 avif),<\/p>\n<\/li>\n<li>\n<p>\u0445\u043e\u0442\u044f JPEG \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0438\u043d\u0438\u0440\u0443\u044e\u0449\u0435\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u043d \u043d\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043b\u0438 \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0436\u0430\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0431\u0438\u0442\u043e\u0432\u043e\u0439 \u0433\u043b\u0443\u0431\u0438\u043d\u043e\u0439 (\u043e\u0442 9 \u0434\u043e 16 \u0431\u0438\u0442), \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u043c, \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c. \u0441\u0436\u0430\u0442\u0438\u0435 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p><strong><em>\u042d\u0442\u043e \u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c.<\/em><\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5ca\/f74\/d09\/5caf74d09c4aae725a055be720f6285d.webp\" width=\"1467\" height=\"614\"\/><\/figure>\n<h3>Blurhash<\/h3>\n<p><a href=\"https:\/\/github.com\/woltapp\/blurhash\" rel=\"noopener noreferrer nofollow\">Blurhash<\/a>\u00a0\u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u043a\u0440\u0443\u0442\u044b\u043c\u0438 \u0440\u0435\u0431\u044f\u0442\u0430\u043c\u0438 \u0441 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044f\u0437\u044b\u043a<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f8\/9b0\/258\/5f89b0258cac609ec7a127fac088e68d.gif\" width=\"1535\" height=\"566\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/5f8\/9b0\/258\/5f89b0258cac609ec7a127fac088e68d.gif\"\/><\/figure>\n<h4>\u0412 \u0447\u0435\u043c \u0435\u0435 \u0441\u0443\u0442\u044c \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430?<\/h4>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 (20\u201330 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432) \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 base83, \u0438 \u00ab\u043d\u0430\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c\u00bb \u0435\u0435 \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441.<\/p>\n<p><strong>\u041f\u043b\u044e\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0435\u0441 json\u2019\u0430 \u0434\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0437\u0430\u0431\u043b\u044e\u0440\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 (desktop, tablet, mobile)<\/p>\n<\/li>\n<li>\n<p>\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u00ab\u043c\u044f\u0433\u043a\u0438\u0435\u00bb \u043e\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f canvas \u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0438\u0437 docker \u043e\u0431\u0440\u0430\u0437\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c base83 \u0434\u043b\u044f \u0432\u0430\u0448\u0438\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u041c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 <a href=\"https:\/\/github.com\/dev-family\/blurhash\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/u><\/a>.<\/p>\n<p><a href=\"https:\/\/github.com\/dev-family\/blurhash-frontend-example\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0448\u0430 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043b\u044e\u0431\u0435\u0437\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043d\u0430\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/react-blurhash\" rel=\"noopener noreferrer nofollow\">react-blurhash<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u0443\u0436\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 blurhash.<\/p>\n<p><strong>\u041f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434 json, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/strong><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9eb\/206\/8b6\/9eb2068b68c0fe6157559da18dcd814c.webp\" width=\"1446\" height=\"380\"\/><\/figure>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c, \u043d\u0435\u0442 \u043e\u0441\u0442\u0440\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439 ( \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432). \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u043a\u043e\u043f\u043c\u043e\u043d\u0435\u043d\u0442 Picture \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 Image \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u043b\u0438\u0448\u044c \u043f\u043e\u043b\u0435:<\/p>\n<pre><code class=\"perl\">placeholder: \"|FDcXS4nxu~q4nt7-;9Fxu?bxu9FxuRjIU%MayRjRj%MRjIU%MM{RjxvRjozofxuM{t8xuIUofofWBRjt7RjayxuM{WBt7InWUofWBoft7WBWBofRioft7ayt7oeayofWBRjoLs:ayoffRayofR*ofj[j[oMWBayj[azfR\"<\/code><\/pre>\n<p>\u041e\u043d\u043e \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 blurhash (\u0434\u043b\u0438\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f).<\/p>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<ul>\n<li>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0437\u043e\u043d\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 useEffect, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 set \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Picture \u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e canvas c blurhash<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e, canvas \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0440\u044f\u0447\u0435\u0442\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<h4>\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<pre><code class=\"cs\">export interface LazyPictureProps { data: IPicture; alt?: string; placeholder?: string; breakpoints?: IBreakpoints; onLoadSuccess?: (img: EventTarget) => void; onLoadError?: () => void; className?: string; } export interface IBreakpoints { desktop: string; tablet: string; mobile: string; }<\/code><\/pre>\n<p>\u0421\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"php\">export default memo(function LazyPicture({ data, onLoadError, onLoadSuccess, className = \"\", ...props }: LazyPictureProps) { const [isLoaded, setIsLoaded] = useState(false); const { placeholder, ...imageProps } = data; const imgPlaceholder = useMemo( () => placeholder || defaultBlurPlaceholder, [placeholder] ); const [imageSrc, setImageSrc] = useState(defaultImageProps); const imageRef = useRef(null); const _onLoad: ReactEventHandler = (event) => { const img = event.target; if (onLoadSuccess) onLoadSuccess(img); setIsLoaded(true); }; }<\/code><\/pre>\n<p>\u0417\u0430\u0434\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0444\u043b\u0430\u0433\u00a0<strong>isLoaded<\/strong>\u00a0\u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p><strong>imgPlaceholder<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0430 blurhash;<\/p>\n<p><strong>imageSrc<\/strong>\u00a0\u2014 \u0441\u044e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u00ab\u0441\u0435\u0442\u0438\u0442\u044c\u0441\u044f\u00bb \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430. \u0438\u043b\u0438, \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u043b\u0435\u0439);<\/p>\n<p><strong>imageRef\u00a0<\/strong>\u2014<strong>\u00a0<\/strong>\u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044e\u0437\u0435\u0440\u0430;<\/p>\n<p><strong>onLoad<\/strong>\u00a0\u2014 \u0445\u0435\u043d\u0434\u043b\u0435\u0440 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0<strong>useEffect<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u044e \u0440\u0430\u0431\u043e\u0442\u0443:<\/p>\n<pre><code class=\"coffeescript\">useEffect(() => { let observer: IntersectionObserver; if (IntersectionObserver) { observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { \/\/ when image is visible in the viewport + rootMargin if (entry.intersectionRatio > 0 || entry.isIntersecting) { setImageSrc(imageProps); imageRef?.current &amp;&amp; observer.unobserve(imageRef?.current); } }); }, { threshold: 0.01, rootMargin: \"20%\", } ); imageRef?.current &amp;&amp; observer.observe(imageRef?.current); } else { \/\/ Old browsers fallback setImageSrc(imageProps); } return () => { imageRef?.current &amp;&amp; observer.unobserve(imageRef.current); }; }, []);<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<strong>IntersectionObserver<\/strong>\u00a0\u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0437\u043e\u043d\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u2014 \u0441\u0435\u0442\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 Picture \u0438 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443.<\/p>\n<p><strong>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e jsx:<\/strong><\/p>\n<pre><code class=\"xml\">return ( &lt;StyledLazyImage> &lt;StyledBlurHash isHidden={isLoaded}> &lt;Blurhash hash={imgPlaceholder} width={\"100%\"} height={\"100%\"} resolutionX={32} resolutionY={32} punch={1} \/> &lt;\/StyledBlurHash> &lt;Picture ref={imageRef} {...imageSrc} {...props} className={${className}&lt;\/span> ${!&lt;span class=\"hljs-attribute\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">isLoaded&lt;\/span> &amp;amp;&amp;amp; \"&lt;span class=\"hljs-attribute\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">lazy&lt;\/span>\"}} onLoad={_onLoad} onLoadError={onLoadError} \/> &lt;\/StyledLazyImage> );<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f\u00a0<a href=\"https:\/\/github.com\/styled-components\/styled-components\" rel=\"noopener noreferrer nofollow\">styled-components<\/a>, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p><strong>StyledLazyImage<\/strong>\u00a0\u2014 div \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438:<\/p>\n<p><strong>Blurhash\u00a0<\/strong>\u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/react-blurhash\" rel=\"noopener noreferrer nofollow\">react-blurhash<\/a>, \u0435\u0433\u043e \u043f\u0440\u043e\u043f\u0441\u044b:<\/p>\n<pre><code class=\"cpp\">const StyledLazyImage = styled.div  width: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   height: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   position: relative;   canvas {     width: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;     height: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   }   .lazy {     opacity: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">0&lt;\/span>;   };<\/code><\/pre>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p>Name<\/p>\n<\/th>\n<th>\n<p>Description<\/p>\n<\/th>\n<th>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">hash (string)<\/p>\n<\/td>\n<td>\n<p align=\"left\">The encoded blurhash string.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">width (int | string)<\/p>\n<\/td>\n<td>\n<p align=\"left\">Width (CSS) of the decoded image.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">height (int | string)<\/p>\n<\/td>\n<td>\n<p align=\"left\">Height (CSS) of the decoded image.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">resolutionX (int)<\/p>\n<\/td>\n<td>\n<p align=\"left\">The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">resolutionY (int)<\/p>\n<\/td>\n<td>\n<p align=\"left\">The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">punch (int)<\/p>\n<\/td>\n<td>\n<p align=\"left\">NControls the &#171;punch&#187; value (~contrast) of the blurhash decoding algorithm. (Default: 1)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><strong>StyledBlurhash \u2014\u00a0<\/strong>\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Blurhash, \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"cpp\">const StyledBlurHash = styled.div&lt;{ isHidden?: boolean }>   position: absolute;   width: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   height: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   z-index: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">22222&lt;\/span>;   visibility: visible;   transition: visibility &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">0.2&lt;\/span>s, opacity &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">0.2&lt;\/span>s;   ${({ isHidden }) =&amp;gt;     isHidden &amp;amp;&amp;amp;       css visibility: hidden; opacity: 0; animation: ${displayAnim} 0.2s;   }; const displayAnim = keyframes  to {     display: none;   };<\/code><\/pre>\n<p>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438 \u043f\u043b\u0430\u0432\u043d\u043e\u0441\u0442\u044c \u0441\u043a\u0440\u044b\u0442\u0438\u044f Blurhash \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 transition \u0438 animation.<\/p>\n<p><strong>Picture<\/strong>\u00a0\u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 (\u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u043d\u0430 NextImage \u0438\u043b\u0438 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439, \u043e\u043d \u0434\u043e\u043b\u0436\u0435\u043d \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c image).<\/p>\n<pre><code class=\"php\">const Picture = forwardRef((props, imageRef) => { const { noImageOnTouch = false, alt = \"\", onLoad, onLoadError, className = \"\", } = props; const desktopImages: PictureSources = props.desktop || defaultImageProps.desktop; const { x1: desktop_x1, x2: desktop_x2, webp_x1: desktop_webp_x1, webp_x2: desktop_webp_x2, } = desktopImages; const tabletImages: PictureSources = props.tablet || props.desktop || defaultImageProps.tablet; const { x1: tablet_x1, x2: tablet_x2, webp_x1: tablet_webp_x1, webp_x2: tablet_webp_x2, } = tabletImages; const mobileImages: PictureSources = props.mobile || defaultImageProps.mobile; const { x1: mobile_x1, x2: mobile_x2, webp_x1: mobile_webp_x1, webp_x2: mobile_webp_x2, } = mobileImages;<\/code><\/pre>\n<p>\u041e\u043d \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0441\u0441\u044b\u043b\u043a\u0438 \u043d\u0430 \u0432\u0441\u0435 \u0442\u0438\u043f\u044b \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0438 \u0441\u0435\u0442\u0438\u0442 \u0438\u0445 \u0432 &lt;picture\/><\/p>\n<pre><code class=\"bash\">return !Object.keys(props).length ? ( &lt;img src=\"\/images\/error-page-image.png\" alt=\"error-image\" \/> ) : desktop_x1 &amp;&amp; desktop_x1.endsWith(\".svg\") ? ( &lt;img src={desktop_x1} alt=\"\" \/> ) : ( &lt;picture> {noImageOnTouch &amp;&amp; ( &lt;source media=\"(hover: none) and (pointer: coarse), (hover: none) and (pointer: fine)\" srcSet={base64Pixel} sizes=\"100%\" \/> )} &lt;source type=\"image\/webp\" media=\"(min-width: 1025px)\" srcSet={&lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${desktop_webp_x1}&lt;\/span>, &lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${desktop_webp_x2}&lt;\/span> &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">2&lt;\/span>x} \/> &lt;source media=\"(min-width: 1025px)\" srcSet={&lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${desktop_x1}&lt;\/span>, &lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${desktop_x2}&lt;\/span> &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">2&lt;\/span>x} \/> &lt;source type=\"image\/webp\" media=\"(min-width: 501px)\" srcSet={&lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${tablet_webp_x1}&lt;\/span>, &lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${tablet_webp_x2}&lt;\/span> &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">2&lt;\/span>x} \/> &lt;source media=\"(min-width: 501px)\" srcSet={&lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${tablet_x1}&lt;\/span>, &lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${tablet_x2}&lt;\/span> &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">2&lt;\/span>x} \/> &lt;source type=\"image\/webp\" media=\"(max-width: 500px)\" srcSet={&lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${mobile_webp_x1}&lt;\/span>, &lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${mobile_webp_x2}&lt;\/span> &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">2&lt;\/span>x} \/> &lt;source media=\"(max-width: 500px)\" srcSet={&lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${mobile_x1}&lt;\/span>, &lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${mobile_x2}&lt;\/span> &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">2&lt;\/span>x} \/> &lt;img ref={imageRef} src={desktop_x1} srcSet={&lt;span class=\"hljs-variable\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">${desktop_x2}&lt;\/span> &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">2&lt;\/span>x} crossOrigin=\"\" className={className} alt={alt} onLoad={onLoad} onError={onLoadError} \/> &lt;\/picture> ); }; Picture.displayName = \"Picture\"; export default Picture;<\/code><\/pre>\n<h3>\u041f\u043e\u0434\u0432\u043e\u0434\u044f \u0438\u0442\u043e\u0433\u0438<\/h3>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u044b\u043b \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d \u0432 \u0443\u0436\u0435 \u0433\u043e\u0442\u043e\u0432\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u0441 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0432 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043b\u0430\u0439\u0434\u0435\u0440\u0430\u0445 \u0438 \u0431\u043b\u043e\u0447\u043d\u044b\u0445 \u043c\u043e\u0434\u0435\u043b\u044f\u0445.<\/p>\n<p>\u0417\u0430\u0434\u0430\u0447\u0430 \u0431\u044b\u043b\u0430 &#8212; \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0431\u0435\u0437 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u0438. \u0421\u0435\u0439\u0447\u0430\u0441 \u043c\u044b \u043f\u0440\u043e\u0431\u0443\u0435\u043c \u044d\u0442\u0443 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u043d\u0430 \u0434\u0440\u0443\u0433\u0438\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445 \u0438 \u0444\u0438\u0434\u0431\u0435\u043a \u043f\u043e\u043b\u043e\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439, \u0447\u0442\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u0440\u0430\u0434\u043e\u0432\u0430\u0442\u044c.<\/p>\n<p>\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u044b\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 React \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c\u00a0<a href=\"https:\/\/github.com\/dev-family\/blurhash-frontend-example\/tree\/main\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>. \u041c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441 \u043d\u0430 Go \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f blurhash \u0438\u0437 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u2014\u00a0<a href=\"https:\/\/github.com\/dev-family\/blurhash\" rel=\"noopener noreferrer nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/568\/89e\/e58\/56889ee583770eec17942f7a0cb0df53.webp\" width=\"915\" height=\"521\"\/><\/figure>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><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\/ru\/articles\/761882\/\"> https:\/\/habr.com\/ru\/articles\/761882\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<figure class=\"full-width\"><\/figure>\n<p>\u041c\u044b \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0430\u0434\u0430\u043f\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f picture \u0441 srcset, \u043d\u043e \u0437\u0430\u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043b\u0435\u043d\u0438\u0432\u0443\u044e \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445, \u043a\u043e\u0433\u0434\u0430 \u044e\u0437\u0435\u0440 \u0432\u0438\u0434\u0438\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u043f\u043b\u043e\u0445\u043e\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435, \u043f\u043e\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0435.<\/p>\n<p>\u0412 \u043d\u0430\u0448\u0435 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u0445\u043e\u0442\u044f\u0442 \u043f\u043e\u043b\u0443\u0447\u0430\u0442\u044c \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0437\u0430 \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u043c\u0435\u043d\u044c\u0448\u0435\u0435 \u0432\u0440\u0435\u043c\u044f. \u0412 \u0441\u0432\u044f\u0437\u0438 \u0441 \u044d\u0442\u0438\u043c, \u0435\u0441\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e, \u044d\u0442\u043e \u0443\u0436\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0435\u0433\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u0442\u0438\u0442 \u0438 \u043f\u0440\u043e\u0439\u0434\u0435\u0442 \u0434\u0430\u043b\u044c\u0448\u0435, \u0435\u0441\u043b\u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u043a\u0440\u043e\u0435\u0442 \u0441\u0430\u0439\u0442.<\/p>\n<p>\u0412\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0438\u043b\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0445\u0443\u0434\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438, \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0435\u0442 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441\u0438\u043b\u044c\u043d\u0435\u0435, \u0447\u0435\u043c \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u0435\u043b\u044b\u0439 \u0431\u043b\u043e\u043a. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0440\u0435\u0448\u0438\u043b\u0438, \u0447\u0442\u043e \u0435\u0433\u043e \u0438 \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u044b\u0432\u0430\u0442\u044c. \u041e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u0442\u044c \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041a\u0430\u043a\u0438\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438?<\/p>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 Skeleton<\/h3>\n<p><strong>\u041f\u043b\u044e\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u0430\u044f \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/p>\n<\/li>\n<li>\n<p>\u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0440\u0435\u0441\u0443\u0440\u0441\u043e\u0432<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0432 2023 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0441\u043a\u0443\u0447\u043d\u043e \u0438 \u043d\u0435 \u0446\u0435\u043f\u043b\u044f\u0435\u0442 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 (\u043d\u0435 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0436\u0435\u043b\u0430\u043d\u0438\u0435 \u0434\u043e\u0436\u0434\u0430\u0442\u044c\u0441\u044f \u043e\u043a\u043e\u043d\u0447\u0430\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438)<\/p>\n<\/li>\n<\/ul>\n<figure class=\"full-width\"><\/figure>\n<h3>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 base64<\/h3>\n<p>\u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0436\u0430\u0442\u043e\u0433\u043e \u0434\u043e 1-2kb \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u043d\u0430\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u043c blur \u044d\u0444\u0444\u0435\u043a\u0442\u043e\u043c. \u0412\u0440\u043e\u0434\u0435 \u043e\u0442\u043b\u0438\u0447\u043d\u0430\u044f \u0438\u0434\u0435\u044f&#8230;<\/p>\n<figure class=\"full-width\">\n<div><figcaption>\u0418\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u0432\u0438\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\">\n<div><figcaption>\u0412\u0438\u0434 \u0441 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439<\/figcaption><\/div>\n<\/figure>\n<p><strong>\u041f\u043b\u044e\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0442\u0430\u043a\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043f\u043e\u0447\u0442\u0438 \u043c\u0433\u043d\u043e\u0432\u0435\u043d\u043d\u043e.<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0442.\u043a. \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 \u0432 desktop, tablet \u0438 mobile \u043c\u043e\u0433\u0443\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f (\u0440\u0430\u0437\u043c\u0435\u0440, \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d, \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439), \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u0438\u0437 api base64 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f \u044d\u043a\u0440\u0430\u043d\u0430. \u042d\u0442\u043e \u043a\u0440\u0430\u0442\u043d\u043e \u0443\u0432\u0435\u043b\u0438\u0447\u0438\u0432\u0430\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440 json&#8217;a (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u043c\u044b \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043a\u0430\u0442\u0430\u043b\u043e\u0433\u0430, \u043a\u0430\u0436\u0434\u0430\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0430 \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u0438\u0437 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a).<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0442\u0430\u043a \u0443 \u043d\u0430\u0441 \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043e\u0431\u044a\u0435\u043a\u0442 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c base64 \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u043e\u0434 \u043a\u0430\u0436\u0434\u043e\u0435 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0435 \u043b\u0443\u0447\u0448\u0435\u0439 \u0438\u0434\u0435\u0435\u0439, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u0434\u0435\u043c \u0434\u0430\u043b\u044c\u0448\u0435.<\/p>\n<h3>Progressive JPEG<\/h3>\n<p>\u042d\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u043e\u0432\u0430\u044f \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 jpeg \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0433\u0434\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u043b\u0438\u043d\u0435\u0439\u043d\u043e (\u0441\u0432\u0435\u0440\u0445\u0443 \u0432\u043d\u0438\u0437), \u0430 \u0441\u0440\u0430\u0437\u0443 \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e \u0431\u043b\u043e\u043a\u0430 \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u043b\u043e\u0435\u0432 (\u043e\u0442 \u0441\u0430\u043c\u043e\u0433\u043e \u0445\u0443\u0434\u0448\u0435\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0434\u043e \u043d\u0430\u0438\u043b\u0443\u0447\u0448\u0435\u0433\u043e).<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u0437\u00a0<a href=\"https:\/\/timeweb.com\/ru\/community\/articles\/chto-takoe-progressive-jpeg\" rel=\"noopener noreferrer nofollow\">\u0441\u0442\u0430\u0442\u044c\u0438<\/a><\/p>\n<p>\u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435, \u0435\u0441\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043d\u044e\u0430\u043d\u0441\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u043f\u043e\u0438\u0441\u043a\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u0435\u0449\u0435:<\/p>\n<ul>\n<li>\n<p>\u044d\u0442\u043e jpeg, \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0442\u0430\u043a \u043d\u0435 \u043c\u043e\u0436\u0435\u0442, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442, \u043c\u044b \u0432\u044b\u043d\u0443\u0436\u0434\u0435\u043d\u044b \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0434\u0440\u0443\u0433\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, webp \u0438\u043b\u0438 avif),<\/p>\n<\/li>\n<li>\n<p>\u0445\u043e\u0442\u044f JPEG \u043f\u043e-\u043f\u0440\u0435\u0436\u043d\u0435\u043c\u0443 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0434\u043e\u043c\u0438\u043d\u0438\u0440\u0443\u044e\u0449\u0435\u0439 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0435\u0439 \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0446\u0438\u0444\u0440\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u043d \u043d\u0435 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u043c \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f\u043c, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0430\u043b\u0438 \u0432\u0430\u0436\u043d\u044b\u043c\u0438 \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0435 \u0433\u043e\u0434\u044b, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u0436\u0430\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0441 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0439 \u0431\u0438\u0442\u043e\u0432\u043e\u0439 \u0433\u043b\u0443\u0431\u0438\u043d\u043e\u0439 (\u043e\u0442 9 \u0434\u043e 16 \u0431\u0438\u0442), \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0441 \u0432\u044b\u0441\u043e\u043a\u0438\u043c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u0434\u0438\u0430\u043f\u0430\u0437\u043e\u043d\u043e\u043c, \u0431\u0435\u0437 \u043f\u043e\u0442\u0435\u0440\u044c. \u0441\u0436\u0430\u0442\u0438\u0435 \u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u043b\u044c\u0444\u0430-\u043a\u0430\u043d\u0430\u043b\u043e\u0432.<\/p>\n<\/li>\n<\/ul>\n<p><strong><em>\u042d\u0442\u043e \u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b\u0438\u0441\u044c.<\/em><\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<h3>Blurhash<\/h3>\n<p><a href=\"https:\/\/github.com\/woltapp\/blurhash\" rel=\"noopener noreferrer nofollow\">Blurhash<\/a>\u00a0\u2014 \u044d\u0442\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430, \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0430\u043d\u043d\u0430\u044f \u043a\u0440\u0443\u0442\u044b\u043c\u0438 \u0440\u0435\u0431\u044f\u0442\u0430\u043c\u0438 \u0441 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u044f\u0437\u044b\u043a<\/p>\n<figure class=\"full-width\"><\/figure>\n<h4>\u0412 \u0447\u0435\u043c \u0435\u0435 \u0441\u0443\u0442\u044c \u0434\u043b\u044f \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0430?<\/h4>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043a\u043e\u0440\u043e\u0442\u043a\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443 (20\u201330 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432) \u0432 \u0444\u043e\u0440\u043c\u0430\u0442\u0435 base83, \u0438 \u00ab\u043d\u0430\u0442\u044f\u0433\u0438\u0432\u0430\u0435\u043c\u00bb \u0435\u0435 \u043d\u0430 \u043a\u0430\u043d\u0432\u0430\u0441.<\/p>\n<p><strong>\u041f\u043b\u044e\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u0434\u0430\u043d\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0435\u0441 json\u2019\u0430 \u0434\u043e \u043c\u0438\u043d\u0438\u043c\u0443\u043c\u0430<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u0437\u0430\u0431\u043b\u044e\u0440\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438<\/p>\n<\/li>\n<li>\n<p>\u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u043e\u0432 (desktop, tablet, mobile)<\/p>\n<\/li>\n<li>\n<p>\u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0438\u043c\u0435\u0435\u0442 \u00ab\u043c\u044f\u0433\u043a\u0438\u0435\u00bb \u043e\u0447\u0435\u0440\u0442\u0430\u043d\u0438\u044f \u0431\u0443\u0434\u0443\u0449\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b:<\/strong><\/p>\n<ul>\n<li>\n<p>\u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f canvas \u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u0441\u0438\u043b\u044c\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u044b\u0442\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430<\/p>\n<\/li>\n<\/ul>\n<p>\u041f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435, \u043c\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043f\u043e\u0434\u043d\u044f\u0442\u044c \u0438\u0437 docker \u043e\u0431\u0440\u0430\u0437\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u0442 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c base83 \u0434\u043b\u044f \u0432\u0430\u0448\u0438\u0445 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u041c\u0438\u043a\u0440\u043e\u0441\u0435\u0440\u0432\u0438\u0441 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 <a href=\"https:\/\/github.com\/dev-family\/blurhash\" rel=\"noopener noreferrer nofollow\"><u>\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438<\/u><\/a>.<\/p>\n<p><a href=\"https:\/\/github.com\/dev-family\/blurhash-frontend-example\" rel=\"noopener noreferrer nofollow\">\u041d\u0430\u0448\u0430 \u0438\u043c\u043f\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f<\/a><\/p>\n<p>\u0420\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043b\u044e\u0431\u0435\u0437\u043d\u043e \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0438 \u043d\u0430\u043c \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/react-blurhash\" rel=\"noopener noreferrer nofollow\">react-blurhash<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0438\u043c\u0435\u0435\u0442 \u0443\u0436\u0435 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 blurhash.<\/p>\n<p><strong>\u041f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0432\u0438\u0434 json, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u044d\u0442\u043e\u0442 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/strong><\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0412 \u0446\u0435\u043b\u043e\u043c, \u043d\u0435\u0442 \u043e\u0441\u0442\u0440\u043e\u0439 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u0438\u0441\u044b\u043b\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0440\u0430\u0437\u043d\u044b\u0445 \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u0439 ( \u0438 \u0440\u0430\u0437\u043d\u044b\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u043e\u0432). \u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0442\u0438\u043f\u0438\u0437\u0430\u0446\u0438\u044e \u0438 \u0437\u0430\u043c\u0435\u043d\u0438\u0442\u044c \u0440\u0443\u043a\u043e\u043f\u0438\u0441\u043d\u044b\u0439 \u043a\u043e\u043f\u043c\u043e\u043d\u0435\u043d\u0442 Picture \u043d\u0430 \u043b\u044e\u0431\u043e\u0439 \u0434\u0440\u0443\u0433\u043e\u0439 Image \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f.<\/p>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0435 \u043d\u0430\u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442 \u043b\u0438\u0448\u044c \u043f\u043e\u043b\u0435:<\/p>\n<pre><code class=\"perl\">placeholder: \"|FDcXS4nxu~q4nt7-;9Fxu?bxu9FxuRjIU%MayRjRj%MRjIU%MM{RjxvRjozofxuM{t8xuIUofofWBRjt7RjayxuM{WBt7InWUofWBoft7WBWBofRioft7ayt7oeayofWBRjoLs:ayoffRayofR*ofj[j[oMWBayj[azfR\"<\/code><\/pre>\n<p>\u041e\u043d\u043e \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0448\u0435\u0439 \u0441\u0442\u0440\u043e\u043a\u043e\u0439 blurhash (\u0434\u043b\u0438\u043d\u0443 \u0441\u0442\u0440\u043e\u043a\u0438 \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0443\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0438, \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0441\u043e\u043e\u0442\u043d\u043e\u0448\u0435\u043d\u0438\u0435 \u0441\u0442\u043e\u0440\u043e\u043d \u0438 \u0440\u0430\u0437\u043c\u0435\u0440 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f).<\/p>\n<h4>\u041f\u0440\u0438\u043d\u0446\u0438\u043f \u0440\u0430\u0431\u043e\u0442\u044b \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<ul>\n<li>\n<p>\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0434\u0430\u043d\u043d\u044b\u0445<\/p>\n<\/li>\n<li>\n<p>\u0412 \u043c\u043e\u043c\u0435\u043d\u0442, \u043a\u043e\u0433\u0434\u0430 \u043e\u043d\u043e \u043f\u043e\u043f\u0430\u0434\u0430\u0435\u0442 \u0432 \u0437\u043e\u043d\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f, \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442 useEffect, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u044e\u0449\u0438\u0439 set \u0434\u0430\u043d\u043d\u044b\u0445 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 Picture \u0438 \u043d\u0430\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u044e\u0449\u0438\u0439 \u043f\u043e\u0432\u0435\u0440\u0445 \u043d\u0435\u0433\u043e canvas c blurhash<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0433\u0434\u0430 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d\u043e, canvas \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0440\u044f\u0447\u0435\u0442\u0441\u044f<\/p>\n<\/li>\n<\/ul>\n<h4>\u0421\u043f\u0438\u0441\u043e\u043a \u043f\u0440\u043e\u043f\u0441\u043e\u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h4>\n<pre><code class=\"cs\">export interface LazyPictureProps { data: IPicture; alt?: string; placeholder?: string; breakpoints?: IBreakpoints; onLoadSuccess?: (img: EventTarget) => void; onLoadError?: () => void; className?: string; } export interface IBreakpoints { desktop: string; tablet: string; mobile: string; }<\/code><\/pre>\n<p>\u0421\u0430\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442:<\/p>\n<pre><code class=\"php\">export default memo(function LazyPicture({ data, onLoadError, onLoadSuccess, className = \"\", ...props }: LazyPictureProps) { const [isLoaded, setIsLoaded] = useState(false); const { placeholder, ...imageProps } = data; const imgPlaceholder = useMemo( () => placeholder || defaultBlurPlaceholder, [placeholder] ); const [imageSrc, setImageSrc] = useState(defaultImageProps); const imageRef = useRef(null); const _onLoad: ReactEventHandler = (event) => { const img = event.target; if (onLoadSuccess) onLoadSuccess(img); setIsLoaded(true); }; }<\/code><\/pre>\n<p>\u0417\u0430\u0434\u0430\u0435\u043c \u0431\u0430\u0437\u043e\u0432\u044b\u0439 \u0444\u043b\u0430\u0433\u00a0<strong>isLoaded<\/strong>\u00a0\u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0437\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p><strong>imgPlaceholder<\/strong>\u00a0\u2014 \u044d\u0442\u043e \u0438 \u0435\u0441\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0430 blurhash;<\/p>\n<p><strong>imageSrc<\/strong>\u00a0\u2014 \u0441\u044e\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u00ab\u0441\u0435\u0442\u0438\u0442\u044c\u0441\u044f\u00bb \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 (\u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 \u043f\u0443\u0441\u0442\u0430\u044f \u0441\u0442\u0440\u043e\u043a\u0430. \u0438\u043b\u0438, \u043a\u0430\u043a \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u043e\u0431\u044a\u0435\u043a\u0442 \u0438\u0437 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043f\u043e\u043b\u0435\u0439);<\/p>\n<p><strong>imageRef\u00a0<\/strong>\u2014<strong>\u00a0<\/strong>\u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u044e\u0437\u0435\u0440\u0430;<\/p>\n<p><strong>onLoad<\/strong>\u00a0\u2014 \u0445\u0435\u043d\u0434\u043b\u0435\u0440 \u0443\u0441\u043f\u0435\u0448\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f.<\/p>\n<p>\u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c\u00a0<strong>useEffect<\/strong>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0432\u0441\u044e \u0440\u0430\u0431\u043e\u0442\u0443:<\/p>\n<pre><code class=\"coffeescript\">useEffect(() => { let observer: IntersectionObserver; if (IntersectionObserver) { observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { \/\/ when image is visible in the viewport + rootMargin if (entry.intersectionRatio > 0 || entry.isIntersecting) { setImageSrc(imageProps); imageRef?.current &amp;&amp; observer.unobserve(imageRef?.current); } }); }, { threshold: 0.01, rootMargin: \"20%\", } ); imageRef?.current &amp;&amp; observer.observe(imageRef?.current); } else { \/\/ Old browsers fallback setImageSrc(imageProps); } return () => { imageRef?.current &amp;&amp; observer.unobserve(imageRef.current); }; }, []);<\/code><\/pre>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u00a0<strong>IntersectionObserver<\/strong>\u00a0\u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u0434\u0430\u043d\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u0437\u043e\u043d\u0443 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u2014 \u0441\u0435\u0442\u0438\u043c \u0434\u0430\u043d\u043d\u044b\u0435 \u0432 Picture \u0438 \u043e\u0442\u043c\u0435\u043d\u044f\u0435\u043c \u043f\u043e\u0434\u043f\u0438\u0441\u043a\u0443.<\/p>\n<p><strong>\u0421\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u043e jsx:<\/strong><\/p>\n<pre><code class=\"xml\">return ( &lt;StyledLazyImage> &lt;StyledBlurHash isHidden={isLoaded}> &lt;Blurhash hash={imgPlaceholder} width={\"100%\"} height={\"100%\"} resolutionX={32} resolutionY={32} punch={1} \/> &lt;\/StyledBlurHash> &lt;Picture ref={imageRef} {...imageSrc} {...props} className={${className}&lt;\/span> ${!&lt;span class=\"hljs-attribute\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">isLoaded&lt;\/span> &amp;amp;&amp;amp; \"&lt;span class=\"hljs-attribute\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">lazy&lt;\/span>\"}} onLoad={_onLoad} onLoadError={onLoadError} \/> &lt;\/StyledLazyImage> );<\/code><\/pre>\n<p>\u0417\u0434\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f\u00a0<a href=\"https:\/\/github.com\/styled-components\/styled-components\" rel=\"noopener noreferrer nofollow\">styled-components<\/a>, \u043d\u043e \u044d\u0442\u043e \u043d\u0435 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0438\u0430\u043b\u044c\u043d\u043e.<\/p>\n<p><strong>StyledLazyImage<\/strong>\u00a0\u2014 div \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438:<\/p>\n<p><strong>Blurhash\u00a0<\/strong>\u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/react-blurhash\" rel=\"noopener noreferrer nofollow\">react-blurhash<\/a>, \u0435\u0433\u043e \u043f\u0440\u043e\u043f\u0441\u044b:<\/p>\n<pre><code class=\"cpp\">const StyledLazyImage = styled.div  width: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   height: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   position: relative;   canvas {     width: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;     height: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   }   .lazy {     opacity: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">0&lt;\/span>;   };<\/code><\/pre>\n<div>\n<div class=\"table\">\n<table>\n<tbody>\n<tr>\n<th>\n<p>Name<\/p>\n<\/th>\n<th>\n<p>Description<\/p>\n<\/th>\n<th>\n<\/th>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">hash (string)<\/p>\n<\/td>\n<td>\n<p align=\"left\">The encoded blurhash string.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">width (int | string)<\/p>\n<\/td>\n<td>\n<p align=\"left\">Width (CSS) of the decoded image.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">height (int | string)<\/p>\n<\/td>\n<td>\n<p align=\"left\">Height (CSS) of the decoded image.<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">resolutionX (int)<\/p>\n<\/td>\n<td>\n<p align=\"left\">The X-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">resolutionY (int)<\/p>\n<\/td>\n<td>\n<p align=\"left\">The Y-axis resolution in which the decoded image will be rendered at. Recommended min. 32px. Large sizes (>128px) will greatly decrease rendering performance. (Default: 32)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p align=\"left\">punch (int)<\/p>\n<\/td>\n<td>\n<p align=\"left\">NControls the &#171;punch&#187; value (~contrast) of the blurhash decoding algorithm. (Default: 1)<\/p>\n<\/td>\n<td>\n<p align=\"left\">\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p><strong>StyledBlurhash \u2014\u00a0<\/strong>\u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 Blurhash, \u0435\u0433\u043e \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code class=\"cpp\">const StyledBlurHash = styled.div&lt;{ isHidden?: boolean }>   position: absolute;   width: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   height: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">100&lt;\/span>%;   z-index: &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">22222&lt;\/span>;   visibility: visible;   transition: visibility &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">0.2&lt;\/span>s, opacity &lt;span class=\"hljs-number\" style=\"box-sizing: content-box; margin: 0px; padding: 0px; border: 0px; color: rgb(0, 128, 128);\">0.2&lt;\/span>s;   ${({ isHidden }) =&amp;gt;     isHidden &amp;amp;&amp;amp;       css visibility: hidden; opacity: 0; animation: ${displayAnim} 0.2s;   }; const displayAnim = keyframes  to {     display: none;   };<\/code><\/pre>\n<p>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0438<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\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-355237","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/355237","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=355237"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/355237\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=355237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=355237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=355237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}