Want more timely Centmin Mod News Updates?
Become a Member

Wordpress Playing with EWWW Image Optimizer Wordpress Plugin

Discussion in 'Blogs & CMS usage' started by eva2000, Aug 15, 2017.

  1. ahmed

    ahmed Member

    243
    19
    18
    Feb 21, 2017
    Ratings:
    +26
    Local Time:
    3:10 PM
  2. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    nothing else :)
     
  3. ahmed

    ahmed Member

    243
    19
    18
    Feb 21, 2017
    Ratings:
    +26
    Local Time:
    3:10 PM
    Hoooray ....it worked today, don't know what was wrong yesterday

    for :

    Code:
    ./optimise-images.sh optimise /home/nginx/domains/domain.com/public/wp-content/uploads/2017/08/
    
    is there any workaround for bulk folder optimization and subfolders?
     
  4. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
     
  5. ahmed

    ahmed Member

    243
    19
    18
    Feb 21, 2017
    Ratings:
    +26
    Local Time:
    3:10 PM
    Looks like the line was duplicat entery on /usr/local/nginx/conf/nginx.conf that fix it


    - for webp I can not find any .webp files after running the optimizer, am I missing somthing?
     
  6. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
  7. ahmed

    ahmed Member

    243
    19
    18
    Feb 21, 2017
    Ratings:
    +26
    Local Time:
    3:10 PM
    I tried again with this modifier and got this

    Code:
    p-thumbnails/subscribe-physician.jpg" alt="resized/optimised 1920x1280 (jpg 367.02 KB)" width="240px" /></a>
              <p class="medium-font">subscribe-physician.jpg<br>resized/optimised 1920x1280 (jpg 367.02 KB)</p></div>
            <div class="col span_1_of_2"><a href="subscribe-physician.jpg.webp"> <img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="gallery-webp-thumbnails/subscribe-physician.jpg.webp" alt="webp  (webp 256.00 KB)" width="240px" /></a>
              <p class="medium-font">subscribe-physician.jpg.webp<br>webp  (webp 256.00 KB)</p></div>
    identify: insufficient image data in file `subscribe-speech.jpg.webp' @ error/webp.c/ReadWEBPImage/283.
    convert: insufficient image data in file `subscribe-speech.jpg.webp' @ error/webp.c/ReadWEBPImage/283.
    convert: no images defined `gallery-webp-thumbnails/subscribe-speech.jpg.webp' @ error/convert.c/ConvertImageCommand/3258.
    
    Code:
    image : whitening.png : 111 : 80 : 92 : True : 8 : 4788 : root : root
    image : whitening.png.webp : identify: insufficient image data in file `whitening.png.webp' @ error/webp.c/ReadWEBPImage/275.
     0 : root : root
    
     
  8. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    means should of the images are valid and/or the source images used aren't valid.

    i.e. inspect original image for gallery-webp-thumbnails/subscribe-speech.jpg.webp which would be
    gallery-webp-thumbnails/subscribe-speech.jpg
     
  9. Jay Chen

    Jay Chen Member

    99
    32
    18
    Sep 10, 2017
    Ratings:
    +55
    Local Time:
    9:10 AM
    Very impressive results.
    Any plan to make a wordpress plugin?
    Or have the ability to optimize one file, file path is passed in, at a time.
     
  10. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    no plans as i'm not a php coder so wordpress plugin isn't on the books

    could you elaborate with an example ?
     
  11. Jay Chen

    Jay Chen Member

    99
    32
    18
    Sep 10, 2017
    Ratings:
    +55
    Local Time:
    9:10 AM
    If I am not mistaken, right now the script only works at directory level.
    I was thinking to leverage this script with wordpress, every time someone uploaded an image, I will pass the path for the image, like /wp-content/uploads/image1.jpg, to this script to optimize and generate the webp.

    Right now I am using EWWW Image Optimizer, but this script seems to be doing a much better job at optimizing images.
     
  12. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    yeah that isn't something the script would be able to do especially triggering on wp image uploads.
     
    • Informative Informative x 1
  13. deltahf

    deltahf Premium Member Premium Member

    336
    152
    43
    Jun 8, 2014
    Ratings:
    +240
    Local Time:
    9:10 AM
    Giving this a try!

    I'm having some trouble, though. Here's what I got on my first run while trying this on an old WordPress media file directory (there's around 47MB of PNGs and JPGs in the directory):

    Code (Text):
    root @ rS /home/site/public/wp-content/uploads/2008/01 $ /root/tools/optimise-images/optimise-images.sh profile ./
    http://archive.scoutapp.com/rhel/6/main/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 6 - "Couldn't resolve host 'archive.scoutapp.com'"
    Trying other mirror.
    installing butteraugli
    Initialized empty Git repository in /opt/butteraugli/.git/
    remote: Counting objects: 156, done.
    remote: Compressing objects: 100% (6/6), done.
    remote: Total 156 (delta 0), reused 2 (delta 0), pack-reused 150
    Receiving objects: 100% (156/156), 6.35 MiB, done.
    Resolving deltas: 100% (61/61), done.
    ccache g++ -std=c++11 -I..   -c -o butteraugli.o butteraugli.cc
    cc1plus: error: unrecognized command line option "-std=c++11"
    make: *** [butteraugli.o] Error 1
    cp: cannot stat `butteraugli': No such file or directory
    installed butteraugli
    
    ------------------------------------------------------------------------------
    image profile 
    image name : width : height : quality : transparency : image depth (bits) : size : user: group
    ------------------------------------------------------------------------------
    images in ./
    logged at /home/optimise-logs/profile-log-300618-010713.log
    ------------------------------------------------------------------------------
    not images found matching criteria
    
    ------------------------------------------------------------------------------
    ImageMagick Resource Limits
    ------------------------------------------------------------------------------
    Version: ImageMagick 6.9.10-3 Q16 x86_64 2018-06-25
    Resource limits:
      Width: 214.7MP
      Height: 214.7MP
      List length: 18.446744EP
      Area: 67.249GP
      Memory: 31.3152GiB
      Map: 62.6305GiB
      Disk: unlimited
      File: 196608
      Thread: 4
      Throttle: 0
      Time: unlimited
    ------------------------------------------------------------------------------
    Completion Time: 0.00 seconds
    ------------------------------------------------------------------------------
    


    Looks like something is wrong with my g++ compiler? I'm on CentOS 6.9.
     
  14. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    • Winner Winner x 1
  15. deltahf

    deltahf Premium Member Premium Member

    336
    152
    43
    Jun 8, 2014
    Ratings:
    +240
    Local Time:
    9:10 AM
    It's working now, thanks! :D

    Here's a quick before/after comparison of a processed JPEG. There are a few compression artifacts, but it's not too bad so long as you don't zoom into the image. Most of the artifacts appear in the shadows of the car here.

    Before compression (552KB):
    1316_00029.jpg

    After compression (264KB):
    1316_00029-1.jpg
     
    • Like Like x 1
  16. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    Excellent great to hear. I first read your post on my mobile phone and the image resized, was practically identical to original at that size anyway - but you save 50% in image size !
     
    • Like Like x 1
  17. robert syputa

    robert syputa Member

    70
    13
    8
    Jan 18, 2018
    Seattle
    Ratings:
    +38
    Local Time:
    9:10 AM
    latest
    10
    Thanks!

    I had installed EWWW but then disabled it due to a conflict with another optimization extension. I thought it had the features I was looking for, namely the ability to use WebP - that has the potential to further reduce image file size in the supported browsers which appears to be growing.

    I resist using any online service for JPEG, GIF, or PNG optimization because I have found that this can be done using a PC or a server application with as good or better results. Also, the use of an image optimizing program has more options and can be experimented with more easily... such as selecting custom JPEG quality and other settings depending on the image use. And free and low-cost optimization programs are available.
    eCommerce and other sites can use hundreds to thousands of images that change often. That can add up in cost that that can be eliminated or significantly reduced - using online services for convenience/automation while using the application(s) to do bath-mode optimization of standard types of images that are typical of e-commerce pages.

    WebP can reduce file size by 15%-30%+ over optimized JPEG (Google's study shows 20%-30%+). That is a very substantial savings considering that a very low number of images have a perceptible lower image quality - which is much better than the impact compared to lowering of JPEG image quality settings.

    Considering that I do batch optimization using a PC or CM server, EWWW will be used mostly for WebP until I start using a new application and for standardized automatic resizing of images. The resizing of images based on use fits something to be done through a Wordpress plugin. Batch image optimzation can then focus on what it does best and not have to worry about where the image is being used on a page to determine a customized or standard scale size.
     
    • Like Like x 1
  18. robert syputa

    robert syputa Member

    70
    13
    8
    Jan 18, 2018
    Seattle
    Ratings:
    +38
    Local Time:
    9:10 AM
    latest
    10
    Where an image is used, ie. "who is the intended audience? " is all important when deciding how to scale and optimize images. If your audience is a low number of people and they are using widescreen TVs or monitors while demanding to look at the image widescreen rather than as a part of the page, then your image looks good.

    At the same HD scale, 1920x1080, I played around with a PC image program and could not reduce the size without making some change to the quality. I set JPEG quality at 75% and used 1 pixel of softness filtering - see the image.
    6836_1316_00029-1_75_1soft.jpg
    That reduced the size from the one you posted from 268k to 207k... but you can see some loss of sharpness. However, I bet most web visitors would not notice.

    If you are using this within a web page, then it can probably be down-scaled to a more appropriate size. I scaled to 800x600 and used 90% quality JPEG with no softness: That reduced to 112k. I also used 75% quality which got to 68K - I couldn't tell the difference at the native resolution but if either of the downscaled images are magnified there will, obvisously, be a substantial loss of quality compared to the original at its native resolution. The point is that if you do not need the full 1920x1080 image (full 2HD screen size, then you are wasting bandwidth.
    6836_1316_00029-1_800_600.jpg
     
    • Informative Informative x 1
  19. robert syputa

    robert syputa Member

    70
    13
    8
    Jan 18, 2018
    Seattle
    Ratings:
    +38
    Local Time:
    9:10 AM
    latest
    10
    Many of the social networking image-hosting sites do automatic scaling of images or require scale and size limitations on uploaded images. The newer type of sites in which the user takes pictures with their mobile phone camera usually auto-scale the images to a 'mobile friendly' image size with a click-resizing similar to this web board.
    That is because the image resolutions of mobile phone cameras can create enormous size files and videos that would clog up the servers and make the user experience for mobile users lousy.
    The problem is that mobile cameras have a much higher resolution than the mobile screens or for an embedded web image. The phone manufacturers are driven to provide higher resolutions that exceed the current norms for network and server bandwidth. Things will change so that, in years to come, larger images will be less of a concern. However, even when bandwidth is 10x-100x more abundant, the ability for humans to percieve resolutions above about 900x1080 on the average size cellphone is limited. 3D phone imaging technology never caught on... that increases the perceivable image resolution. In other words, on mobile devices, higher than about 1080p is not noticed - our eyeballs cannot detect the difference.
     
    • Informative Informative x 1
  20. eva2000

    eva2000 Administrator Staff Member

    41,645
    9,380
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +14,408
    Local Time:
    11:10 PM
    Nginx 1.17.x
    MariaDB 5.5/10.x
    sometimes webP is better for such