<
  • Главная
Статьи

სურათის ოპტიმიზაცია საიტზე: სურათების დამუშავება jpegtran გამოყენებით | optipng | pngout

  1. წინაპირობები
  2. ჩვენ ვიყენებთ რეკომენდაციებს სურათებისთვის
  3. არქივი სტრუქტურა
  4. მოკლე ინსტრუქციები სამუშაოსთვის
  5. დამატებები
  6. x64 (aka andi)

საიტის გარეშე სურათები - ანაქრონიზმი. ამდენი ხალხი ფიქრობს, და ეს არ არის საღი აზრი. გახსოვდეთ, რამდენი ხანია იმყოფებდით საიტზე ბოლო დროს და რამდენი ხანი ხარ?

ტექსტის მონაცემები გაცილებით პატარაა, ვიდრე გამოსახულება. მაგრამ ხალხს უყვართ თვალები. აქედან გამომდინარე, სურათები იქნება უდავო უპირატესობა ამბავი.

ზოგადად, ტექსტზე საუბრისას ჩვენ ვგულისხმობთ მის შინაარსს და ხელსაყრელ ვიზუალურ პრეზენტაციას, მათ შორის პუნქტები, სიები, ციტატები, ცხრილები. თუმცა, ეს არ არის საკმარისი და ახალი ამბები საიტებიც კი ცდილობენ ჟურნალისტების გამოსახულებებს.

თუმცა, ეს არ არის საკმარისი და ახალი ამბები საიტებიც კი ცდილობენ ჟურნალისტების გამოსახულებებს

დავიწყოთ ვარაუდი, რომ სურათები საჭიროა. ეს შეიძლება იყოს სურათები, დიაგრამები, უბრალოდ აეხსნა სურათები.

დიდი ხნის წინ, როდესაც პუტინი არ მარადიულად ჩანდა, მე პირველად ვაკეთებდი ჩემს ვებ-პორტალს. საჭირო იყო ატლასის სურათების განთავსება. აშკარაა, რომ ძნელია წარმოსადგენია სხეულის ანატომიური სტრუქტურა სურათების გარეშე და უფრო მეტად ასე აღწერს სიტყვებით. და გარეშე ado, მე აიტვირთა სურათები bmp (uncompressed ფორმატში). უნდა ვთქვა, რომ იწონიდა ცომი? უფრო მეტიც, ზოგი ბრაუზერი არ იცოდა, თუ როგორ გამოიყურებოდეს ასეთი სურათები.

რატომ არის ოპტიმიზაცია სურათები? მარტივი მაგალითია ფოტო. თანამედროვე ტელეფონებს აქვს კამერები 8, 12 და მეტი მეგაპიქსელი. 12 დეპუტატი 4000 × 3000 პიქსელის სურათს შეესაბამება. დამოკიდებულება სირთულის სცენა, ეს შეესაბამება ზომის 2-5 მეგაბაიტი, და კიდევ უფრო. ათეული ფოტოები - და გვერდი ზომა swells ბევრი. გამოსახულება შეესაბამება შინაარსის არეალს, რაც გულისხმობს ბრაუზერს, პირველ რიგში, ყველაფრის გადმოსატანად, გააფართოვოს და მხოლოდ ამის შემდეგ აჩვენებს. სუსტი პროცესორები ანუ მცირე რაოდენობის RAM - კატასტროფა.

ახლა წარმოიდგინეთ, რომ მომხმარებელი უყურებს საიტზე ტელეფონიდან. ამ შემთხვევაში, გვერდი დატვირთვა უბრალოდ ვერ დაველოდებით. ასე რომ, სურათები უნდა იყოს წინასწარ შემცირებული.

