{"id":350317,"date":"2023-07-15T21:00:25","date_gmt":"2023-07-15T21:00:25","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=350317"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=350317","title":{"rendered":"<span>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e Network Information API<\/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<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043d\u0430\u0441 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u044d\u0442\u043e \u0434\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0432 2023 \u0433\u043e\u0434\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u0435\u0431\u0441\u0430\u0439\u0442\u043e\u0432 \u043f\u043e\u0434 \u044d\u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439 \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u043e\u0440\u043e\u0433\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0441\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 \u0438\u043b\u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0438\u0431\u043e \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e\u0434 \u0437\u0435\u043c\u043b\u0435\u0439, \u043b\u0438\u0431\u043e \u043f\u043b\u043e\u0445\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0441\u0438\u0433\u043d\u0430\u043b \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 combat-sport.club \u043a\u0430\u043a \u0440\u0430\u0437 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u0430\u043a\u043e\u043c-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u0434\u0432\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u0441 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u0432\u044f\u0437\u044c\u044e, \u0438 \u0442\u044f\u0436\u0435\u043b\u044b\u0439 SPA \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043c\u0435\u0434\u0438\u0430 \u043c\u043e\u0436\u0435\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e. \u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u0438 \u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u0439 \u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0438\u0438 \u043c\u043e\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0440\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0432 \u0446\u0435\u043b\u043e\u043c: <a href=\"https:\/\/habr.com\/ru\/articles\/732406\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437<\/a> \u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/746740\/\" rel=\"noopener noreferrer nofollow\">\u0434\u0432\u0430<\/a>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 &#8212; <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Network_Information_API\" rel=\"noopener noreferrer nofollow\">Network Information API<\/a>. \u042d\u0442\u043e API \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0441\u0435\u0442\u0438, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441 \u0441\u0430\u043c\u043e\u0439 \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u0440\u0435\u0434\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u0432\u043e\u0434 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0442\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u044d\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 &#8212; \u0430 \u044d\u0442\u043e \u043e\u043a\u043e\u043b\u043e <a href=\"https:\/\/caniuse.com\/netinfo\" rel=\"noopener noreferrer nofollow\">73% \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/a>. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430 Vue.<\/p>\n<h2>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438 \u0441\u0435\u0440\u0432\u0438\u0441 imagekit<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0443 \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>AppImage<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u0434\u043b\u044f \u0438\u0445 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441 imagekit.io. \u041e\u043f\u0443\u0441\u043a\u0430\u044f \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0435\u0442\u0430\u043b\u0438, \u0432 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 <code>AppImage<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a: <\/p>\n<pre><code>&lt;script lang=\"ts\" setup> import { computed } from 'vue' import { useMedia } from '@\/composables\/media.ts'  interface IProps {   imgId?: string   src?: string   height: number | string   width: number | string   ... }  const props = withDefaults(defineProps&lt;IProps>(), {   imgId: '',   src: '',   ... })  const { getImageById } = useMedia()  const srcAttrs = computed(() => {   if (props.src) {     return {       src: props.src,     }   }    return {     src: getImageById(props.imgId, +props.width, +props.height, props.type),     srcset: `${getImageById(props.imgId, +props.width * 2, +props.height * 2, props.type)} 2x`,   } }) &lt;\/script>  &lt;template>   &lt;img     v-bind=\"srcAttrs\"     :height=\"height\"     :width=\"width\"   > &lt;\/template> <\/code><\/pre>\n<p>\u0412 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>getImageById<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0443 imagekit \u0441 id \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 <code>w<\/code> \u0438 <code>h<\/code> \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445:<\/p>\n<pre><code>const getImageById = (     id: string,     width: number,     height: number,     ...   ): string => {     ...     return `${BASE_URL}\/${id}${width ? `?tr=w-${width}` : ''}${width &amp;&amp; height ? `,h-${height}` : ''}`   }<\/code><\/pre>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>q<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 1 \u0434\u043e 100 \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0434\u0432\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 <code>q=90<\/code> \u0438 <code>q=20<\/code>, \u0432\u0435\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <strong>31kb <\/strong>\u0438<strong> 3kb<\/strong>:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/af3\/087\/b79\/af3087b7945a5ad12ce99583fa62cb2a.png\" width=\"1510\" height=\"376\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/af3\/087\/b79\/af3087b7945a5ad12ce99583fa62cb2a.png\"\/><\/figure>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u044f \u0438 \u0431\u0443\u0434\u0443 \u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c, \u0442\u043e \u0445\u043e\u0442\u044f \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445.<\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c effectiveType \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u0435\u0442\u0438<\/h2>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0435\u0442\u0438 \u0438 \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 \u044d\u0442\u0438\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441 <code>handleNetwork<\/code> \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b:<\/p>\n<pre><code>import { ref } from 'vue'  export function handleNetwork() {   const imagesQuality = ref(90)   const effectiveType = ref(undefined) }<\/code><\/pre>\n<p><code>effectiveType<\/code> \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Network Information API, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 <code>navigator.connection.effectiveType<\/code>. \u041e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439: slow-2g, 2g, 3g, 4g, \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 wifi \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0412\u043e\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/803\/085\/8a9\/8030858a96ca262bf0f5eb665d7ac9f7.png\" width=\"1652\" height=\"684\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/803\/085\/8a9\/8030858a96ca262bf0f5eb665d7ac9f7.png\"\/><\/figure>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043c\u0435\u043d\u044f\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>imagesQuality<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>effectiveType<\/code> \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>change<\/code> \u0434\u043b\u044f <code>navigator.connection<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>updateNetworkState<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>\u0412\u0430\u0436\u043d\u043e:<\/strong> <strong>\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u043e API<\/strong> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438<strong> <\/strong><code>'connection' in navigator<\/code>:<\/p>\n<pre><code>function updateNetworkState() {   ... }  if (navigator &amp;&amp; 'connection' in navigator) {     navigator.connection.addEventListener('change', updateNetworkState) }  updateNetworkState()<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>updateNetworkState<\/code>. \u0412 \u043d\u0435\u0439 \u0442\u043e\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 API \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>switch<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f <code>imagesQuality<\/code>:<\/p>\n<pre><code>function updateNetworkState() {     if (!navigator || !('connection' in navigator)) return      effectiveType.value = navigator.connection.effectiveType      switch (effectiveType.value) {       case ('slow-2g'):       case '2g':         imagesQuality.value = 1         break       case '3g':         imagesQuality.value = 20         break       case '4g':         imagesQuality.value = 90         break       default:         imagesQuality.value = 90         break     } }<\/code><\/pre>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c return \u0441 <code>imagesQuality<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>import { ref } from 'vue'  export function handleNetwork() {   const imagesQuality = ref(90)   const effectiveType = ref(undefined)    function updateNetworkState() {     if (!navigator || !('connection' in navigator)) return      effectiveType.value = navigator.connection.effectiveType      switch (effectiveType.value) {       case ('slow-2g'):       case '2g':         imagesQuality.value = 1         break       case '3g':         imagesQuality.value = 20         break       case '4g':         imagesQuality.value = 90         break       default:         imagesQuality.value = 90         break     }   }    if (navigator &amp;&amp; 'connection' in navigator) {     navigator.connection.addEventListener('change', updateNetworkState)   }    updateNetworkState()    return {     imagesQuality: imagesQuality.value,   } }<\/code><\/pre>\n<h2>\u041c\u0435\u043d\u044f\u0435\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h2>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <code>AppImage<\/code> \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0442\u0443\u0434\u0430 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>1) \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>imagesQuality<\/code> \u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>getImageById<\/code><\/p>\n<p>2) \u0415\u0441\u043b\u0438 <code>imagesQuality<\/code> \u043c\u0435\u043d\u044c\u0448\u0435 20, \u0442\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>srcset<\/code> \u0441 2\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u043c, \u0442.\u043a. \u043f\u0440\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/p>\n<pre><code>&lt;script lang=\"ts\" setup> ... import { handleNetwork } from '@\/services\/network'  ...  const srcAttrs = computed(() => {   const { imagesQuality } = handleNetwork()    ...    return {     src: getImageById(..., imagesQuality),     srcset: imagesQuality > 20 ? `${..., imagesQuality)} 2x` : '',   } }) &lt;\/script><\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>getImageById<\/code> \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c <code>quality<\/code>:<\/p>\n<pre><code>const getImageById = (     id: string,     width: number,     height: number,     quality?: number,     ...   ): string => {     ...     return `${BASE_URL}\/${id}${width ? `?tr=q-${quality},w-${width}` : ''}${width &amp;&amp; height ? `,h-${height}` : ''}`   }<\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0435\u0442\u0438 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u0423\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044f \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Network \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/3fc\/d03\/f1d\/3fcd03f1da8cbc80db85de19e23f6449.png\" width=\"944\" height=\"436\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/3fc\/d03\/f1d\/3fcd03f1da8cbc80db85de19e23f6449.png\"\/><\/figure>\n<h2>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c background-image<\/h2>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 CSS, \u0442.\u043a. \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u043e \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445, \u043d\u0435 \u043d\u0435\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0446\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 &#8212; \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0436\u0435\u0440\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u0437\u0430\u043b\u0438\u0432\u043a\u0443 \u0446\u0432\u0435\u0442\u043e\u043c.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 &#8216;\u0444\u043b\u0430\u0433&#8217; <code>isSlowConnection<\/code> , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:<\/p>\n<pre><code>const isSlowConnection = ref(false)<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>switch<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0438\u043c\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0442\u0430\u043c \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0430\u0448\u0435\u0439 \u043d\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439:<\/p>\n<pre><code>switch (effectiveType.value) {       case ('slow-2g'):       case '2g':         imagesQuality.value = 1         isSlowConnection.value = true         break       case '3g':         imagesQuality.value = 20         isSlowConnection.value = true         break       case '4g':         imagesQuality.value = 90         isSlowConnection.value = false         break       default:         imagesQuality.value = 90         isSlowConnection.value = false         break }<\/code><\/pre>\n<p>\u0410 \u043d\u0438\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 (\u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0441\u043e\u0431\u044b\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u043c \u0441\u0442\u0438\u043b\u0435\u0439) \u043d\u0430 <code>body<\/code>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0447\u0435\u0440\u0435\u0437 CSS \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code>document.body.classList.toggle('cs-slow-connection', isSlowConnection.value)<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0442\u0438\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 cs-slow-connection \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u043e\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043b\u0438\u0432\u043a\u0430 \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c:<\/p>\n<pre><code>.event-header {   &amp;::before {     background-image: url(\"\/img\/event-default-img.webp\");     background-position: center;     background-size: cover;   } }  body.cs-slow-connection {   .event-header {     &amp;::before {       background-color: #e4e4e4;       background-image: none;     }   } }<\/code><\/pre>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/033\/e05\/a4c\/033e05a4cf37fd7c1a76925e0ea62501.png\" alt=\"4g\" title=\"4g\" width=\"1810\" height=\"668\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/033\/e05\/a4c\/033e05a4cf37fd7c1a76925e0ea62501.png\"\/><\/p>\n<div><figcaption>4g<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/9e2\/026\/da9\/9e2026da9dd477a0711989c3973dc5ca.png\" alt=\"slow 3g\" title=\"slow 3g\" width=\"1810\" height=\"668\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/9e2\/026\/da9\/9e2026da9dd477a0711989c3973dc5ca.png\"\/><\/p>\n<div><figcaption>slow 3g<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043d\u0430\u0441 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442 \u0438 \u0442\u0430\u043a \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u043b\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>\u042f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Network Information API \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, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 &#8212; \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u0438\u0434\u0435\u043e, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 2g, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043d\u0435\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b&#8230; \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u0438 \u0442\u043e\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435.<\/p>\n<p>\u041d\u043e \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044f \u0431\u044b \u044d\u0442\u0438\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0432\u044b\u0437\u0432\u0430\u043b \u043a \u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u043b\u043e\u0445\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c. <\/p>\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\/748272\/\"> https:\/\/habr.com\/ru\/articles\/748272\/<\/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<p>\u041c\u043d\u043e\u0433\u0438\u0435 \u0438\u0437 \u043d\u0430\u0441 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u0441\u0442\u0430\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u044d\u0442\u043e \u0434\u0430\u043d\u043d\u043e\u0441\u0442\u044c \u0432 2023 \u0433\u043e\u0434\u0443, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432\u0435\u0431\u0441\u0430\u0439\u0442\u043e\u0432 \u043f\u043e\u0434 \u044d\u0442\u043e\u0442 \u0441\u043b\u0443\u0447\u0430\u0439 \u043e\u0441\u043e\u0431\u043e \u043d\u0435 \u0437\u0430\u043d\u0438\u043c\u0430\u044e\u0442\u0441\u044f. \u041e\u0434\u043d\u0430\u043a\u043e \u0432\u0441\u0435 \u0435\u0449\u0435 \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0441\u0446\u0435\u043d\u0430\u0440\u0438\u0438, \u043a\u043e\u0433\u0434\u0430 \u044d\u0442\u043e \u043d\u0435 \u0442\u0430\u043a: \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432 \u0434\u043e\u0440\u043e\u0433\u0435 \u043c\u0435\u0436\u0434\u0443 \u043d\u0430\u0441\u0435\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043f\u0443\u043d\u043a\u0442\u0430\u043c\u0438 \u0438\u043b\u0438 \u0432 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u044f\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0438\u0431\u043e \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u043f\u043e\u0434 \u0437\u0435\u043c\u043b\u0435\u0439, \u043b\u0438\u0431\u043e \u043f\u043b\u043e\u0445\u043e \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u0430\u044e\u0442 \u0441\u0438\u0433\u043d\u0430\u043b \u043f\u043e \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u0438\u0447\u0438\u043d\u0435.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 combat-sport.club \u043a\u0430\u043a \u0440\u0430\u0437 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u0430 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f, \u043a\u043e\u0433\u0434\u0430 \u0432\u0437\u0432\u0435\u0448\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u0434 \u043f\u0440\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435\u043c \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0435\u0440\u0435\u0434\u043a\u043e \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0432 \u043a\u0430\u043a\u043e\u043c-\u043d\u0438\u0431\u0443\u0434\u044c \u043f\u043e\u0434\u0432\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u043e\u043c\u0435\u0449\u0435\u043d\u0438\u0438 \u0441 \u043f\u043b\u043e\u0445\u043e\u0439 \u0441\u0432\u044f\u0437\u044c\u044e, \u0438 \u0442\u044f\u0436\u0435\u043b\u044b\u0439 SPA \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\u043c \u043c\u0435\u0434\u0438\u0430 \u043c\u043e\u0436\u0435\u0442 \u0433\u0440\u0443\u0437\u0438\u0442\u044c\u0441\u044f \u043e\u0447\u0435\u043d\u044c \u0434\u043e\u043b\u0433\u043e. \u0412 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u044d\u0442\u043e \u0432\u043b\u0438\u044f\u0435\u0442 \u0438 \u043d\u0430 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0441 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u043e\u0439 \u0438 \u0432 \u0446\u0435\u043b\u043e\u043c \u043d\u0430 \u0443\u0434\u043e\u0432\u043b\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439.<\/p>\n<p>\u041c\u043e\u0436\u043d\u043e \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u044d\u0442\u043e \u043a\u0430\u043a \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0435\u043d\u0438\u0435 \u0441\u0435\u0440\u0438\u0438 \u043c\u043e\u0438\u0445 \u0441\u0442\u0430\u0442\u0435\u0439 \u043f\u0440\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044e \u0432 \u0446\u0435\u043b\u043e\u043c: <a href=\"https:\/\/habr.com\/ru\/articles\/732406\/\" rel=\"noopener noreferrer nofollow\">\u0440\u0430\u0437<\/a> \u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/746740\/\" rel=\"noopener noreferrer nofollow\">\u0434\u0432\u0430<\/a>.<\/p>\n<p>\u0412 \u044d\u0442\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435 \u044f \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u044e \u043e\u0434\u0438\u043d \u0438\u0437 \u043c\u0435\u0442\u043e\u0434\u043e\u0432 \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0430\u0439\u0442\u0430 \u0434\u043b\u044f \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0441 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u044e \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 &#8212; <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Network_Information_API\" rel=\"noopener noreferrer nofollow\">Network Information API<\/a>. \u042d\u0442\u043e API \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043d\u0430\u0431\u043e\u0440\u043e\u043c \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0441\u0435\u0442\u0438, \u043d\u043e \u043f\u043e\u043a\u0430 \u043d\u0435 \u0441 \u0441\u0430\u043c\u043e\u0439 \u043b\u0443\u0447\u0448\u0435\u0439 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u043e\u0439 \u0441\u0440\u0435\u0434\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u0432. \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 \u044d\u0442\u043e \u043d\u0435 \u043f\u043e\u0432\u043e\u0434 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0434\u043b\u044f \u0442\u0435\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439, \u0447\u0435\u0439 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u044d\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 &#8212; \u0430 \u044d\u0442\u043e \u043e\u043a\u043e\u043b\u043e <a href=\"https:\/\/caniuse.com\/netinfo\" rel=\"noopener noreferrer nofollow\">73% \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/a>. \u041f\u0440\u0438\u043c\u0435\u0440\u044b \u043a\u043e\u0434\u0430 \u0431\u0443\u0434\u0443\u0442 \u043d\u0430 Vue.<\/p>\n<h2>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u043b\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0438 \u0441\u0435\u0440\u0432\u0438\u0441 imagekit<\/h2>\n<p>\u041d\u0430\u0447\u043d\u0443 \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0443 \u043d\u0430\u0441 \u043d\u0430 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u0435\u0441\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <code>AppImage<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0432\u0441\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0430 \u0434\u043b\u044f \u0438\u0445 \u0445\u043e\u0441\u0442\u0438\u043d\u0433\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u0435\u0440\u0432\u0438\u0441 imagekit.io. \u041e\u043f\u0443\u0441\u043a\u0430\u044f \u043d\u0435 \u0438\u043c\u0435\u044e\u0449\u0438\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u0435\u0442\u0430\u043b\u0438, \u0432 \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u043c \u0432\u0438\u0434\u0435 <code>AppImage<\/code> \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a: <\/p>\n<pre><code>&lt;script lang=\"ts\" setup> import { computed } from 'vue' import { useMedia } from '@\/composables\/media.ts'  interface IProps {   imgId?: string   src?: string   height: number | string   width: number | string   ... }  const props = withDefaults(defineProps&lt;IProps>(), {   imgId: '',   src: '',   ... })  const { getImageById } = useMedia()  const srcAttrs = computed(() => {   if (props.src) {     return {       src: props.src,     }   }    return {     src: getImageById(props.imgId, +props.width, +props.height, props.type),     srcset: `${getImageById(props.imgId, +props.width * 2, +props.height * 2, props.type)} 2x`,   } }) &lt;\/script>  &lt;template>   &lt;img     v-bind=\"srcAttrs\"     :height=\"height\"     :width=\"width\"   > &lt;\/template> <\/code><\/pre>\n<p>\u0412 \u043d\u0435\u043c \u0435\u0441\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>getImageById<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043e\u0431\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u043a \u0441\u0435\u0440\u0432\u0438\u0441\u0443 imagekit \u0441 id \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430\u043c\u0438 <code>w<\/code> \u0438 <code>h<\/code> \u0434\u043b\u044f \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u044d\u0442\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u044b\u0445 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u0445:<\/p>\n<pre><code>const getImageById = (     id: string,     width: number,     height: number,     ...   ): string => {     ...     return `${BASE_URL}\/${id}${width ? `?tr=w-${width}` : ''}${width &amp;&amp; height ? `,h-${height}` : ''}`   }<\/code><\/pre>\n<p>\u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0443 \u0441\u0435\u0440\u0432\u0438\u0441\u0430 \u0435\u0441\u0442\u044c \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 <code>q<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043e\u0442 1 \u0434\u043e 100 \u0438 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043e\u0442\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0439 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u043e\u0442 \u0434\u0432\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0441 <code>q=90<\/code> \u0438 <code>q=20<\/code>, \u0432\u0435\u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0441\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 <strong>31kb <\/strong>\u0438<strong> 3kb<\/strong>:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u044d\u0442\u043e\u0442 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u044f \u0438 \u0431\u0443\u0434\u0443 \u043c\u0435\u043d\u044f\u0442\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430 \u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0432\u044b \u043f\u043e\u0434\u043e\u0431\u043d\u044b\u043c \u0441\u0435\u0440\u0432\u0438\u0441\u043e\u043c \u043d\u0435 \u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435\u0441\u044c, \u0442\u043e \u0445\u043e\u0442\u044f \u0432\u0441\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u0435\u0435, \u043d\u043e \u0432\u0441\u0435 \u0436\u0435 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0438 \u043f\u043e\u0434\u0441\u0442\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u0445.<\/p>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c effectiveType \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0441\u0435\u0442\u0438<\/h2>\n<p>\u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0441\u0435\u0442\u0438 \u0438 \u0432\u0441\u043b\u0435\u0434 \u0437\u0430 \u044d\u0442\u0438\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a. \u041d\u0430\u0437\u043e\u0432\u0435\u043c \u0441\u0435\u0440\u0432\u0438\u0441 <code>handleNetwork<\/code> \u0438 \u043e\u0431\u044a\u044f\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u044b:<\/p>\n<pre><code>import { ref } from 'vue'  export function handleNetwork() {   const imagesQuality = ref(90)   const effectiveType = ref(undefined) }<\/code><\/pre>\n<p><code>effectiveType<\/code> \u044d\u0442\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u043e Network Information API, \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0447\u0435\u0440\u0435\u0437 <code>navigator.connection.effectiveType<\/code>. \u041e\u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439: slow-2g, 2g, 3g, 4g, \u043a\u0430\u0436\u0434\u043e\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0430, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 wifi \u0438\u043b\u0438 \u043f\u0440\u043e\u0432\u043e\u0434\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442. \u0412\u043e\u0442 \u0442\u0430\u0431\u043b\u0438\u0446\u0430 \u0441 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u0438\u043c \u043f\u043e\u044f\u0441\u043d\u0435\u043d\u0438\u0435\u043c:<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u0418\u043c\u0435\u043d\u043d\u043e \u043d\u0430 \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043c\u044b \u0438 \u0431\u0443\u0434\u0435\u043c \u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043c\u0435\u043d\u044f\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>imagesQuality<\/code>.<\/p>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0438 \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f <code>effectiveType<\/code> \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u043b\u0443\u0448\u0430\u0442\u0435\u043b\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 <code>change<\/code> \u0434\u043b\u044f <code>navigator.connection<\/code>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>updateNetworkState<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p><strong>\u0412\u0430\u0436\u043d\u043e:<\/strong> <strong>\u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u0442\u043e, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 \u044d\u0442\u043e API<\/strong> \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0440\u043e\u0441\u0442\u043e\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438<strong> <\/strong><code>'connection' in navigator<\/code>:<\/p>\n<pre><code>function updateNetworkState() {   ... }  if (navigator &amp;&amp; 'connection' in navigator) {     navigator.connection.addEventListener('change', updateNetworkState) }  updateNetworkState()<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043f\u0438\u0448\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>updateNetworkState<\/code>. \u0412 \u043d\u0435\u0439 \u0442\u043e\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u043d\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 API \u0438 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>switch<\/code>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f <code>imagesQuality<\/code>:<\/p>\n<pre><code>function updateNetworkState() {     if (!navigator || !('connection' in navigator)) return      effectiveType.value = navigator.connection.effectiveType      switch (effectiveType.value) {       case ('slow-2g'):       case '2g':         imagesQuality.value = 1         break       case '3g':         imagesQuality.value = 20         break       case '4g':         imagesQuality.value = 90         break       default:         imagesQuality.value = 90         break     } }<\/code><\/pre>\n<p>\u0418 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c return \u0441 <code>imagesQuality<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u044d\u0442\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u0445. \u0412 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0442\u0430\u043a\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code>import { ref } from 'vue'  export function handleNetwork() {   const imagesQuality = ref(90)   const effectiveType = ref(undefined)    function updateNetworkState() {     if (!navigator || !('connection' in navigator)) return      effectiveType.value = navigator.connection.effectiveType      switch (effectiveType.value) {       case ('slow-2g'):       case '2g':         imagesQuality.value = 1         break       case '3g':         imagesQuality.value = 20         break       case '4g':         imagesQuality.value = 90         break       default:         imagesQuality.value = 90         break     }   }    if (navigator &amp;&amp; 'connection' in navigator) {     navigator.connection.addEventListener('change', updateNetworkState)   }    updateNetworkState()    return {     imagesQuality: imagesQuality.value,   } }<\/code><\/pre>\n<h2>\u041c\u0435\u043d\u044f\u0435\u043c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439<\/h2>\n<p>\u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u0441\u044f \u043a \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 <code>AppImage<\/code> \u0438 \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u0442\u0443\u0434\u0430 \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441. \u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0441\u0434\u0435\u043b\u0430\u0435\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<p>1) \u041f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e <code>imagesQuality<\/code> \u043a\u0430\u043a \u043d\u043e\u0432\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 <code>getImageById<\/code><\/p>\n<p>2) \u0415\u0441\u043b\u0438 <code>imagesQuality<\/code> \u043c\u0435\u043d\u044c\u0448\u0435 20, \u0442\u043e \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 <code>srcset<\/code> \u0441 2\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c \u043f\u0443\u0441\u0442\u044b\u043c, \u0442.\u043a. \u043f\u0440\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u043d\u0435\u0442 \u0441\u043c\u044b\u0441\u043b\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0431\u043e\u043b\u0435\u0435 \u0432\u044b\u0441\u043e\u043a\u043e\u0433\u043e \u0440\u0430\u0437\u0440\u0435\u0448\u0435\u043d\u0438\u044f<\/p>\n<pre><code>&lt;script lang=\"ts\" setup> ... import { handleNetwork } from '@\/services\/network'  ...  const srcAttrs = computed(() => {   const { imagesQuality } = handleNetwork()    ...    return {     src: getImageById(..., imagesQuality),     srcset: imagesQuality > 20 ? `${..., imagesQuality)} 2x` : '',   } }) &lt;\/script><\/code><\/pre>\n<p>\u041e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f <code>getImageById<\/code> \u0441 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u043c <code>quality<\/code>:<\/p>\n<pre><code>const getImageById = (     id: string,     width: number,     height: number,     quality?: number,     ...   ): string => {     ...     return `${BASE_URL}\/${id}${width ? `?tr=q-${quality},w-${width}` : ''}${width &amp;&amp; height ? `,h-${height}` : ''}`   }<\/code><\/pre>\n<p>\u0413\u043e\u0442\u043e\u0432\u043e! \u0422\u0435\u043f\u0435\u0440\u044c \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u0435\u0442\u0438 \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0443\u0442 \u043f\u043e\u0434\u0433\u0440\u0443\u0436\u0430\u0442\u044c\u0441\u044f \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0440\u0430\u0437\u043d\u043e\u0433\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430. \u0423\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f \u0432 \u044d\u0442\u043e\u043c \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u044f \u044d\u0442\u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432\u043e \u0432\u043a\u043b\u0430\u0434\u043a\u0435 Network \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435:<\/p>\n<figure class=\"full-width\"><\/figure>\n<h2>\u041e\u043f\u0442\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0435\u043c background-image<\/h2>\n<p>\u0421\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0434\u043b\u044f \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u044d\u0442\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u0444\u043e\u043d\u043e\u0432\u044b\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0437\u0430\u0434\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 CSS, \u0442.\u043a. \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u043e \u0432 \u0434\u0435\u043a\u043e\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0445 \u0446\u0435\u043b\u044f\u0445, \u043d\u0435 \u043d\u0435\u0441\u044f \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0446\u0435\u043d\u043d\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 &#8212; \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u0438 \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u0435 \u0438\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0436\u0435\u0440\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0438 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u0437\u0430\u043b\u0438\u0432\u043a\u0443 \u0446\u0432\u0435\u0442\u043e\u043c.<\/p>\n<p>\u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043f\u0438\u0448\u0435\u043c \u043d\u0430\u0448 \u0441\u0435\u0440\u0432\u0438\u0441, \u0434\u043e\u0431\u0430\u0432\u0438\u0432 \u0442\u0443\u0434\u0430 &#8216;\u0444\u043b\u0430\u0433&#8217; <code>isSlowConnection<\/code> , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u043b\u0438 \u043d\u0435 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438:<\/p>\n<pre><code>const isSlowConnection = ref(false)<\/code><\/pre>\n<p>\u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u043c \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e <code>switch<\/code>, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0438\u043c\u043e \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u043a\u0430\u0440\u0442\u0438\u043d\u043e\u043a \u0442\u0430\u043c \u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0438 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u043d\u0430\u0448\u0435\u0439 \u043d\u043e\u0432\u043e\u0439 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439:<\/p>\n<pre><code>switch (effectiveType.value) {       case ('slow-2g'):       case '2g':         imagesQuality.value = 1         isSlowConnection.value = true         break       case '3g':         imagesQuality.value = 20         isSlowConnection.value = true         break       case '4g':         imagesQuality.value = 90         isSlowConnection.value = false         break       default:         imagesQuality.value = 90         isSlowConnection.value = false         break }<\/code><\/pre>\n<p>\u0410 \u043d\u0438\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a\u043b\u0430\u0441\u0441\u0430 (\u043d\u0430\u0437\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u043a\u0430\u043a \u0443\u0433\u043e\u0434\u043d\u043e, \u043d\u043e \u043b\u0443\u0447\u0448\u0435 \u0441 \u043a\u0430\u043a\u0438\u043c-\u0442\u043e \u043e\u0441\u043e\u0431\u044b\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441 \u043a\u043e\u043d\u0444\u043b\u0438\u043a\u0442\u043e\u043c \u0441\u0442\u0438\u043b\u0435\u0439) \u043d\u0430 <code>body<\/code>, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0447\u0435\u0440\u0435\u0437 CSS \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u0441\u0442\u0438\u043b\u0438:<\/p>\n<pre><code>document.body.classList.toggle('cs-slow-connection', isSlowConnection.value)<\/code><\/pre>\n<p>\u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0444\u043e\u043d\u043e\u0432\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0441\u043e\u0440\u0435\u0432\u043d\u043e\u0432\u0430\u043d\u0438\u044f. \u041d\u0430\u043f\u0438\u0448\u0435\u043c \u0441\u0442\u0438\u043b\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438 \u043d\u0430\u043b\u0438\u0447\u0438\u0438 \u043a\u043b\u0430\u0441\u0441\u0430 cs-slow-connection \u0432\u043c\u0435\u0441\u0442\u043e \u0444\u043e\u043d\u043e\u0433\u043e \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0431\u044b\u043b\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u043b\u0438\u0432\u043a\u0430 \u043f\u043e\u0445\u043e\u0436\u0438\u043c \u0446\u0432\u0435\u0442\u043e\u043c:<\/p>\n<pre><code>.event-header {   &amp;::before {     background-image: url(\"\/img\/event-default-img.webp\");     background-position: center;     background-size: cover;   } }  body.cs-slow-connection {   .event-header {     &amp;::before {       background-color: #e4e4e4;       background-image: none;     }   } }<\/code><\/pre>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u044d\u0442\u043e \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<figure class=\"full-width\">\n<div><figcaption>4g<\/figcaption><\/div>\n<\/figure>\n<figure class=\"full-width\">\n<div><figcaption>slow 3g<\/figcaption><\/div>\n<\/figure>\n<p>\u0418 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u0432\u043e \u0432\u0442\u043e\u0440\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0443 \u043d\u0430\u0441 \u0434\u0430\u0436\u0435 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0432 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0441\u0442\u0435\u043f\u0435\u043d\u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442 \u0438 \u0442\u0430\u043a \u0442\u044f\u0436\u0435\u043b\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0434\u043b\u044f \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043e\u0435\u0434\u0438\u043d\u0435\u043d\u0438\u044f.<\/p>\n<h2>\u0414\u0440\u0443\u0433\u0438\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438<\/h2>\n<p>\u042f \u043f\u043e\u043a\u0430\u0437\u0430\u043b \u0432\u0441\u0435\u0433\u043e \u0434\u0432\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Network Information API \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, \u043d\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u043e\u043b\u044c\u0448\u0435 &#8212; \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u043b\u0435\u0439\u0441\u0445\u043e\u043b\u0434\u0435\u0440\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0432\u0438\u0434\u0435\u043e, \u043c\u043e\u0436\u043d\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0430 2g, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u0442\u043e \u043d\u0435\u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u0448\u0440\u0438\u0444\u0442\u044b, \u043c\u043e\u0436\u043d\u043e \u0434\u0430\u0436\u0435 \u0443\u0431\u0438\u0440\u0430\u0442\u044c \u0438\u043b\u0438 \u043f\u043e\u0434\u043c\u0435\u043d\u044f\u0442\u044c \u0446\u0435\u043b\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b&#8230; \u0438 \u0442\u0430\u043a \u0434\u0430\u043b\u0435\u0435 \u0438 \u0442\u043e\u043c\u0443 \u043f\u043e\u0434\u043e\u0431\u043d\u043e\u0435.<\/p>\n<p>\u041d\u043e \u043d\u0430\u0434\u0435\u044e\u0441\u044c, \u0447\u0442\u043e \u0445\u043e\u0442\u044f \u0431\u044b \u044d\u0442\u0438\u043c\u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438 \u0432\u044b\u0437\u0432\u0430\u043b \u043a \u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u0435\u0441 \u0438 \u043e\u0431\u0440\u0430\u0442\u0438\u043b \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u043f\u043b\u043e\u0445\u0438\u043c \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043e\u043c. <\/p>\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\/748272\/\"> https:\/\/habr.com\/ru\/articles\/748272\/<\/a><br \/><\/br><\/br><\/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-350317","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/350317","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=350317"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/350317\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=350317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=350317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=350317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}