Jos haluat tarjota vierailijalle erinomaisen käyttökokemuksen, sinun on varmistettava, että verkkosivustosi latautuu nopeammin, joten se ei turhauta heitä. Itse asiassa verkkosivustosi nopeus voi tehdä tai rikkoa online-liiketoimintaasi. Sinun on optimoitava WordPress-kuvat sivustosi nopeuttamiseksi - koska kuvat ovat yleensä sisällön raskain osa,
Walmart on löytänyt a Niiden muuntokurssi nousee 2% whenever they improved the speed by 1 second. This is one example of many that indicate making your website fast is criticale.
An easy way of making your website faster is by optimizing all the images on your WordPress website.
Jos et ole vielä pitänyt WordPress-verkkosivustosi nopeutta kriittisenä osana yritystäsi, sinun on mietittävä uudelleen ja aloitettava toimenpiteitä WordPress-verkkosivustosi nopeuden parantamiseksi.
Suosittele lukemista: How to get a fast WordPress website - a complete guide [25 steps]
On monia tapoja tehdä verkkosivustostasi nopeampi. Jotkut niistä on lueteltu alla.
- Vältä liian monien WordPress-laajennusten käyttöä
- Käytä WordPress CDN -palveluja
- Optimoi CSS-toimitus
- Optimoi WordPress-kuvat
Images that have not been optimized for the web are typically large. These images will take longer to load.
It’s important that you optimize your images by making them as small as possible.
However, most times, the process of optimizing images for WordPress and your website is tedious or gets in the way of producing content.
Tässä viestissä selitämme erilaisia tapoja optimoida WordPress-kuvasi ja siten saada sivustosi latautumaan nopeammin.
Pakkaa kuvat tai tallenna ne verkkoon
It is a no-brainer that size of your image can influence the loading time of your WordPress website. The more your browser has to load, the more time it will take to do it.
That's especially true on mobile or slower internet connections.
As high-resolution images will have a larger file size, it is always better to pakkaa kuvat ennen lähettämistä.
That way, browser will need to download less data so should load much faster.
Nyt sinulla voi olla kysymys: mikä on WordPress-kuvien pakkaus ja miten se voi pienentää kokoa vaikuttamatta laatuun?
Pakkaus on kuvan koon pienentämisprosessi dramaattisesti poistamalla algoritmisesti kuvatiedot, joita ihmissilmä ei voi havaita. Tämä on erittäin tehokas tapa optimoida WordPress-kuvat.
Though image compression is a sure-fire method to reduce the image size, when it comes to compressing JPEG files, sometimes the process loses the actual contents of the images during the process.
This is the only downside of this approach. Remember to check the post-compression results carefully, to make sure that you are happy with the results of compression.
WP Smush is a popular WordPress plugin that lets you easily reduce the image file size by scanning every image you upload and removing unnecessary data information.
The free version of this plugin lets you compress images up to 1 MB in size whereas, with the pro version, you can compress images up to 32 MB.
Voit ladata WP Smush tästä.
Huomaa myös, että tämän laajennuksen avulla voit optimoida kaikki äskettäin ladatut kuvat WordPress-verkkosivustollesi. Jos haluat pakata olemassa olevat kuvat, voit optimoida olemassa olevat WordPress-kuvat käyttämällä Mediakirjasto-välilehden Bulk Smush.it -linkkiä.
We'll talk more about optimization plugins in a little while.
Lazy loading: Optimize WordPress image load times
[PÄIVITYS: WordPress 5.4 has lazy loading built in. As long as you keep WordPress up to date, you no longer need to worry about lazy loading.]
Me kaikki tiedämme, että "kuva on tuhannen sanan arvoinen".
Liian monen kuvan käyttäminen yhdellä sivulla voi kuitenkin hidastaa verkkosivustoasi.
Yksi helppo tapa parantaa latausaikaa on poistaa tarpeettomat kuvat ja pitää vain se, mikä on ehdottoman välttämätöntä. Kaikki eivät kuitenkaan halua vähentää verkkosivulla käytettävien kuvien määrää, vain jotta sivu latautuu nopeammin.
Kuinka tämä ongelma voidaan ratkaista?
You might have noticed it already- websites that use a lot of images on each page solve this issue by making the image load only when it is visible to the user.
This tactic not only reduces the page load time but it saves server bandwidth as well. This is called lazy loading. Because the image is "lazy", it only comes up when it is needed.
If you’re on WordPress, it is easier to make the image loads only when it is visible. All you need to do is that install a Lazy load plugin.
Once again this is an excellent way to optimize WordPress images for improved speed.
You used to need a plugin for this but now it's baked into WordPress.
Lue lisää: Divi vs Elementor
Käytä oikeaa kuvamuotoa
Kunkin kuvamuodon erojen tunteminen antaa sinun käyttää oikeaa muotoa verkkosivustollasi, mikä auttaa sinua jopa kuvan optimoinnissa.
JPEG, PNG ja GIF ovat suosituimpia kuvamuotoja.
What format is better for optimized WordPress website images and when should you use it?
- GIF: Käytä GIF -tiedostoa, jos kuvasi on liian pieni ja käyttää suhteellisen paljon less värien lukumäärä. Esimerkiksi GIF on hyvä valinta leikekuviin, luoteihin ja kaavioihin. Toisaalta monimutkaisia kuvia, joissa on parannuksia, kuten varjoja, ei voitu näyttää oikein GIF: n avulla.
- JPEG / JPG: Se soveltuu monimutkaisiin kuviin, joissa on paljon värivaihtoehtoja, tai jos se sisältää valokuvia.
- PNG: PNG-muoto sopii parhaiten läpinäkyville kuville.
- WebP: tämä on paras muoto näinä päivinä, mutta näiden kuvien luominen edellyttää palvelintukea verkkosivustollasi
Huomaa, että nämä ovat vain yleisiä suosituksia. Kuten kaikki säännöt, on myös poikkeuksia, ja jotkut näistä säännöistä on tarkoitus rikkoa.
Käytä selaimen välimuistia tehokkaasti
Kun lataat kuvia verkkosivulle, muista ladata ne yhteen hakemistoon. Kuvien lataaminen yhteen verkkosivun hakemistoon auttaa selainta lataamaan kuvat helposti selaimen välimuistilla toistuvien käyntien aikana.
It's fine if you are uploading images via the default WordPress image uploader. But for instance, if you're creating HTML landing pages on WordPress, chances are you won't be using the default WordPress image uploader.
In these cases, instead of uploading the images of a web page to different directories, make sure you upload all of them into a single directory.
Jos haluat lukea lisää selaimen välimuistista ja sen hyödyntämisestä, tutustu yksityiskohtaiseen artikkeliin täällä: Kuinka hyödyntää selaimen välimuistia WordPressissä laajennuksella tai ilman [5 tapaa]
Käytä samaa kuvaa useita kertoja
Toinen tapa käyttää selaimen välimuistia kuvan kaistanleveyden vähentämiseksi on käyttää samoja kuvia useita kertoja koko sivustossa.
Esimerkiksi, kun käytät logoja tai valikkokohteita sivulta, varmista, että soitat samoille kuville kaikkialla sivustossa, jotta käyttäjien ei tarvitse ladata niitä useita kertoja, vaan kerran, ja selaimet voivat näyttää kuvat selaimesta kätkö.
Kun käytät teksturoitua taustaa, varmista, että käytät pienempiä kuvia toistuvasti yhden suuren kuvan sijaan. Tämä voi myös auttaa vähentämään latausaikaa.
Oletusarvoisesti, kun lataat kuvia käyttämällä median latausohjelmaa WordPress-hallintapaneelissa, se menee kansioon riippuen siitä, kun lataat sen. Tämä tarkoittaa, että kaikki kuussa ladattavat kuvat sijaitsevat yhdessä hakemistossa.
Esimerkiksi, jos lataat kuvan vuonna 2021 tammikuussa, se sijaitsee tässä hakemistossa: wp-content / uploads / 2021/01.
Katsotaanpa lataamisen edut median latauslaitteen kautta, ja sitten kerromme sinulle, mitä sinun on otettava huomioon, kun et lataa mediasi latauslaitteeseen verkkosivustosi nopeuttamiseksi.
Median latausohjelma nopeuttaa kuvan lataamista: The loading will be quicker if the images are stored in the same folder while browsing a web page.
When the images are being called repeatedly, the browser can easily retrieve them from the browser cache if they’re in a single folder.
Usein WordPress-bloggaajat eivät kuitenkaan käytä mediaoletuslatainta, varsinkin kun he työskentelevät räätälöityjen aloitussivujen parissa. Helppokäyttöisyyden vuoksi he lataavat kuvia erilliseen hakemistoon.
Tällaisissa tapauksissa varmista, että lataat kaikki kyseisen sivun kuvat yhteen hakemistoon useiden hakemistojen sijaan. Tämä taktiikka voi parantaa latausaikaa, koska tiedostojen välimuisti on helpompaa toistuvien käyntien aikana.
Käytä CSS: ää kuvien sijaan
Tiedätkö, että voit parantaa latausaikaa käyttämättä kuvaa ollenkaan?
For example, it is totally possible to generate certain shapes by using simple CSS instead of images such as rounded rectangles, gradients, drop shadows, and transparent images.
That being said, make sure that you keep an eye on browser compatibility check whenever you replace any image with CSS because not all the browsers are able to support these techniques.
5 image optimization plugins to help maintain page speed
We mentioned the Smush image optimization plugin earlier but it isn’t the only one you can use.
If you’re convinced that optimizing images are the way to go (and you should be), here are 5 WordPress plugins that deliver:
1. ShortPixel Image Optimizer for WordPress
ShortPixel Image Optimizer for WordPress is a lightweight plugin with all the basic features to help you optimize images.
It compresses images, converts, them, includes background processes to optimize images and a whole lot more.
The plugin is free to use for up to 100 credits per month. Then it costs from $3.99 per month for extra credits. Unlimited plans start at $8.99 per month.
This plugin does a lot of things right. The free version lets you try before you buy but makes life complicated with pricing once you begin optimizing more images. Otherwise it’s a good option.
2. Imagify
Imagify is a popular image optimization plugin with over 300,000 installations. It enables you to optimize images, convert formats including WebP and resize on the fly. It’s a very competent plugin if you think you might use all the options.
There’s a free version with up to 20MB of file optimizations. Premium plans cost $4.99 per month for up to 500MB and $9.99 a month for unlimited optimizations.
As Imagify compresses on their own servers rather than yours, this pricing method works better.
Imagify offers some powerful optimization tools and three levels of compression. What’s more, it uses its own servers to do it. That free 20MB isn’t much though as an HD image can easily be 2MB upwards.
3. Ewww Image Optimizer
EWWW Image Optimizer is a free image optimization plugin for WordPress that does a lot without asking for anything back. It installs into WordPress and uses both lossy and lossless compression to shrink images on your site.
It can cope with images up to 150MB in size and can shrink most by up to 50%. While it doesn’t have many more advanced features, the basics are very definitely covered.
EWWW Image Optimizer is a great free option that’s pretty basic but gets the job done. Anyone that needs lazy loading or more advanced image optimizations will need to pay from $7 per month for premium features.
4. Smush
Smush is a powerful free image optimization plugin for WordPress. It has over 1 million installations and does everything a plugin of this kind should do. It optimizes, shrinks, changes format and even lazy loads images.
Smush is install and forget. Set it up, let it loose and it will optimize all existing images and will automatically do the same for all new images. The Bulk Smush feature is especially useful for image-heavy websites or portfolios.
To be honest, Smush is so capable, we struggle to justify paying for image optimization. If you run a smaller website and don’t depend heavily on images, it could be the only plugin you need.
5. Optimooli
Optimole is more of a hands-off image optimization plugin. Once installed, it will check existing images and optimize them and automatically shrink new images like Smush does.
Optimole also offers cloud-based images using an Optimole server. This can speed up image delivery at the expense of more HTTP requests. It is free for up to 5,000 visitors per month and $19.99 for unlimited images.
Optimole is good in that it handles serving images on your web pages. It’s not so good in that it serves images for your web pages. You lose a lot of control in return for a modest performance gain.
Frequently Asked Questions about Optimize WordPress Images Plugins
Is there a WordPress image compression plugin that is free?
Yes, there are several free WordPress image compression plugins available that can help you reduce the file size of your images without sacrificing quality. Some popular options include Smush, ShortPixel, and Optimole. These plugins are freemium, so you'll usually get a certain number of image compressions for free and then more options or usage as part of a premium plan.
How do you optimize images for the web in Photoshop?
To optimize images for the web in Photoshop, follow these steps. First, resize the image: Go to Image > Image Size and set the dimensions to the size you want for your web page. Be sure to check the "Resample Image" box and choose "Bicubic Sharper" for best results. Save the image for web: Go to File > Export > Save for Web (Legacy) and choose your file format (JPEG, PNG or WebP) and compression settings. Use the preview panel to compare different compression levels and ensure that your image looks good while still having a small file size. Use the right file format: For photographs, use JPEG format and for graphics or logos, use PNG format, or WebP which is typically good for most types of images. This will help to ensure that your images are optimized for the web and load quickly on your website.
How do you optimize images for WordPress without a plugin?
To optimize images for WordPress without a plugin, you can follow these steps. Resize the image using an image editor to resize the image to the dimensions you want. You can use Photoshop, GIMP, or any other image editor you are comfortable with. You can compress the image use an image compression tool. There are many free online tools available, such as TinyPNG or Kraken.io, that can compress your images without losing quality.
Optimizing WordPress images
Image optimization is one of the most important tweaks you can make to improve the usability and responsiveness of your website.
As speed is everything, delivering pages quickly, with minimal delay helps improve engagement and will have a knock-on effect on your SEO too.
As it's so simple to do, we think every website should use some form of image optimization.
What do you think? Do you optimize images? What method do you use?
Ole hyvä Jätä hyödyllinen kommentoi ajatuksiasi ja jaa tämä sitten Facebook-ryhmissäsi (ryhmissä), jotka pitävät tätä hyödyllisenä, ja hyödynnetään yhdessä. Kiitos jakamisesta ja mukavuudesta!
Disclosure: Tämä sivu voi sisältää linkkejä ulkoisille sivustoille tuotteille, joita rakastamme ja kannatamme sydämestämme. Jos ostat suosittelemiamme tuotteita, saatamme ansaita viittausmaksun. Tällaiset maksut eivät vaikuta suosituksiimme, emmekä hyväksy maksuja positiivisista arvosteluista.
ja paljon muuta ...