ვინმეს ამტკიცებს, რომ არ არსებობს წერტილი, თანამედროვე CMS ავტომატურად ქმნის გამოსახულებებს გამოსახულების ჩამოტვირთვისას. მაგრამ ყველას აქვს თავისი საიტები VPS ან VIP- განაკვეთები? ერთი 12 დეპუტატის გამოსახულება შეიძლება გამოვიდეს, მაგრამ დამუშავება, PHP უნდა გამოყოს 35 + მეგაბაიტი (თეორიულად, უფრო მეტია) შენახვისთვის და შემდეგ ჯერ კიდევ იცის, თუ როგორ უნდა შეიქმნას პატარა ასლი. იაფი ტარიფები დაუყოვნებლივ შეედრება რესურსების ჭარბად. კარგი hoster ვთხოვთ მომხმარებელს არ უნდა გავაკეთოთ ეს აღარ, ცუდი იგნორირება მას, რადგან მხოლოდ ფული მნიშვნელოვანია მას, და არა შესრულების მომსახურება.

ასე რომ, ჩვენ გადავწყვიტეთ, რომ ვიმოქმედოთ სწორად. ჩვენ წინასწარ შევამცირებთ სურათებს, შემდეგ კი ატვირთეთ ისინი საიტზე. ასე რომ ძრავა უფრო ადვილია და ხალხი. ყველაფერია ნამდვილად არ არის.

ბევრი რედაქტორი შეინარჩუნებს ორიგინალურ ნაწილებს (მეტა-ინფორმაცია, ფაილების არამატერიალური ნაწილები), რომელიც შეიცავს დამატებით ინფორმაციას. მაგალითისთვის, თუ ტელეფონით რაღაცას იღებთ, ჩაიტვირთეთ კომპიუტერი, დააჭირე ღილაკს მარჯვენა ღილაკით და აირჩიეთ "ობიექტების → დეტალები", დაინახავთ მონაცემებს მოწყობილობაში: რომელი კამერა გადაიღეთ, ჩამკეტის სიჩქარე, ISO და ასე შემდეგ. მომხმარებლისთვის ეს ინფორმაცია აზრი არ აქვს, ასე რომ თქვენ შეგიძლიათ მოშორდეთ მას.

კარგად, ვფიქრობ ამაზე, ერთი ბლოკი. რა არის იქ, რომელიც შეიცავს ინფორმაციას, რომელიც შეიცავს? წარმოიდგინეთ. ზოგჯერ იღებთ სურათებს, რომელთა ასობით კილბოტი ასეთი მონაცემებია. დღეს, ისინი გაგზავნეს ლოგო 584 კბ-იანი მოცულობით. ამავე დროს, სასარგებლო ინფორმაცია მხოლოდ 14 კბ. რაც შეეხება ჩემთვის, ეს არ არის მთლიანად სწორი, რათა აიძულოს სტუმარი ჩამოტვირთოთ 570 KB ზემოთ.

შეჯამება subtotals. იმისათვის, რომ საიტის წევრებს კარგად გააკეთოთ, საჭიროა:

  1. შეამციროთ გამოსახულების ზომა. ნებისმიერი გრაფიკული რედაქტორის დასახმარებლად.
  2. ჩაშლის გარეთ ფაილი ნაწილები არასაჭირო. სინამდვილეში, მომხმარებელი მხოლოდ სურათს სჭირდება.
  3. სცადეთ შეამციროთ გამოსახულების ზომა.

პირველი პუნქტი მოიცავს თითოეულ საქმეს ინდივიდუალური მუშაობის შესახებ. დროა შრომატევადი, მაგრამ საუკეთესო შედეგი მოაქვს. ჩვენ ვხსნით თითოეული ფაილის, დაჭრილი, შეამცირონ, შემდეგ შეინახეთ მისაღები ხარისხი.

მაგრამ მე -2 და მე -3 პუნქტები შეიძლება სპეციალური პროგრამების წყალობით. პროგრამული უზრუნველყოფა მუშაობა სურათები მითითებული. Google რეკომენდაციას უწევს შემდეგ პროგრამებს:

  • jpegtran for jpg გამოსახულების ფორმატი.
  • optipng და pngout for PNG გამოსახულება.

ცოტათი გვხვდება 3. გრაფიკული რედაქტორები ჩვეულებრივ არ იტანჯებიან. ისინი უბრალოდ შეინახავთ იმიჯს, რომ არჩეულ დროში შეარჩიონ შეკუმშვის ალგორითმები იგივე პარამეტრებით, რაოდენობრივი კოეფიციენტებით და სხვა რამით. გარდა ამისა, ბევრი პატიოსნად გადასცემს ხელმისაწვდომი მეტა-ინფორმაციას და დაამატეთ საკუთარი, შემდგომი გაზრდა ფაილი ზომა.

