Did you have been stuck in traffic? If so then you know how annoying and slow, such a large, images can not be displayed optimized website. How to solve?


1. step: Reducing the size

If the above questions “again” the answer, then the solution: reduce the image size. Any image editing program, and this can easily adjust. The iPhone is a normal horizontal image 3200 px width. The header image, a 13 taking into account the full width of less-inch screen, mint 1300 It would be pixels. So one made with iPhone and instantly upload pictures, without editing, nearly three times higher.

You can use Photoshop, but basically any other image editing software can help, because it is a very simple task. You can use the preview to a Mac or an online service, which allows you to change the size of all at once. Another simple software, what I like Pixlr , a simple and completely free Photoshop style software, which runs in the browser.

2. step: compress the image in TinyJpg.com-tal

Töltsd le a képet gépedre és csak húzd és vidd a TinyJPG.com website. you get an optimized version of the image in a few seconds. The new compressed image hardly distinguish it from the original.

According to the website so that it works: “textures, the patterns and the colors automatically identify. The encoder uses this data to optimally compressed JPEG file is created. The final result is compared with the original and the optimized version. Excess metadata canceled “.

I use this solution running on platforms other than the WordPress solution for websites, where the next step can not be used.

3. step: use a plugin, to gather

Numerous plugins, which automate the second step. A Imagify használom erre. This device compresses all the pictures on the website, and the percentage of saved image size.

I tested two different scenarios:

  • five iPhone 6 picture + MacBook .png screenshots
  • Five pictures of a semi-professional Sony camera

In both cases, I have the following:

  • The original image 900 It is dimensioned pixels, to fit in a blog post
  • Manually compressed through TinyJpg.com-one
  • Automatically compressed Imagify (ultra optimization)

Each image format (original, manually resized and TinyJpged) I uploaded the pictures, and ascertain, how to automatically compress Imagify. The goal was, to find out, which performed better or plug all the work for me.


In both cases, the individual steps are slightly reduced image size, so pictures are smaller. The standard iPhone photo 3200px width, 3,5-times more, as the necessary 900px.

In the first step, the image size 87% -decreased by:

Format Original (px) Original 900px-up Resized from 900px – Reduction
JPG1 (iPhone) 591 109 -81,55%
JPG2 (iPhone) 1800 259 -85,61%
JPG3 (iPhone) 2000 250 -87,50%
JPG4 (iPhone) 1500 213 -85,80%
JPG5 (iPhone) 1000 221 -77,90%
PNG1 (Screenshot) 1300 566 -56,46%
PNG2 (Screenshot) 1400 557 -60,21%
PNG3 (Screenshot) 1600 624 -61,00%
PNG4 (Screenshot) 711 275 -61,32%
PNG5 (Screenshot) 1100 508 -53,82%

Later on, In most cases, the iPhone can compress images and screenshots of all steps: resizing, Compression using TinyJpg and Imagify. Each new step is situated on top of each other, the percentages are not cumulative.

Format Original (px) Resized from 900px


+ Imagify


900px + TinyJpg + Imagify


final size (kb)
JPG1 (iPhone) 591 -81,55% -24,77% 0,00% 83
JPG2 (iPhone) 1800 -85,61% -53,67% 0,00% 76
JPG3 (iPhone) 2000 -87,50% -56,80% 0,00% 70
JPG4 (iPhone) 1500 -85,80% -59,15% -47,56% 43
JPG5 (iPhone) 1000 -77,90% -64,25% -52,33% 41
PNG1 (Screenshot) 1300 -56,46% -81,27% -12,41% 127
PNG2 (Screenshot) 1400 -60,21% -80,97% -18,11% 104
PNG3 (Screenshot) 1600 -61,00% -81,89% -7,43% 137
PNG4 (Screenshot) 711 -61,32% -85,45% -20,00% 44
PNG5 (Screenshot) 1100 -53,82% -84,06% -8,33% 99

Any of the Sony camera used has not won a “definitive” Imagify from the compression after TinyJpg.

But here's the trick: Compression of the TinyJpg with them a reduced size, which could not be reached for Imagify. When I left the TinyJpg was ignored, Images of the same size would remain, than a second column:

Format 900px + Imagify
size is about
900px + TinyJpg
size is about
JPG1 (Sony) 421 296 -29,69%
JPG2 (Sony) 461 271 -41,21%
JPG3 (Sony) 180 106 -41,11%
JPG4 (Sony) 258 245 -5,04%
JPG5 (Sony) 304 199 -34,54%

final thoughts

This problem often overlooked, do not spend your time, because energy is not important, and the!

You do not have to do all three steps, but two can combine. resizing of images for the first time, and then manually or automatically compressed.

If you want to impress a client, you can run a speed measuring device, such as GMetrix or fix the Page Speed ​​Insights score before and after. 22 I raised above image is an image optimization.

If you liked it, Please share it with your friends!