Forums

Unable to compress images?

Permalink
I recently installed Concrete5 on a shared hosting account using Plesk 11.0.9.

After the install I upgraded to 5.6.1.2.

I enabled Pretty URL's and also added further content to my .htaccess file.

The additional .htaccess content I found in a Concrete5 forum.

When I run a optimization test at webpagetest.org I get a message in the test results that I am not compressing images

Compress Images: 22/100
325.3 KB total in images, target size = 73.6 KB - potential savings = 251.7 KB
FAILED - (325.3 KB, compressed = 73.6 KB - savings of 251.7 KB) -http://******.ca/files/8113/7195/1291/england_village.jpg...

Is their anything I could add into my .htaccess file (or remove from) so images would be compressed when running my site through webpagetest.org

Here is the content of my a

<IfModule mod_deflate.c>
# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>
<IfModule mod_expires.c>
<IfModule mod_headers.c>
Header unset Pragma
Viewing 15 lines of 48 lines. View entire code block.


Here is my environment

# concrete5 Version
5.6.1.2
# concrete5 Packages
None
# concrete5 Overrides
css/style.css, css/tabs.css
# Server Software
Apache
# Server API
cgi-fcgi
# PHP Version
5.3.23
# PHP Extensions
bz2, calendar, cgi-fcgi, Core, ctype, curl, date, dom, ereg, exif, fileinfo, filter, ftp, gd, gettext, gmp, hash, iconv, imap, ionCube Loader, json, libxml, mbstring, mcrypt, mhash, mysql, mysqli, openssl, pcntl, pcre, PDO, pdo_mysql, pdo_sqlite, Phar, readline, Reflection, session, shmop, SimpleXML, sockets, SPL, SQLite, standard, tokenizer, wddx, xml, xmlreader, xmlwriter, xsl, Zend Guard Loader, zip, zlib.
# PHP Settings
Viewing 15 lines of 39 lines. View entire code block.
SteadyIT
 
jvansanten replied on at Permalink Best Answer Reply
Typically, graphics formats used on the web -- gif, jpeg and png -- incorporate compression. Gifs use lossless compression, jpegs lossy, and pngs use either approach depending on the format.

So, any compression that you apply is done prior to putting the file on the server.

Here's the description from webpagetest.org on precisely what they're measuring:

"The image compression check just looks at photo images (JPEG files) and makes sure the quality isn't set too high. JPEG images can usually be compressed pretty substantially without any noticeable reduction in visual quality. We use a standard of compressing the images at a quality level of "50" in Photoshop's "Save for Web" mode but generally you should compress them as much as you can before they start to look bad. It's also not uncommon for other data to be included in photos, particularly if they came from a digital camera (information about the camera, lens, location, even thumbnail images) and all of that should be removed from images before being published to a web page. "

So, the remedy is to open the files in Photoshop and save them "for web" with a quality level of 50 or less.
Blenderite replied on at Permalink Reply
Blenderite
If you don't have Photoshop, there are other program that can do that too, such as Paint.NET, Gimp, MyPaint, etc. I would probably choose Paint.NET for this. The best part: It is free!!!

With Paint.NET, you would open the image and then save a new version of it by hitting Shift + S. That would open a window asking you where you wanted to save it. Choose a name and location for it and change the Save as Type from .pdn to .jpeg, then click save. It will then pop up a window asking about Quality. By moving the slider back and forth you can find a spot that has a small file size (it tells the size above the preview) and also have good enough quality for viewing. Once you are happy, click Ok and you are done!

The reason you choose .jpeg over .png is because the file size will a lot smaller with a JPEG. I hope this helps!!!
Steevb replied on at Permalink Reply
Steevb
You cannot compress images with .htaccess.

As mentioned you will need to compress through a graphic program before uploading.

The image you're referring to is a 'C5' image, so either optimise it and re-upload or delete it.

BTW: I don't use 'Photshhop' I use 'Fireworks', far quicker and easier to opimise images.

One click with default settings 'england_village' becomes 83Kb.
jvansanten replied on at Permalink Reply
Fireworks is indeed an overlooked gem for web development and Paint.NET is a pretty full featured Photoshop-clone which is useful for many typical photo manipulation tasks..

The parameters noted earlier should work with any graphics program of your choice to prepare the image(s) for your site.
SteadyIT replied on at Permalink Reply
SteadyIT
Hello,

Thank you everyone for the excellent advice on graphic programs and optimizing my images for web.

I decided to use my trusty GIMP application to save my jpegs at a 50% quality and incorporate the Optimize and Progressive functions through Advanced Options.

I tested my site again at webpagetest.org, after making these changes to the C5 image, and it was listed as compressed and progressive.

Thanks 55webdesign for highlighting that I cannot compress images with .htaccess. In regards to my .htaccess file, I found the content in a forum discussion on SEO. Is their any advice you have on a standard C5 htaccess file? Or is this one I am using great for my Linux Shared Hosting setup.

Sorry to go slightly off topic . . . just wondering