წინაპირობები

ერთი წლის წინ მათ დაიწყეს საუბარი სამსახურის შესახებ. PageSpeed ​​Insights Google- ისგან. სინამდვილეში ეს არის საძიებო გიგანტის რეკომენდაციები "როგორ კარგად გააკეთოთ". უბრალოდ ჩაწერეთ საიტის მისამართი და მიიღეთ ოპტიმიზაციის შემოთავაზება. აქვე შეგიძლიათ ჩამოტვირთოთ უკვე ოპტიმიზებული რესურსები, მათ შორის სურათები, თქვენი საიტი. მართალია, ეს მხოლოდ შესაბამისი შემოწმების გვერდია.

თუ თქვენ გაქვთ ნახვა, დარწმუნდით, რომ გამოიყურებოდეს ეს სტატია . განსაკუთრებით სასარგებლოა WordPress- ის გამოყენებით.

ჩვენ ვიყენებთ რეკომენდაციებს სურათებისთვის

როგორც ჩანს მარტივია: ჩამოტვირთეთ პროგრამები Google- ის მიერ მითითებულ პროგრამებში და სერვერზე ყველა ფაილს აწარმოებს. პრობლემა ისაა, რომ ეს კომუნალები კონსოლია. ისინი მხოლოდ 1 ფაილის დროს იღებენ. მაგრამ ჩვენ არ ვართ უშედეგოდ ბოლო სტატია აიღო დრო Batch ფაილი, არა?

ინფორმაცია სტატიიდან საკმაოდ საკმარისია საკუთარი ფაილის დამმუშავებლის შესაქმნელად, ამიტომ მე არ გავატარებ, სად არის. მე ვთავაზობ, რომ მზად იყოთ მზად შეკრება, რომელიც მე თავს ვიყენებ.

ჩამოტვირთვა archive (212 KB)

არქივი სტრუქტურა

არქივი შეიცავს საქაღალდე [ OptimizeImg ]. დასაწყებად, წაიშალოს ის სადმე. მაქვს ის, რომ მდებარეობს c: \ temp \, მაგრამ არა აქვს მნიშვნელობა. მთავარია, რომ გზა არ შეიცავს ძახილის ნიშანს.

შემდეგი. ეს საქაღალდე შეიცავს [ ატვირთვების ] ქვედანაყოფს. აქ თქვენ უნდა დააყენოთ ფაილები, რომლებიც საჭიროებენ დამუშავებას. საუკეთესო ნაწილი ის არის, რომ თქვენ შეგიძლიათ დააყენოთ მინიმუმ საქაღალდე / ფაილის სტრუქტურა.

კიდევ 3 პროგრამაა: jpegtran.exe | optipng.exe | pngout.exe არის ძალიან კომუნალური მიერ რეკომენდებული Google. გადმოწერილი ოფიციალური საიტებზე / საცავებიდან. თუ ეჭვი, ან უბრალოდ განახლება გსურთ, ჩამოტვირთეთ სანდო წყაროდან და შეცვალეთ არსებული.

და ბოლოს, გულში ტულზა. ბატნიჩი:

  • 1.ბ
  • 3.ბ
  • 3-წ.ბ.თ.
  • 3-opti-to-out.bat
  • 3-out-to-opti.bat

პირველი ფაილი, 1.ბატს, ხსნის სტრუქტურას [ატვირთვებისგან]. შეიქმნა 3 დამატებითი ფოლდერები: [jpg_jpegtran] [png_optipng] [png_pngout] მათი ტიპის დამუშავებული მინიმალიზებული ფაილებით (jpg - only * .jpg- ფაილი, იგივე png).

