Webmaster Forum

Go Back   Webmaster Forum > Web Development > Digital Photography Forum

Digital Photography Forum Focuses on digital photography from a web development standpoint, such as tips for better product photography, lighting, optimizing photographs for web use, best digital camera choices, etc. Additionally, we encourage you to show off your personal shots!


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 01-23-2014, 06:18 AM
Contributing Member
Latest Blog:
None

 
Join Date: 11-02-13
Location: Cornwall ~UK
Posts: 210
iTrader: 0 / 0%
What is the best optimization for pictures

Hi

i hope i have this in the right section.i am in the process of updating my website and i am going to change the pictures on the gallery page. what picture and file size would be best and should i name the picture with relevant keywords to my site. Can i use a simple internet picture optimising program to do this. If you want to have a look at my gallery you can get to it through the sig underneath. any suggestion would be great.
__________________
Do you require reliable lawn mowing Truro or need lawn treatment Truro please have a look at my website
 
Reply With Quote

Advertisement

Advertisement

  #2 (permalink)  
Old 01-23-2014, 06:45 AM
Contributing Member
Latest Blog:
None

 
Join Date: 01-22-14
Location: Bristol
Posts: 93
iTrader: 0 / 0%
There is no one answer to this, it all depends on the image you are optimising.

There are lots of tools that do it, any decent graphics program will do, but I use Ps for it.

When you 'save for web' you can use a slider to change the quality of the image, this is directly related to the file size and how compressed the image is.

It's a case of using your eye to reduce the image quality to whatever you perceive to be acceptable.

I don't alter it much as most of my images are relatively small (200px square).

The image size in pixels should be exactly the size you need for it to take the relevant space up on the page. Don't go modifying the image size within the HTML img tag, as this will just distort it.
 
Reply With Quote
  #3 (permalink)  
Old 01-23-2014, 08:41 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 24,875
iTrader: 5 / 100%
Quote:
Originally Posted by grasshoppersean View Post
what picture and file size would be best
What ever size you decide on, make them all the same size so it looks tidy.

Compare the file size if you save as .jpg vs .png. Once might be smaller and reserve the quality of the image.

Save as progressive if .jpg. That should help keep any of the page speed testers happy.

Hint: If you make them all 200px wide and use a fluid design they will fit nicely on a phone.
Quote:
Originally Posted by grasshoppersean View Post
and should i name the picture with relevant keywords to my site.
Descriptive and keyword(s).
Quote:
Originally Posted by grasshoppersean View Post
Can i use a simple internet picture optimising program to do this.
You could do. Search for free online picture editor then test a few out to see which one gives you good results.

I personally like to have the software on my machine. Corel's PaintShop Pro isn't too expensive compared to Adobe's full Photoshop.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #4 (permalink)  
Old 01-24-2014, 02:17 AM
Contributing Member
Latest Blog:
None

 
Join Date: 11-02-13
Location: Cornwall ~UK
Posts: 210
iTrader: 0 / 0%
Thanks Conrad and html just what i wanted to know. it probably would be best to have the software on my computer. i have had ps before and found it a bit hard to use. is corel easy enough to use
__________________
Do you require reliable lawn mowing Truro or need lawn treatment Truro please have a look at my website
 
Reply With Quote
  #5 (permalink)  
Old 01-24-2014, 06:25 AM
msocialh's Avatar
Contributing Member
 
Join Date: 01-01-14
Location: kuwait
Posts: 106
iTrader: 0 / 0%
There is many tools that can help you optimize your images, the most valuable image optimization is of course the size of the image to make it load faster, a very good tool is smush it, if you have a WordPress blog then there is even a plugin for Smush it that will automatically optimize your newly uploaded images and can be used to even optimize your old images.
__________________
MSocialH is a Powerful Social media Exchange website, Get Free Facebook likes, Twitter Tweets, Google+s, Youtube views, etc...
Signup here.
 
Reply With Quote
  #6 (permalink)  
Old 01-24-2014, 09:07 AM
Contributing Member
Latest Blog:
None

 
Join Date: 01-22-14
Location: Bristol
Posts: 93
iTrader: 0 / 0%
I take your point about Ps Sean, but optimising images in it takes seconds. Just 'save for web'
__________________
Computer Repairs & IT Services Bristol & Bath | Technical blog and latest company news: Conrad Goodman IT Services
 
Reply With Quote
  #7 (permalink)  
Old 01-25-2014, 07:29 AM
Contributing Member
Latest Blog:
None

 
Join Date: 12-03-13
Posts: 123
iTrader: 0 / 0%
Photoshop has a "save for web" option that does really good on getting file sizes down without loosing quality
 
Reply With Quote
  #8 (permalink)  
Old 01-25-2014, 11:19 AM
ScriptMan's Avatar
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 13,046
iTrader: 4 / 100%
You can compress them a lot more that you think unless it is a photography site. For routine photo illustrations I often save them them at medium quality and 30% in PS.

But, don't take my word for it, visit some of the big boy sites and view the image info. CNN and Fox compress them a lot farther than I do.
__________________
I do not put ads or pop-ups in my posts and I have no control of what shows there. I do not endorse any product displayed in my post.
Scriptman's Playhouse || Ramblings from an old man
 
Reply With Quote
  #9 (permalink)  
Old 01-26-2014, 06:09 AM
Contributing Member
Latest Blog:
None

 
Join Date: 01-22-14
Location: Bristol
Posts: 93
iTrader: 0 / 0%
Depends a lot on the content and size of the image! I think a decent monitor and doing it by eye to see where the quality drop is noticable is the best method.
__________________
Computer Repairs & IT Services Bristol & Bath | Technical blog and latest company news: Conrad Goodman IT Services
 
Reply With Quote
  #10 (permalink)  
Old 01-26-2014, 07:52 AM
Contributing Member
Latest Blog:
None

 
Join Date: 11-02-13
Location: Cornwall ~UK
Posts: 210
iTrader: 0 / 0%
Quote:
Originally Posted by msocialh View Post
There is many tools that can help you optimize your images, the most valuable image optimization is of course the size of the image to make it load faster, a very good tool is smush it, if you have a WordPress blog then there is even a plugin for Smush it that will automatically optimize your newly uploaded images and can be used to even optimize your old images.
thanks for the replys. i tryed smuchit but when it reduced quality of the file and gave me the option to download it kept saying page not found.

i am going to get ps i think. i didnt realise it was that easy, just save to web.
__________________
Do you require reliable lawn mowing Truro or need lawn treatment Truro please have a look at my website
 
Reply With Quote
  #11 (permalink)  
Old 01-26-2014, 08:47 AM
ScriptMan's Avatar
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 13,046
iTrader: 4 / 100%
Quote:
Originally Posted by grasshoppersean View Post
thanks for the replys. i tryed smuchit but when it reduced quality of the file and gave me the option to download it kept saying page not found.

i am going to get ps i think. i didnt realise it was that easy, just save to web.
Adobe Photoshop Elements will do everything for pictures that PS will do. You don't get the other tools. Gimp is free but complicated. This http://www.irfanview.com/ is free and works almost as well for simple resizing and compression. You can use it to do batches of images.
__________________
I do not put ads or pop-ups in my posts and I have no control of what shows there. I do not endorse any product displayed in my post.
Scriptman's Playhouse || Ramblings from an old man
 
Reply With Quote
  #12 (permalink)  
Old 01-26-2014, 11:22 AM
TNWallpapers's Avatar
Contributing Member
Latest Blog:
None

 
Join Date: 01-20-14
Posts: 61
iTrader: 0 / 0%
Size....depends on your site. Go with what looks good.

Use your keyword as the Alt. Image Text if at all possible (don't recycle keywords here though meaning don't use the same one more than once)

Make sure the file name is accurate and relevant.

If it's a picture of the Statue of Liberty in the rain....

Name the file: statue-of-liberty-rainy-day.jpeg

Or something along those lines.

You can even insert a description if you'd like to.
 
Reply With Quote
  #13 (permalink)  
Old 01-26-2014, 09:32 PM
MattWarrell's Avatar
Junior Member
 
Join Date: 12-05-13
Location: Brisbane
Posts: 45
iTrader: 0 / 0%
Don't over optimise it but definitely optimise for sure. I would work off the dimensions of the space you're trying to fill - that way it will look the best but not bog your site down unnecessarily.
 
Reply With Quote
  #14 (permalink)  
Old 01-27-2014, 03:46 AM
Contributing Member
Latest Blog:
None

 
Join Date: 11-02-13
Location: Cornwall ~UK
Posts: 210
iTrader: 0 / 0%
Quote:
Originally Posted by TNWallpapers View Post
Size....depends on your site. Go with what looks good.

Use your keyword as the Alt. Image Text if at all possible (don't recycle keywords here though meaning don't use the same one more than once)

Make sure the file name is accurate and relevant.

If it's a picture of the Statue of Liberty in the rain....

Name the file: statue-of-liberty-rainy-day.jpeg

Or something along those lines.

You can even insert a description if you'd like to.
that you everyone for your advice.

i am just looking into what you have said. my knowledge is a bit basic (but learning)so i have to google terms like alt image text. i understand what it is now but where would i put this.i am using jamoola with a joom gallery if that revelant.

also with the file name does it have to be statue-of-liberty.jpeg or statue of liberty.jpeg with spaces. sorry if this is a bit stupid to ask.
scriptman i will have a look at the elements then, i dont want any extra programs ps might come with, wouldnt need to sue them.

thanks, i am getting there
__________________
Do you require reliable lawn mowing Truro or need lawn treatment Truro please have a look at my website
 
Reply With Quote
  #15 (permalink)  
Old 01-27-2014, 04:12 PM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 24,875
iTrader: 5 / 100%
Quote:
Originally Posted by grasshoppersean View Post
my knowledge is a bit basic (but learning)so i have to google terms like alt image text. i understand what it is now but where would i put this.i am using jamoola with a joom gallery if that revelant.
There is not box when uploading the image for you to fill in the alt text? (short for alternative text) Is there at least an image tilte box you can fill in? What about a caption box? It would actually be a good idea to fill all of these in with different information describing the image. You can use a keyword or two but they are not meant for keyword stuffing.
Quote:
Originally Posted by grasshoppersean View Post
also with the file name does it have to be statue-of-liberty.jpeg or statue of liberty.jpeg with spaces. sorry if this is a bit stupid to ask.
No question is stupid and it is a good thing you asked! Many people are use to Windows and saving an image with spaces in the file name is perfectly fine but when you are working on the web - NO Spaces! Some servers and browsers can figure this out but a lot won't. If you get a big old X where the image belongs you either a) forgot to upload the actual image or b) your web hosting server is one of those that can't figure out space in file names.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #16 (permalink)  
Old 01-28-2014, 02:36 AM
Contributing Member
Latest Blog:
None

 
Join Date: 11-02-13
Location: Cornwall ~UK
Posts: 210
iTrader: 0 / 0%



this is the new thing i have learnt this morning taking screen shots.haha. i have posted these because its easier for you to see the page than me explain. which sections should i be filling in for the alt text.
also when naming my photos i will but - between words instead of spaces
__________________
Do you require reliable lawn mowing Truro or need lawn treatment Truro please have a look at my website
 
Reply With Quote
  #17 (permalink)  
Old 01-28-2014, 02:53 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 24,875
iTrader: 5 / 100%
Finding that example image in the code it produced:
HTML Code:
<a title="garden_1" href="/gallery/image?view=image&amp;format=raw&amp;type=orig&amp;id=30" rel="lightbox[joomgallery]" class="jg_catelem_photo jg_catelem_photo_align"> <img src="http://www.grasshoppergardenservices.co.uk/images/joomgallery/thumbnails/gallery_2/garden_1_20140128_1648752422.jpg" class="jg_photo" width="300" height="300" alt="garden_1" /></a>
Notice that the title tag and alt attribute have the same text in them.

Put what you want as the alt attribute in the title box.

Put a small description in the description box for now and see if it shows as a caption under the photo or just in the blown up version.

What were the results?

BTW: Congrats on learning how to do a screenshot.
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
  #18 (permalink)  
Old 01-29-2014, 03:36 AM
Contributing Member
Latest Blog:
None

 
Join Date: 11-02-13
Location: Cornwall ~UK
Posts: 210
iTrader: 0 / 0%
Quote:
Originally Posted by ScriptMan View Post
Adobe Photoshop Elements will do everything for pictures that PS will do. You don't get the other tools. Gimp is free but complicated. This http://www.irfanview.com/ is free and works almost as well for simple resizing and compression. You can use it to do batches of images.
i got elements yesterday and it is so easy to use, well the things i was using it for was. the save to web option is excellent. on a couple of pictures i even edited out things like leaves on the grass..
__________________
Do you require reliable lawn mowing Truro or need lawn treatment Truro please have a look at my website
 
Reply With Quote
  #19 (permalink)  
Old 01-29-2014, 03:40 AM
Contributing Member
Latest Blog:
None

 
Join Date: 11-02-13
Location: Cornwall ~UK
Posts: 210
iTrader: 0 / 0%
Quote:
Originally Posted by HTMLBasicTutor View Post
Finding that example image in the code it produced:
HTML Code:
<a title="garden_1" href="/gallery/image?view=image&amp;format=raw&amp;type=orig&amp;id=30" rel="lightbox[joomgallery]" class="jg_catelem_photo jg_catelem_photo_align"> <img src="http://www.grasshoppergardenservices.co.uk/images/joomgallery/thumbnails/gallery_2/garden_1_20140128_1648752422.jpg" class="jg_photo" width="300" height="300" alt="garden_1" /></a>
Notice that the title tag and alt attribute have the same text in them.

Put what you want as the alt attribute in the title box.

Put a small description in the description box for now and see if it shows as a caption under the photo or just in the blown up version.

What were the results?

BTW: Congrats on learning how to do a screenshot.
thanks for your help. i have put a description in the alt att title box but nothing came up. do i need to do something with the code you have put there.
__________________
Do you require reliable lawn mowing Truro or need lawn treatment Truro please have a look at my website
 
Reply With Quote
  #20 (permalink)  
Old 01-29-2014, 03:49 AM
HTMLBasicTutor's Avatar
Administrator
 
Join Date: 10-29-07
Location: Canada
Posts: 24,875
iTrader: 5 / 100%
You fixed the image alt attribute and title tag.
HTML Code:
<a title="Garden Maintenance " href="/gallery/image?view=image&amp;format=raw&amp;type=orig&amp;id=52" rel="lightbox[joomgallery]" class="jg_catelem_photo jg_catelem_photo_align"> <img src="http://www.grasshoppergardenservices.co.uk/images/joomgallery/thumbnails/gallery_2/garden_maintenance__2_20140129_1548221450.jpg" class="jg_photo" width="300" height="300" alt="Garden Maintenance " /></a>


You might not see this if:
a ) You did not clear your browser cache
b ) Your ISP caches the net
It did work here though.

Now, in the second screenshot you had above there was a box called description. Put something in there and see if it at least shows up in the pop up when they click the image.

Looks much nicer with all the images the same size. Well done!
Attached Thumbnails
What is the best optimization for pictures-grasshopper.gif  
__________________

HTML Basic Tutor - Learn how to code for better SEO
Basic Computer Information - Computer & internet basics for website owners

SEO troubleshooting and review services available. - Pm me.
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Digital Photography Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
image optimization for search engine optimization rajeshwarishah SEO Forum 6 11-09-2011 12:15 AM
what is the difference between local site optimization and global site optimization. Shefali SEO Forum 6 05-27-2011 03:19 AM


V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 08:48 AM.
Powered by vBulletin
Copyright 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.