Image compression quality

Hi Guys, The site I'm working on is cloaked and the above url is not relevant for this question.

I recently purchased smush to help optimize my images. However, I've noticed that I continue to have trouble with image quality overall. I'm trying to use a Wordpress theme which enlarges each image in my portfolio by 200%. Images are currently being save as a press ready PDF out of Indesign, placed in psd to add backgrounds and size accurately for the 800dpi image space, and exported for web (to optimize). All of the text looks like heck! And when the images are enlarged they look even worse. As a designer, I want to maintain quality on the zoomed view. Any way to do this? Also, I can get the images to be very crisp from the PDF in photoshop, but don't know if they are losing the quality from the export for web, the wordpress compression, or the smush.... or all three. Any advice? Do I need to turn off Wordpress compression? Is this a known issue with Smush as a "normal" compromise for site speed?

  • Kasia Swiderska
    • Support nomad

    Hello Ann,

    If you need to keep original images not compressed, in good quality you should not Smush them. Smushing and Super Smushing will change image quality. So if those images need to be as sharp as possible, you need to disable option Smush my original full-size images .
    When the site is displayed it should show a thumbnail for the images - those thumbnails should be compressed, but then enlarged images not. If your theme uses original images as thumbnails, then it's not a correct way (in this case you can try then use Smush CDN and that should help).

    Every compression will affect the quality of the images. If images are correct after saving them in Photoshop and you want to keep that quality, you should disable compressing in WordPress and then in Smush for original images.

    kind regards,
    Kasia

  • Ann
    • New Recruit

    Hi Kasia,

    Thanks for your response. I'm new to wpmudev and the whole CDN thing. Have also never had this problem in Wordpress before and suspect Wordpress compression, not Smush, but I don't know this for sure.

    This particular web template says to upload an image that is 800x650 (the size showing on the screen). However, there is also a popup zoom window that doubles that size. In that location all of the images get fuzzy because they are being enlarged to double the original size.

    Because my portfolio will be extensive, I'd like to upload the images as 1600x1300 to start, allowing them to be decent resolution at both views. BUT I don't want to slow down the site load speed.

    My thought was to upload 1600 x 1300 image files (a number of them), run Smush, and have the best of both worlds. Is this accurate?

    And is Smush the same as Smush CDN, or is the CDN a separate feature that is part of the wpmu package?

    Am I thinking logically here? Any advice would be appreciated. I am a digital/graphic/web designer and need the imagery to appear as crisp as possible but site efficiency and speed is also critical or it looks like I don't know what the heck I'm doing! (HAALP! )

    Your thoughts?

    /annk

  • Kasia Swiderska
    • Support nomad

    Hello Ann ,

    This particular web template says to upload an image that is 800x650 (the size showing on the screen). However, there is also a popup zoom window that doubles that size. In that location all of the images get fuzzy because they are being enlarged to double the original size.

    If your popup is showing a bigger image size than 800x650 then you can't upload images of this size. They would need to be uploaded in the size you want to show in the popup.
    I don't know how this theme is created but ideally, it should use a smaller image size for thumbnail and show the original size in the popup. From what you say it doesn't do that so the solution would be using bigger images and then let Smush CDN take care of serving the correct size of thumbnails with Autoresize feature.

    My thought was to upload 1600 x 1300 image files (a number of them), run Smush, and have the best of both worlds. Is this accurate?

    If you need to have a high quality of images in your popup, as I mentioned before you can't Smush them (original size with the option " Smush my original full-size images " disabled), but you can Smush all other sizes and use Smush CDN to serve correct sizes.

    And is Smush the same as Smush CDN, or is the CDN a separate feature that is part of the wpmu package?

    Smush CDN is part of Smush. You can enable it in in Smush -> CDN

    Do I need to turn off the Wordpress compression to run Smush, or does it automatically override the defaults on Wordpress?

    Smush works "on top" of what WordPress does. Because of Smush compressing files on our servers, it needs to "wait" till WordPress will create all the image sizes before it works on them.
    WordPress sets images quality by default on 80, so with this code:

    function custom_jpeg_quality( $quality, $context ) {
    	return 100;
    }
    add_filter( 'jpeg_quality', 'custom_jpeg_quality', 10, 2 );

    it can be increased to 100%. This code can be used in functions.php file of the child theme or as Must Use plugin.

    kind regards,
    Kasia

  • Ann
    • New Recruit

    Hi Guys, I am in over my head and now wondering what it would cost to have you help me set up the proper image compression through Smush and figure out how to use the CDN feature. I also need to understand the finances around using these services and if it is best to do this here or through other sources. I've struggled with this issue for months off and on and have come to the conclusion that I just need assistance. Is this something you can assist with? Or should I speak to a local Wordpress agency for help?

  • Kasia Swiderska
    • Support nomad

    Hello Ann ,

    There is no additional cost in using CDN in Smush plugin (except when you use more bandwidth, then it's additional $5 per month for 50GB - but at this point, you have 10GB and it's in the subscription already). You have to only enable it in the Smush

    with following options:
    - Automatic Resizing
    - WebP Conversion
    Please check the screenshot of the settings:

    additionally can also select the " Background Images " if you have background images.
    But there is no more configuration of the Smush CDN.
    Please try this and see if this works for you.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.