3.bat თანამიმდევრულად იწყებს სამი სურათების ფაილი აღსრულების:

  • 3-წუთი. თითქმის იგივეა, რაც 1.ბატს. გადადით jpg / png ფაილების მინიმაიზერების საშუალებით. სამუშაოების შედეგი იქნება 3 ფოლდერი (იხ. ზემოთ) შესაბამისი სურათებით.
  • 3-opti-to-out.bat ქმნის [png_optipng-to-pngout] საქაღალდეში, რომელშიც ფაილები დამუშავებულია optipng + pngout დაწერილია (ზუსტად ამ თანმიმდევრობით).
  • 3-out-to-opti.bat ქმნის [png_pngout-to-optipng] საქაღალდეში, რომლის ფაილი დამუშავებული pngout + optipng წერია. წინა მსგავსი, მხოლოდ სხვადასხვა თანმიმდევრობით.

პრინციპში, მხოლოდ 1.ბატს ჩვენი მოთხოვნილებაა საკმარისი. სურათების წინა ვერსიაში კვლევისა და შეცდომების შედეგად 3x ჩანთები გამოჩნდა. ეს ისე მოხდა, რომ შეცდომისას ფაილი pngout იქნა აღებული optipng დირექტორიაში. და რა იყო ჩემი გაოცება, როდესაც დაწყებას ძველი ვერსია მისცა 1.5 ჯერ უფრო მცირე ზომის ვიდრე განახლებული სურათების ფაილი. შედეგად, აღმოჩნდა, რომ ორმაგი დამუშავება შეიძლება "დაეწიოს" სურათებს კარგად. მაგრამ თითქმის 2 ჯერ მეტი დრო სჭირდება. ასე რომ, გადაწყვიტოს, თუ საჭიროა.

მოკლე ინსტრუქციები სამუშაოსთვის

  1. არქივის ჩამოტვირთვა .
  2. გაუხსენით.
  3. გადადით ახლად გახსნილ [OptimizeImg] საქაღალდეში.
  4. ყველა ფაილი, რომელიც მოითხოვს გაღიზიანებას, დააკოპირეთ საქაღალდე [ატვირთვა].
  5. გაუშვით 1. და დაველოდოთ. თუ არსებობს ბევრი ფაილი და ისინი png, დაველოდოთ დიდი ხნის განმავლობაში.
  6. როდესაც შეტყობინება გამოჩნდება შავ ფანჯარაში, საჭიროა გააგრძელოს გასაღები, გააგრძელოთ ყველაფერი. იგი რჩება შეიტანოს შექმნილი ფოლდერების შინაარსი და გადაწერა მასპინძელი FTP- ის მეშვეობით, ძველი ფაილების გადაწერა.

მაგალითად. ნება გექნებათ ბლოგის WordPress. ყველა სურათი ინახება [ / wp-content / uploads / ]. გადადით საიტზე საქაღალდეში (ftp), გადადით [ wp-content ] და უბრალოდ დააკოპირეთ [ uploads ] ფოლდერში OptimizeImg ამავე სახელწოდების. გაუშვით 1. და დაველოდოთ. სამუშაოების დასრულების შემდეგ, კონტენტი [jpg_jpegtran] (ჩვენ იქ მიდის!) ატვირთულია სერვერზე. არსებული ფაილების მოთხოვნები პასუხს აგებს გადაწერაში. მსგავსი ტკივილი png- სთვის, მაგრამ პირველ რიგში, რომელი ფოლდერი - [png_optipng] ან [png_pngout] - იკავებს ნაკლებ სივრცეს, შეავსეთ იგი თავისი შინაარსით.

არ შეგეშინდეთ სხვა ფაილების დაზიანებისათვის. Batniki მუშაობს მხოლოდ jpg / png, და მხოლოდ გამოსახულებები ამ ტიპის წერია ახლად შექმნილი ფოლდერები.

ვიმედოვნებ, რომ ვინმე სასარგებლო იქნება. წარმატებები!

დამატებები

  1. გზა [OptimizeImg] არ უნდა შეიცავდეს ძახილის ნიშანს ! და %
  2. გაუშვით სკრიპტები, როგორც ადმინისტრატორი არ არის აუცილებელი. უფრო მეტიც, ამ შემთხვევაში, მათ არ შეუძლიათ მუშაობა!
  3. ...

გამომცემელი

არა ხაზზე 13 საათი

x64 (aka andi)

კომენტარები: 2846 პუბლიკაციები: 395 რეგისტრაცია: 02-04-2009



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью